Let hero session monitor shrink via intrinsic widths#36
Let hero session monitor shrink via intrinsic widths#36TechWithTy wants to merge 2 commits intoai-devfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…-tests-j23svw Signed-off-by: TechWIthTy <37724661+TechWithTy@users.noreply.github.com>
![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.
ℹ️ 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
| {/* Session Monitor Carousel */} | ||
| <div | ||
| data-testid="session-monitor-carousel" | ||
| className="relative mx-auto flex w-full max-w-[calc(100vw-2rem)] items-stretch justify-center sm:max-w-[calc(100vw-3rem)] md:max-w-4xl" | ||
| className="relative mx-auto flex max-w-[calc(100vw-2rem)] items-center justify-center sm:max-w-[calc(100vw-3rem)] md:w-full md:max-w-4xl" | ||
| > | ||
| <div className="relative flex w-full max-w-[calc(100vw-2rem)] items-stretch justify-center sm:max-w-[calc(100vw-3rem)] md:max-w-4xl"> | ||
| <div className="flex min-h-[420px] w-full max-w-[calc(100vw-2rem)] items-center justify-center rounded-3xl border border-white/10 bg-black/20 p-4 shadow-[0_20px_80px_rgba(15,23,42,0.25)] backdrop-blur sm:max-w-md md:max-w-4xl lg:min-h-[480px] dark:border-white/5"> | ||
| <div className="relative flex max-w-[calc(100vw-2rem)] items-center justify-center sm:max-w-[calc(100vw-3rem)] md:w-full md:max-w-4xl"> | ||
| <div className="flex min-h-[420px] max-w-[calc(100vw-2rem)] items-center justify-center rounded-3xl border border-white/10 bg-black/20 p-4 shadow-[0_20px_80px_rgba(15,23,42,0.25)] backdrop-blur sm:max-w-md md:w-full md:max-w-4xl lg:min-h-[480px] dark:border-white/5"> |
There was a problem hiding this comment.
The new shrink‑wrap behavior relies on Tailwind classes like max-w-[calc(100vw-2rem)], but calc() requires whitespace around +/- operators. As written, the compiled CSS becomes max-width: calc(100vw-2rem), which is invalid and is dropped by the browser, so the outer carousel wrappers keep their default auto width instead of clamping to the viewport. This means the session monitor will not actually shrink on narrow viewports despite the added tests. Add spaces inside the calc() expressions (e.g. calc(100vw - 2rem)) so the max-width clamps apply.
Useful? React with 👍 / 👎.
1 participant
Summary
Testing
https://chatgpt.com/codex/tasks/task_e_68ecd52b967c8329b86cab80947a1f1c