Improve treatment dialog and app responsiveness for narrow screens#99
Improve treatment dialog and app responsiveness for narrow screens#99michaelwschultz wants to merge 2 commits intoms/move-to-tailwindfrom
Conversation
- Treatment dialog: responsive 2-col grid on mobile for type buttons, min 44px touch targets, rounded inputs, safe-area padding - Sheet: primary-colored save button, improved header with safe-area, narrower centered modal (480px) on desktop - Header: primary-colored New treatment button - Home: responsive padding (px-4 sm:px-6), section spacing - Tabs: horizontal scroll on overflow, reduced gap on mobile - Footer: responsive padding - Treatment table: responsive cell padding, pagination layout Co-authored-by: Michael Schultz <michaelwschultz@gmail.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| height: calc(100% - 2rem * 2); | ||
| width: min(calc(100vw - 2rem), 480px); | ||
| max-width: 480px; | ||
| height: auto; |
There was a problem hiding this comment.
Desktop modal collapses to zero height
High Severity
On desktop (≥800px), .SheetWithKeyboard-content now sets height: auto. This class is applied to the same DOM element as .SheetProvider-content, which has container-type: size. Per CSS spec, container-type: size establishes block-axis size containment, meaning the element is sized as if it has no content. Combined with height: auto, this causes the element to collapse to zero height, making the modal invisible on desktop. The previous definite height (calc(100% - 2rem * 2)) worked correctly with container-type: size.
Additional Locations (1)
- Replace JSX.Element with React.ReactElement across all components to fix 'Cannot find namespace JSX' TypeScript error in React 19/Next.js 16 - Update engines.node from 22.21.x to 24.x per request - Add .nvmrc with Node 24 for Vercel and local dev consistency Co-authored-by: Michael Schultz <michaelwschultz@gmail.com>
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 2 potential issues.
There are 3 total unresolved issues (including 1 from previous review).
Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
| > | ||
| Preventative | ||
| </button> | ||
| </div> |
There was a problem hiding this comment.
Border width change causes layout jitter on selection
Medium Severity
The treatment type buttons use border (1px) in their inactive state and border-2 (2px) in their active state. When a user selects a button, the border grows by 1px on each side, causing visible layout jitter as the content area shifts. This affects all four type buttons (Prophy, Bleed, Preventative, Antibody). Using a consistent border width (e.g., always border-2 with a transparent color for inactive) would prevent the shift.
Additional Locations (1)
| > | ||
| Preventative | ||
| </button> | ||
| <div className='p-4 sm:p-6 pb-[max(1rem,env(safe-area-inset-bottom))]'> |
There was a problem hiding this comment.
Bottom padding doesn't scale with responsive side padding
Low Severity
The class p-4 sm:p-6 pb-[max(1rem,env(safe-area-inset-bottom))] has a conflict: on sm+ viewports the side padding scales to 1.5rem via sm:p-6, but pb-[max(1rem,...)] caps the bottom at only 1rem (when safe-area is 0). In Tailwind v4 longhand overrides shorthand regardless of responsive variant, resulting in asymmetric padding on larger screens.
2 participants
Summary
Improves the look and feel of the app, especially the treatment dialog, with full support for narrow screens (phones). Also fixes the build for Vercel deployment.
Build Fixes (Vercel deployment)
JSX.ElementwithReact.ReactElement/ReactElementacross all components to fix "Cannot find namespace 'JSX'" TypeScript error in React 19 / Next.js 16engines.nodefrom22.21.xto24.xas requestedTreatment Dialog
Sheet / Dialog
Home & Layout