Skip to content

fix(docs): stack banner message and link on mobile #865

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jdx merged 1 commit into from
Apr 24, 2026
Merged

fix(docs): stack banner message and link on mobile #865

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions docs/.vitepress/theme/banner.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,14 @@
}
@media (max-width: 640px) {
.jdx-banner {
font-size: 0.85rem;
padding: 0.4rem 2.5rem;
flex-direction: column;
gap: 0.125rem;

@gemini-code-assist gemini-code-assist Bot Apr 24, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

medium

The gap: 0.125rem (2px) is very small for vertical stacking. It results in the link being closer to the message than the lines of the message are to each other (given the line-height). Increasing this to 0.25rem would provide better visual separation between the message and the call-to-action link.

Suggested change
gap: 0.125rem;
gap: 0.25rem;

font-size: 0.8rem;
padding: 0.5rem 2.25rem;
line-height: 1.3;

@gemini-code-assist gemini-code-assist Bot Apr 24, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

medium

Reducing the line-height to 1.3 while also decreasing the font-size can make the text harder to read on mobile devices. Maintaining the base 1.4 is generally better for accessibility and legibility on small screens.

Suggested change
line-height: 1.3;
line-height: 1.4;

text-wrap: balance;
}
.jdx-banner button {
right: 0.25rem;
}
Comment on lines +49 to 51

@greptile-apps greptile-apps Bot Apr 24, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P2 Close button remains vertically centered, not corner-pinned

The base styles set top: 50% and transform: translateY(-50%) on .jdx-banner button. With flex-direction: column the banner grows taller, so the button ends up mid-height on the right side rather than flush to the top corner as the PR description states. Only right is overridden here; to actually pin the button to the top-right corner you'd also need to override top and transform.

Fix in Claude Code

Comment on lines +49 to 51

@gemini-code-assist gemini-code-assist Bot Apr 24, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

medium

The PR description mentions moving the button "flush to the corner," but it currently remains vertically centered due to the inherited top: 50% and transform: translateY(-50%) from the base styles. On a stacked mobile banner, a centered button can look out of place. If a corner placement is intended, you should also reset the top and transform properties.

  .jdx-banner button {
    right: 0.25rem;
    top: 0.5rem;
    transform: none;
  }

}
Loading