Skip to content

Comments

Make right sidebar responsive on small screens#5397

Open
rishav-raj-genx wants to merge 3 commits intocBioPortal:masterfrom
rishav-raj-genx:fix-mobile-homepage-layout
Open

Make right sidebar responsive on small screens#5397
rishav-raj-genx wants to merge 3 commits intocBioPortal:masterfrom
rishav-raj-genx:fix-mobile-homepage-layout

Conversation

@rishav-raj-genx
Copy link

This PR improves the responsiveness of the right sidebar (including the “What’s New” section and related panels) on smaller screens.

Problem

On tablet and mobile-sized screens, the right sidebar stays fixed in a way that can break the layout and reduce readability.

Screenshots

**Before (small-screens):

Screenshot 2026-02-16 at 3 12 15 PM

**After (small-screens):

Screenshot 2026-02-16 at 3 12 22 PM Screenshot 2026-02-16 at 3 12 34 PM

Solution

  • Added a responsive breakpoint at 1000px
  • Stack the right sidebar below the main content
  • Set the sidebar width to 100% on smaller screens
  • Allow internal sidebar sections to wrap for better readability

Motivation

This improves the user experience on smaller devices without changing any existing functionality or behavior on desktop screens.

Testing:

  • Tested locally using yarn watch
  • Verified layout on desktop and small screen sizes using browser responsive mode

Notes

This is a small, UI-focused improvement aimed at improving mobile usability while keeping existing desktop behavior unchanged.

@rishav-raj-genx
Copy link
Author

Hi maintainers,
The ci/circleci: api_sync check is failing with a Swagger/TypeScript generator error.
I did not modify any API or generated files in this PR (only CSS for responsiveness).
Happy to update/regenerate if needed, or let me know if this is a known CI issue.
Thanks!

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.

1 participant