[Manager] Broken layout in "View Options" panel (Manage Elements)

[evolution-lover]

Description

In the "Manage Elements" section, clicking the View Options button toggles a settings panel that suffers from broken CSS layout. Elements are cramped together, lacking proper margins and padding. Text labels overlap with adjacent checkboxes (e.g., the Icons checkbox and Font-Size label are merged), making the UI difficult to navigate.

Steps to Reproduce

1. Log in to the Manager panel.
2. Navigate to Elements -> Manage Elements.
3. Open any tab (e.g., Plugins, Templates, or Template Variables).
4. Click the View Options button (located to the right of the filter field).

Expected Behavior

The display settings panel should open with a clean, organized layout. Form elements (radio buttons, checkboxes, inputs) should have sufficient spacing, and labels should be clearly separated from their respective inputs.

Actual Behavior

The layout inside the View Options panel is misaligned:

• There is no horizontal spacing between labels and checkboxes.
• The Font-Size input and Icons checkbox visually collide as "IconsFont-Size".
• The overall panel appears cluttered and unprofessional.

Environment

• Evolution CMS Version: 3.5.x
• PHP Version: 8.4
• Browser: Google Chrome (Latest Version)

Screenshots

[evolution-lover]

The previous fix only addressed the alignment of the "List/Inline/Flex" radio buttons. However, the rest of the "View Options" panel still has major layout issues that need to be resolved.

Key Issues to Fix:

Input Overlap: Labels are overlapping or touching the input fields (e.g., "Icons" is running into "Font-Size", and "Font-Size" is overlapping its input box).

Spacing & Padding: There is a lack of horizontal spacing between different elements (Checkboxes, Inputs, and Labels).

Alignment: The "All Tabs" checkbox and the "Reset" button are poorly aligned with the rest of the row.

Responsiveness: Ensure that elements wrap correctly or stay properly spaced if the window is resized.

[middleDuckAi]

Thanks for the follow-up. I found that the remaining overlap came from the parent form still using Bootstrap form-inline, so separate View Options rows could sit beside each other and collide.

I prepared a follow-up PR that removes that conflicting inline behavior and gives the View Options panel its own scoped responsive flex layout for spacing, input widths, wrapping, and the Reset action alignment: #2345

Verification included the updated layout contract test plus PHP syntax checks and git diff --check.