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
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
display: "grid",
|
display: "grid",
|
||||||
gridTemplateColumns: { xs: "1fr", lg: "1fr 340px" },
|
gridTemplateColumns: {
|
||||||
|
xs: "minmax(0, 1fr)",
|
||||||
|
lg: "minmax(0, 1fr) 340px",
|
||||||
|
},
|
||||||
gap: 3,
|
gap: 3,
|
||||||
alignItems: "start",
|
alignItems: "start",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* Left Column - Clock In/Out */}
|
{/* Left Column - Clock In/Out */}
|
||||||
<Box>
|
<Box sx={{ minWidth: 0 }}>
|
||||||
<Card>
|
<Card>
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
@@ -979,7 +982,9 @@ export default function Attendance() {
|
|||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
{/* Right Column - Stats & Quick Links */}
|
{/* 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 */}
|
{/* Leave Balance Card */}
|
||||||
<StatCard
|
<StatCard
|
||||||
icon={VacationIcon}
|
icon={VacationIcon}
|
||||||
@@ -1169,7 +1174,7 @@ export default function Attendance() {
|
|||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
display: "grid",
|
display: "grid",
|
||||||
gridTemplateColumns: "1fr 1fr",
|
gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
|
||||||
gap: 2,
|
gap: 2,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user