Repository navigation
fix - #312
fix#312
Conversation
✅ Deploy Preview for servicestart ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Disclaimer: This comment was AI-generated and is not necessarily completely accurate. Please take code comments with a grain of salt.
 |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
|
|
||
| return ( | ||
| <nav className="flex h-full max-w-full items-stretch gap-2 overflow-x-auto text-nav font-normal text-grey-text-strong mobile:gap-8"> | ||
| <nav className="flex h-full max-w-full items-stretch gap-2 text-nav font-normal text-grey-text-strong mobile:gap-8"> |
There was a problem hiding this comment.
Removing overflow-x-auto leaves wide tab sets without scrolling. At tablet widths, an admin can have six tabs alongside the logo and profile controls. The tabs cannot shrink enough, so they overlap neighboring controls or extend past the page. Keep a scrollable tab strip, and render dropdowns outside that strip so they remain visible.
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
| return ( | ||
| <header | ||
| className={`relative flex h-16 items-center overflow-x-hidden px-3 shadow-sm mobile:h-20 mobile:px-6 desktop:px-10 ${navBgClass}`} | ||
| className={`relative z-50 flex h-16 items-center px-3 shadow-sm mobile:h-20 mobile:px-6 desktop:px-10 ${navBgClass}`} |
There was a problem hiding this comment.
Adding z-50 places the header above the notifications drawer’s z-40 backdrop. When someone opens notifications with horizontal navigation enabled, the exposed header stays undimmed while the rest of the page darkens. Keep the header below dialog backdrops while still placing its dropdowns above page content.
This branch was successfully deployed
1 participant
Closes #
Checklist: