/* This css code fixes css framework conflicts between MUI and Joomla (Bootstrap/Cassiopeia). */ /* MUI DataGrid cells get a top margin from Bootstrap's `p { margin-bottom: 1rem }` — reset it */ #nextrestaurant-root .MuiDataGrid-mainContent p { margin: 0; } /* In admin, the component renders its own toolbar — hide Joomla's subhead */ body.com_nextrestaurant #subhead-container { display: none; } /* Cassiopeia ships `[role="tooltip"]:not(.show) { display: none; ... }` (Bootstrap convention). MUI never adds Bootstrap's `.show` class to its poppers, so that rule would hide every MUI tooltip and overwrite its styling. We restore MUI's behaviour for popper portals only — the inner `.MuiTooltip-tooltip` keeps the dark pill from MUI's own emotion styles. */ .MuiPopper-root[role="tooltip"] { display: block !important; z-index: 1500 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; color: inherit !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; right: auto !important; max-width: none !important; text-align: inherit !important; } /* --------------------------------------------------------------------------- Kiosk surfaces: staff terminals (?view=pos|kds|waiter|host|clockin|pickup) and the guest QR page. All render with `tmpl=component`, which puts `class="contentpane component"` on ; Cassiopeia pads that class by 15px. The terminal shell then asks for a full 100vh INSIDE that padding, so the document is always exactly padding-top + padding-bottom taller than the space available to it — a 30px overflow, a document scrollbar, and a 15px white gutter framing the whole app. Send / Pay were clipped until the user scrolled, and scrolling then pushed the header (and Sign out) off-screen. Anchored on the mount nodes rather than on `body.contentpane`, so ordinary component-view pages are untouched. :has() is supported by every browser these kiosks run on; the shells also use 100dvh, which fixes the same overshoot on iPad Safari where the browser chrome makes 100vh too tall. --------------------------------------------------------------------------- */ body:has([data-nr-terminal]), body:has([data-nr-island="qr"]) { margin: 0; padding: 0; overflow: hidden; } body:has([data-nr-terminal]) > [data-nr-terminal], body:has([data-nr-island="qr"]) > [data-nr-island="qr"] { height: 100dvh; }