@@ -1160,6 +1160,101 @@ body, .container-fluid {
break - inside : avoid ;
}
}
/* =====================================================
GLOBAL EDGE - TO - EDGE + ZOOM SAFE PATCH ( CSS ONLY )
===================================================== */
/* 1️ ⃣ Kill boxed layouts on desktop & zoom */
html , body {
width : 100 % ;
max - width : 100 % ;
overflow - x : clip ;
}
/* 2️ ⃣ Force container-fluid to truly span full width */
. container - fluid {
width : 100 % ! important ;
max - width : 100 % ! important ;
margin : 0 ! important ;
padding - left : clamp ( 12 px , 1.8 vw , 28 px ) ! important ;
padding - right : clamp ( 12 px , 1.8 vw , 28 px ) ! important ;
}
/* 3️ ⃣ Zoom-safe scaling (VERY IMPORTANT) */
body {
font - size : clamp ( 14 px , 0.95 vw , 16 px );
}
/* =====================================================
DASHBOARD CARD & GRID FIXES ( NO HTML CHANGE )
===================================================== */
/* 4️ ⃣ Make stat grids auto-adjust on zoom */
. stats - row ,
. shipment - totals - row {
display : grid ! important ;
grid - template - columns : repeat ( auto - fit , minmax ( 220 px , 1 fr )) ! important ;
gap : clamp ( 12 px , 1.5 vw , 20 px ) ! important ;
}
/* 5️ ⃣ Prevent hover zoom breaking layout */
. stats - card : hover ,
. card : hover ,
. table tbody tr : hover {
transform : translateY ( - 4 px ) ! important ;
}
/* =====================================================
TABLE ZOOM FIX ( NO MORE CRUSHING / OVERFLOW )
===================================================== */
/* 6️ ⃣ Tables behave like shipment page */
. table - responsive {
width : 100 % ;
overflow - x : auto ;
}
/* 7️ ⃣ Remove hard min-widths that break zoom */
. table ,
. custom - table - modal ,
. shipment - details - table {
width : 100 % ! important ;
min - width : max - content ! important ;
}
/* 8️ ⃣ Let text wrap naturally when zoomed */
. table td ,
. table th {
white - space : nowrap ;
}
/* =====================================================
MODALS – EDGE TO EDGE WITHOUT TOUCHING MARKUP
===================================================== */
. modal - xl {
max - width : 96 vw ! important ;
width : 96 vw ! important ;
margin : 1 vh auto ! important ;
}
@ media ( max - width : 768 px ) {
. modal - xl {
max - width : 100 vw ! important ;
width : 100 vw ! important ;
margin : 0 ! important ;
height : 100 vh ! important ;
}
}
/* =====================================================
FINAL SAFETY – PREVENT LAYOUT SHRINK ON ZOOM
===================================================== */
* {
box - sizing : border - box ;
}
</ style >
< div class = " container-fluid py-3 " >