Steps to reproduce the issue

Audit finding

At a 320 CSS-pixel-wide viewport, the permission selectors in Global Configuration are compressed toward the right edge of the layout.

The selected value in each dropdown cannot be read. The report notes that the Permissions view otherwise reflows reasonably well at this width, unlike the Text filters view.

The report suggests displaying each permission selector on its own line so the current value has enough space. It also suggests considering radio buttons or checkboxes for the permission states, grouped in fieldsets.

The report's suggested radio-button labels are

• Default (Not Allowed)
• Allowed
• Denied

The alternative control design is a usability improvement, but the immediate reflow requirement is that the selected value remains readable without horizontal scrolling.

User impact

People using narrow viewports cannot see which permission value is currently selected. They may need to open each dropdown merely to determine its current setting.

This affects people who use a small browser window, a narrow device, or browser zoom that produces an equivalent narrow viewport. It can also make it harder to compare the current setting with the calculated or inherited permission outcome.

Screen-reader users may need to navigate to the calculated setting and then return to the selector to understand the current default or inherited value before making a change.

The issue is not limited to people using assistive technology. Anyone using a sufficiently narrow viewport encounters the same loss of information.

Remediation plan

Ensure that the selected permission value remains visible and readable at the reflow width

• At a 320 CSS-pixel-wide viewport, display the current value of each permission selector without clipping or horizontal scrolling
• Give each permission selector enough width to show its selected value
• Place each selector on its own line where necessary
• Preserve the association between each permission row, its group, and its selector
• Ensure that the calculated or inherited permission outcome remains understandable in relation to the selector
• Consider the report's suggested radio-button or checkbox alternative, with states grouped in fieldsets
• If changing the control type, preserve the meaning of default, inherited, allowed, and denied states
• Ensure that the selected state remains programmatically determinable
• Verify keyboard operation, focus order, and visible focus
• Avoid introducing horizontal scrolling as the solution
• Test with real permission values, not only the default configuration

Preconditions

• Use Joomla 6.2 with the Atum administrator template
• Sign in with an account permitted to open Global Configuration
• Use a test installation with permission settings that can be inspected without changing production permissions
• Record the exact Joomla build, browser name and version, operating system, viewport dimensions, and browser zoom
• Start with a viewport of 320 by 256 CSS pixels
• Record the active appearance and any template overrides or custom CSS
• Do not save permission changes during verification

Steps to reproduce

1. Open the Joomla administrator interface at the site's base URL followed by /administrator/
2. Open System → Global Configuration
   • Alternatively, navigate to /administrator/index.php?option=com_config on the same installation
3. Open the Permissions view
   • Record the exact tab, panel, or navigation label if it differs in the tested build
4. Set the browser window or responsive-emulation viewport to 320 by 256 CSS pixels
5. Confirm that the page is rendered at 100% browser zoom
6. Locate a permission row containing a dropdown selector
7. Record the permission group, action, and currently selected value before changing it
8. Observe whether the selected value is visible without opening the dropdown
9. Scroll vertically as needed
10. Check whether any horizontal scrolling is required to read the selected value
11. Inspect the selector's computed width and any clipping using Developer Tools
12. Record whether the selector is compressed to the right edge and whether its value is hidden
13. Repeat for additional permission rows and groups
14. Capture the affected selector, its label, the selected value, and the viewport dimensions
15. If the selected value is visible after opening the dropdown, record that separately
    • Opening the dropdown does not by itself satisfy the requirement that the current value be readable

Verification of the proposed layout

1. At the same 320 by 256 CSS-pixel viewport, check whether each selector is displayed on its own line
2. Confirm that the selected value is visible without horizontal scrolling
3. Confirm that the permission group and action remain associated with the correct selector
4. Use keyboard navigation to reach each selector
5. Check that focus order is logical and that focus is visible
6. Open a selector and verify that its options remain usable
7. If the implementation uses radio buttons or checkboxes, verify that the current default or inherited state is clear before selection
8. Confirm that the calculated permission outcome remains available and understandable
9. Do not save changes unless using a disposable test configuration

Version

6.2

Expected result

At a 320 by 256 CSS-pixel viewport, the selected value of each Global Configuration permission selector is visible and readable without horizontal scrolling.

Each permission selector has sufficient width to display its current value, including through stacking or another responsive layout change.

The calculated or inherited permission outcome remains understandable in relation to the selector.

Actual result

At a 320 CSS-pixel-wide viewport, the permission dropdown selectors are compressed toward the right edge and their selected values are hidden.

The report notes that the Permissions view otherwise reflows reasonably well at this width.

The current Joomla 6.2 build needs to be checked to establish whether the issue persists and which permission rows are affected.

What device were you using? (eg, phone, laptop)

Desktop web

What web browser were you using? (eg, Chrome, Safari)

Chrome, Firefox, Edge, Safari

Assistive Technology?

N/A

Additional Comments

The browser entries above are carried forward from the original issue and do not represent a new verification of every browser against Joomla 6.2.

Development and Design are the responsibility tags in the original report.

The original issue's steps say to select a non-default value. The report's own description concerns reading the currently selected value, so verification should include both inherited/default values and explicitly selected values.

The radio-button and checkbox suggestion is an optional redesign. Do not treat it as the only possible remediation; preserving the selector while giving it sufficient width may resolve the reflow failure.

The report's suggested permission-state labels describe the audited configuration. Verify the actual labels and available states in the tested build.

This issue is distinct from focus-indicator and colour-contrast findings. It concerns whether content remains readable and usable after reflow.

MS2a is proposed for the shared permissions-control layout, with MS3b covering the documented Global Configuration integration.