Responsive UI Improvement: Activity Overview Configuration Panel Layout on Laptop Resolutions

Viona

Title

Category

UI/UX Enhancement

Environment
QloApps Version: 1.7.0
Browser: (Chrome/Firefox)
OS: Windows 11
Device: Laptop (1366×768)

Description

While exploring the Dashboard's Activity Overview widget, I observed a responsive layout inconsistency in the Configuration panel.

The layout renders correctly on larger desktop monitors. However, on laptop-sized viewports with the left navigation menu expanded, the available horizontal space becomes limited, causing field labels to wrap into multiple lines and making the form appear compressed.

When the left navigation menu is collapsed, the same configuration panel displays correctly without label wrapping.

This indicates that the behavior is dependent on the available viewport width rather than the functionality itself.

Steps to Reproduce
Login to the QloApps Admin panel.
Navigate to Dashboard.
Keep the left navigation menu expanded.
Click the Configuration (️) icon in the Activity Overview widget.
Observe the layout on a laptop resolution.
Collapse the left navigation menu and compare the layout.
Actual Result
Labels wrap into multiple lines.
The configuration form appears compressed.
Overall readability is reduced.
Expected Result

The configuration panel should maintain a consistent and readable layout across commonly used laptop resolutions, regardless of whether the left navigation menu is expanded or collapsed.

Observation

This does not affect functionality, but improving the responsive layout would provide a more consistent user experience across different screen sizes.

Aradhana Singh

Hi @Viona,

I tested the issue using the same environment mentioned in the report:

QloApps Version: 1.7.0
Browser: Chrome/Firefox
Resolution: 1366×768

However, I was unable to reproduce the reported issue, and the configuration panel is displaying correctly on my end.

For reference, please see the screenshot: Screenshot

Could you please share a screenshot or screen recording showing the issue on your end? This will help us understand the exact layout behavior and investigate it further.