Skip to content

fix (#2743): version switcher stack on mobile#373

Merged
twjeffery merged 2 commits into
alphafrom
thomasjeffery/version-switcher-layout-fix
Jun 25, 2025
Merged

fix (#2743): version switcher stack on mobile#373
twjeffery merged 2 commits into
alphafrom
thomasjeffery/version-switcher-layout-fix

Conversation

@twjeffery
Copy link
Copy Markdown
Collaborator

Fix for this issue: GovAlta/ui-components#2743

@twjeffery twjeffery linked an issue May 21, 2025 that may be closed by this pull request
@netlify
Copy link
Copy Markdown

netlify Bot commented May 21, 2025

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

Name Link
🔨 Latest commit d03f18d
🔍 Latest deploy log https://app.netlify.com/projects/abgov-ui-component-docs/deploys/682f633afaca6b0008cee80a
😎 Deploy Preview https://deploy-preview-373--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: 38
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 marked this pull request as ready for review May 21, 2025 00:21
@twjeffery twjeffery requested a review from bdfranck May 21, 2025 00:21
Comment thread src/components/version-language-switcher/version-language-switcher.css Outdated
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.

The version switcher stacks on mobile breakpoint.

image

Looks good! 👍 You just need to remove the redundant media queries.

@bdfranck bdfranck requested a review from Copilot May 21, 2025 19:59
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 pull request addresses the mobile stacking issue for the version switcher component by adding responsive media queries to adjust the layout.

  • Introduces media queries for screen widths up to 623px.
  • Applies flex-direction and alignment adjustments for the [slot="version"] elements.
  • Currently contains duplicated media query blocks.

Comment thread src/components/version-language-switcher/version-language-switcher.css Outdated
Comment thread src/components/version-language-switcher/version-language-switcher.css Outdated
@twjeffery twjeffery requested a review from bdfranck May 22, 2025 17:50
@twjeffery
Copy link
Copy Markdown
Collaborator Author

@bdfranck this one has been fixed now

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 in the code again and I see a single media query.

I tested it again and see the items are side-by-side on desktop...
image

...and are stacked on mobile.
image

Looks good to me! 👍

@ArakTaiRoth
Copy link
Copy Markdown
Collaborator

@twjeffery This is ready to be merged

@twjeffery twjeffery merged commit 0f02dc1 into alpha Jun 25, 2025
7 checks passed
@twjeffery twjeffery deleted the thomasjeffery/version-switcher-layout-fix branch June 25, 2025 15:12
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.

Version switcher should stack on mobile

4 participants