Skip to content

fix(#2198): prevent sidebar-only takeover at tablet widths (768px width) and zoom#2201

Merged
mrjones-plip merged 6 commits intomedic:mainfrom
gmarav05:fix/2198-nav-overlap-768
Apr 27, 2026
Merged

fix(#2198): prevent sidebar-only takeover at tablet widths (768px width) and zoom#2201
mrjones-plip merged 6 commits intomedic:mainfrom
gmarav05:fix/2198-nav-overlap-768

Conversation

@gmarav05
Copy link
Copy Markdown
Contributor

@gmarav05 gmarav05 commented Apr 24, 2026

Prevent sidebar-only view at 768px

closes #2198

Description

This PR fixes a responsive layout issue where the left sidebar could take over the page around 768px width (especially with browser zoom), making main content hard to access.

What I changed

  • Updated assets/css/custom.css.
  • Added a tablet/mobile CSS guard for .hextra-sidebar-container (max-width: 1023.98px).
  • Set fixed position and height so it behaves like a proper drawer.
  • Ensured main content (article) keeps width: 100% and min-width: 0.

Result

At 768px, the layout no longer gets stuck in a sidebar-only state.

License

The software is provided under AGPL-3.0. Contributions to this project are accepted under the same license.

Screenshot 2026-04-25 at 1 07 37 AM

Copy link
Copy Markdown
Contributor

@mrjones-plip mrjones-plip left a comment

Choose a reason for hiding this comment

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

thanks for the PR @gmarav05 !

While the PR was quick, please be more thorough in your testing:

  • the nav bar is hidden, you can't access it
  • there's a "system" theme selector in the upper left and it persists through out all responsive modes, introducing regressions. this shouldn't be shown until you click the hamburger menu
  • speaking of which, the hamburger menu, search and other top icons are not in the mobile responsive mode
  • I don't think we need any color change needed - can you explain why you added this?
  • the media detection width of 1023.98px seems suspicious - why did you choose this value?

while a relatively small PR, I suspect the final PR will be even smaller that fixes where two @media and non-@media CSS declarations don't quite overlap.

please try again

@gmarav05 gmarav05 requested a review from mrjones-plip April 25, 2026 06:57
@gmarav05
Copy link
Copy Markdown
Contributor Author

Thanks for the detailed review @mrjones-plip . You’re right, my CSS fix was too broad and caused regressions.

Now i have made some updates:

  • Removed sidebar override and theme/color changes .
  • Applied minimal breakpoint fix at md boundary.
  • Re-tested at 767/768/769 with zoom and menu scenarios.

@gmarav05
Copy link
Copy Markdown
Contributor Author

Screenshot 2026-04-25 at 12 31 16 PM

Copy link
Copy Markdown
Contributor

@mrjones-plip mrjones-plip left a comment

Choose a reason for hiding this comment

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

Thanks @gmarav05 !

Since the hide/show feature of navigation should never be visible at the 768p width, I've removed it from this PR since it's not needed

@mrjones-plip mrjones-plip merged commit 60c3f31 into medic:main Apr 27, 2026
1 check passed
@gmarav05
Copy link
Copy Markdown
Contributor Author

yeah sure @mrjones-plip, Thank you for making that change and for your feedback.

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.

navigation takes over entire screen in some scenarios

2 participants