fix(attendance): stop the page + leave modal overflowing (grid minmax + minWidth:0)
Two overflow fixes on Attendance.tsx: (1) the leave-request modal's Od/Do date row used a bare gridTemplateColumns '1fr 1fr', whose minmax(auto,1fr) tracks couldn't shrink below the two DatePickers' min-content, overflowing the narrow modal (horizontal scroll, 'Do' clipped) — now minmax(0,1fr). (2) On phones the whole page overflowed: the main two-column grid used { xs: '1fr' }, and the left column's 5-col 'Dnešní dokončené směny' table forced a 477px min-content (the TableContainer's overflow-x:auto never engaged because the grid item had min-width:auto). Now the grid uses minmax(0,1fr) and both columns get minWidth:0, so the table scrolls inside its container and the page fits the viewport. Verified at 390px width via DOM measurement.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -630,13 +630,16 @@ export default function Attendance() {
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: { xs: "1fr", lg: "1fr 340px" },
|
||||
gridTemplateColumns: {
|
||||
xs: "minmax(0, 1fr)",
|
||||
lg: "minmax(0, 1fr) 340px",
|
||||
},
|
||||
gap: 3,
|
||||
alignItems: "start",
|
||||
}}
|
||||
>
|
||||
{/* Left Column - Clock In/Out */}
|
||||
<Box>
|
||||
<Box sx={{ minWidth: 0 }}>
|
||||
<Card>
|
||||
<Box
|
||||
sx={{
|
||||
@@ -979,7 +982,9 @@ export default function Attendance() {
|
||||
</Box>
|
||||
|
||||
{/* Right Column - Stats & Quick Links */}
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
|
||||
<Box
|
||||
sx={{ display: "flex", flexDirection: "column", gap: 3, minWidth: 0 }}
|
||||
>
|
||||
{/* Leave Balance Card */}
|
||||
<StatCard
|
||||
icon={VacationIcon}
|
||||
@@ -1169,7 +1174,7 @@ export default function Attendance() {
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "1fr 1fr",
|
||||
gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user