Skip to content

95 showcase web responsiveness - #98

Merged
romanaduraciova merged 5 commits into
mainfrom
95-showcase-web-responsiveness
Jul 20, 2026
Merged

95 showcase web responsiveness#98
romanaduraciova merged 5 commits into
mainfrom
95-showcase-web-responsiveness

Conversation

@romanaduraciova

Copy link
Copy Markdown
Collaborator

No description provided.

@romanaduraciova
romanaduraciova requested a review from Copilot July 20, 2026 15:05
@romanaduraciova romanaduraciova linked an issue Jul 20, 2026 that may be closed by this pull request

Copilot AI left a comment

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.

Pull request overview

This PR improves the site’s responsive behavior by introducing mobile-friendly navigation patterns (header + docs sidebar) and tightening layout spacing/padding to better fit small screens.

Changes:

  • Add a dedicated MobileNav sheet-based menu for small screens and hide the desktop header nav on mobile.
  • Make the docs sidebar usable on mobile via a sheet-based navigation drawer.
  • Adjust landing/content spacing and update theme surface tokens for the eLTER theme.

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 6 comments.

Show a summary per file
File Description
src/components/search/SearchTrigger.tsx Allows external layout control by accepting an optional className merged via cn.
src/components/MobileNav.tsx Adds a mobile header navigation sheet containing links, search, external resources, and theme selector.
src/components/landing/Overview.tsx Reduces vertical spacing on small screens while keeping larger spacing on md+.
src/components/landing/FoundationsOverview.tsx Makes the header row stack on small screens for better responsiveness.
src/components/landing/ComponentsOverview.tsx Makes the header row stack on small screens and hardens the grid against overflow with *:min-w-0.
src/components/docs/DocLayout.tsx Adds a mobile docs navigation drawer and hides the desktop sidebar below lg.
src/components/ComponentShowcase.tsx Removes the (very large) legacy showcase component file.
src/app/layout.tsx Switches header to desktop-only link cluster + mobile sheet menu, and hides the main nav on small screens.
lib/components/layout/content.tsx Updates content container padding to be mobile-first (px-4, scaling up on breakpoints).
lib_public/elter_setup.css Tweaks eLTER surface color tokens (--surface, --surface-raised).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/components/MobileNav.tsx Outdated
Comment thread src/components/MobileNav.tsx Outdated
Comment thread src/app/layout.tsx
Comment thread src/app/layout.tsx
Comment thread src/components/docs/DocLayout.tsx Outdated
Comment thread src/components/docs/DocLayout.tsx Outdated
@romanaduraciova
romanaduraciova merged commit bffd39c into main Jul 20, 2026
1 check passed
@romanaduraciova
romanaduraciova deleted the 95-showcase-web-responsiveness branch July 20, 2026 15:44
romanaduraciova added a commit that referenced this pull request Aug 6, 2026
romanaduraciova added a commit that referenced this pull request Aug 6, 2026
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.

showcase web responsiveness

2 participants