Skip to content

fix: mobile accessibility dropdown height (#1480)#1502

Open
slash-init wants to merge 2 commits into
processing:mainfrom
slash-init:fix/mobile-settings-grid-rows
Open

fix: mobile accessibility dropdown height (#1480)#1502
slash-init wants to merge 2 commits into
processing:mainfrom
slash-init:fix/mobile-settings-grid-rows

Conversation

@slash-init

Copy link
Copy Markdown
Contributor

Summary

On mobile, the Accessibility dropdown was being placed into an implicit grid row, which defaulted to auto height. This caused the dropdown to appear compressed compared to the Language dropdown and Search bar.
This change adds grid-auto-rows: var(--settings-container-height-touch) so implicit grid rows use the same height as the explicitly defined rows, keeping all controls consistently sized on mobile.

Before :
image

After:
image

Fixes #1480

@Nwakaego-Ego

Copy link
Copy Markdown
Collaborator

Hi @slash-init, thank you for this PR. I tested it locally, and here is what I found.

The height fix is correct and confirmed working. Adding grid-auto-rows: var(--settings-container-height-touch) ensures the Accessibility dropdown falls into an explicitly sized implicit grid row instead of defaulting to auto height. All three controls, Language, Accessibility, and Search, are now consistently sized on mobile.

Issue still remaining

The font size mismatch mentioned in issue #1480 is still not addressed. After inspecting:

  • Search bar font-size: 16px inherited from parent (no explicit font size set)
  • Language dropdown font-size: 0.75rem (12px) hardcoded
  • Accessibility dropdown font-size: 0.75rem (12px) hardcoded

The dropdown text is hardcoded and set to 0.75rem (12px), which overrides inheritance and makes it smaller than the Search bar. The fix would be to either remove the hardcoded font-size: .75rem so the dropdowns inherit from the parent like Search does, or set it explicitly to match. @doradocodes, your thoughts on this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[2.0] On mobile, the Language and Accessibility dropdowns have misaligned font

2 participants