Skip to content

Bug fix: mobile language switcher controls breaking on mobile#408

Merged
twjeffery merged 1 commit into
alphafrom
thomasjeffery/mobile-language-switcher-fix
Jul 23, 2025
Merged

Bug fix: mobile language switcher controls breaking on mobile#408
twjeffery merged 1 commit into
alphafrom
thomasjeffery/mobile-language-switcher-fix

Conversation

@twjeffery
Copy link
Copy Markdown
Collaborator

Bug: language switcher controls on mobile menu in microsite header breaks on mobile, overlaps with app header menu

image

Fix: language switcher controls on mobile menu in microsite header stacks correctly on mobile

image

@netlify
Copy link
Copy Markdown

netlify Bot commented Jul 22, 2025

Deploy Preview for abgov-ui-component-docs ready!

Name Link
🔨 Latest commit 17e50a8
🔍 Latest deploy log https://app.netlify.com/projects/abgov-ui-component-docs/deploys/6880270f7cd8b70008beadfa
😎 Deploy Preview https://deploy-preview-408--abgov-ui-component-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 0
Accessibility: 93
Best Practices: 100
SEO: 83
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@twjeffery twjeffery requested a review from bdfranck July 22, 2025 19:34
@bdfranck bdfranck requested a review from Copilot July 22, 2025 20:06
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR fixes a mobile layout issue where language switcher controls in the microsite header were overlapping with app header menu elements on mobile devices. The fix ensures proper vertical stacking of language switcher elements on mobile.

  • Removed tooltips from version and language switchers to simplify mobile layout
  • Updated CSS to stack language switcher elements vertically on mobile instead of horizontally
  • Adjusted spacing and margins for better mobile presentation

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File Description
version-language-switcher.css Added mobile-responsive CSS rules for proper vertical stacking and spacing adjustments
VersionLanguageSwitcher.tsx Removed tooltip wrappers and added container div for better layout control
HelpButton.tsx Updated tooltip text and adjusted margins for mobile layout

@twjeffery twjeffery force-pushed the thomasjeffery/mobile-language-switcher-fix branch from 20da911 to 17e50a8 Compare July 23, 2025 00:04
Copy link
Copy Markdown
Collaborator

@bdfranck bdfranck left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I looked at the deploy preview...

dropdown-tests

  • ✅ I can use the React/Angular menu on mobile
  • ✅ I can use the Version menu on mobile

Looks good to me! 👍

@twjeffery twjeffery merged commit 2772d59 into alpha Jul 23, 2025
7 checks passed
@twjeffery twjeffery deleted the thomasjeffery/mobile-language-switcher-fix branch July 23, 2025 15:43
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.

3 participants