Make AppShell responsive on narrow screens#251
Conversation
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 59a4b8e87e
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| {brand} | ||
| </div> | ||
| <div className="flex shrink-0 items-center gap-2">{toolbar}</div> | ||
| <div className="flex w-full min-w-0 flex-wrap items-center gap-2 overflow-x-auto md:w-auto md:shrink-0 md:flex-nowrap"> |
There was a problem hiding this comment.
When the toolbar contains the current DateRangeControl, its menu is an absolutely positioned child of this container, and the newly added overflow-x-auto makes the toolbar a clipping/scroll container. Opening the range picker will therefore constrain the dropdown to the toolbar's height instead of letting it overlay the page, which makes the presets/custom-date controls inaccessible in both desktop and narrow layouts.
Useful? React with 👍 / 👎.
1 participant
Updates the Sidemantic AppShell layout so narrow Sidequery explorer surfaces wrap the toolbar and stack the catalog rail above the main content instead of forcing horizontal overflow.
This keeps desktop layout unchanged while making the imported explorer usable on mobile-sized viewports.