Skip to content

fix: constrain workshop-navigation-next to 100% width on mobile#1881

Merged
pelikhan merged 2 commits into
mainfrom
copilot/workshop-playwright-qa-fix-readability-issue
Jul 22, 2026
Merged

fix: constrain workshop-navigation-next to 100% width on mobile#1881
pelikhan merged 2 commits into
mainfrom
copilot/workshop-playwright-qa-fix-readability-issue

Conversation

Copilot AI commented Jul 22, 2026

Copy link
Copy Markdown
Contributor

On 375px viewports, div.workshop-navigation-next computed to ~430px wide (intrinsic button sizes), overflowing the markdown-body container (~360px) and producing a horizontal scrollbar.

Change

Added width: 100% to .workshop-navigation-next inside the existing @media (max-width: 543px) block in scripts/build-docs.js:

@media (max-width: 543px) {
  .workshop-navigation {
    flex-wrap: wrap;
    gap: 8px;
  }
  .workshop-navigation-next {
    align-items: stretch;
    width: 100%;   /* ← added */
  }
  /* … */
}

The base style sets flex: 0 0 auto on .workshop-navigation-next, preventing flex shrinking. width: 100% overrides that on mobile, clamping the element to the available container width. Combined with the existing flex-wrap: wrap on the parent and align-items: stretch on the element, buttons stack full-width cleanly on small screens.

…event horizontal overflow

Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix readability issue in mobile viewport for workshop navigation fix: constrain workshop-navigation-next to 100% width on mobile Jul 22, 2026
Copilot AI requested a review from pelikhan July 22, 2026 20:25
@pelikhan
pelikhan marked this pull request as ready for review July 22, 2026 20:39
@pelikhan
pelikhan merged commit 6dfd07c into main Jul 22, 2026
@pelikhan
pelikhan deleted the copilot/workshop-playwright-qa-fix-readability-issue branch July 22, 2026 20:39
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.

[workshop-playwright-qa] 07-your-first-workflow: 1 QA finding(s) — readability

2 participants