(used across ~40+ pages —
Accounting, Inventory, GST, Analytics, Niche, Reports, etc.) renders an
unclassed with no breakpoints of its own — confirmed by inspecting
the actual DOM output (no grid-cols-N class is ever present, so a
class-based override cannot match it). The only hook available is the
inline style itself; !important is required to beat it since inline
styles otherwise always win over stylesheet rules. */
@media (max-width: 640px) {
div[style*="grid-template-columns:repeat("] {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 420px) {
div[style*="grid-template-columns:repeat("] {
grid-template-columns: 1fr !important;
}
}
/* Ultrawide monitors (1920px+ desktops) — page content otherwise stretches
edge-to-edge with no cap, leaving dashboard grids very sparse. Only kicks
in well above laptop width so normal desktops are unaffected. */
@media (min-width: 1800px) {
/* Full-screen overlays are excluded. A modal backdrop is a direct child of the content
area but is `position: fixed; inset: 0`, so capping it at 1800px and auto-centring it
shrinks the *backdrop* — the dim stops 60px short on each side at 1920px wide and the
page shows through undimmed beside the modal. The cap is meant for in-flow page content
only. `[class*="overlay"]` covers .pos-overlay / .rm-overlay / .del-overlay /
.bill-del-overlay, `[class*="backdrop"]` covers .bsheet-backdrop; add .mk-full-bleed to
anything new that must span the viewport. */
main > article.content > *:not([class*="overlay"]):not([class*="backdrop"]):not(.mk-full-bleed) {
max-width: 1800px;
margin-left: auto;
margin-right: auto;
}
}