Remove padding and borders from mobile panes #170
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
|
|
||
| {/* Diff Viewer */} | ||
| <div className="bg-card rounded-md border overflow-hidden h-[calc(100%-3rem)]"> | ||
| <div className="bg-card md:rounded-md md:border overflow-hidden h-[calc(100%-41px)]"> |
There was a problem hiding this comment.
| <div className="bg-card md:rounded-md md:border overflow-hidden h-[calc(100%-41px)]"> | |
| <div className="bg-card md:rounded-md md:border overflow-hidden h-[calc(100%-44px)]"> |
The height calculation for the diff viewer appears to be incorrect. The file path bar is approximately 44px tall (pt-3: 12px + button: 24px + pb-2: 8px), but the diff viewer uses h-[calc(100%-41px)], which would cause it to overflow its container by 3px.
View Details
Analysis
Incorrect height calculation in mobile diff viewer causes 3px overflow
What fails: The diff viewer in TaskDetails mobile layout uses h-[calc(100%-41px)] but the file path bar above it is 44px tall (pt-3: 12px + button h-6: 24px + pb-2: 8px), causing the diff viewer to overflow its container by 3px and clip content with overflow-hidden.
How to reproduce:
- Open task details on a mobile viewport (md:hidden)
- Navigate to the code tab
- Open any file to display the diff viewer
- Observe that the bottom 3px of the diff viewer content may be clipped
Result: The diff viewer height calculation is 3px too small, causing content to overflow and be hidden by the overflow-hidden CSS property. When parent container is 1000px:
- File path bar occupies: 44px
- Diff viewer should occupy: 1000 - 44 = 956px
- But it occupies: 1000 - 41 = 959px
- Overflow: 3px (clipped by overflow-hidden)
Expected: The diff viewer should use h-[calc(100%-44px)] to properly account for the exact height of the file path bar, ensuring all content is visible without clipping.
Reference: This is a layout sizing bug in the mobile code view section of components/task-details.tsx where the calc() expression wasn't adjusted correctly when the layout was refactored.
No description provided.