/* * TWWIM AI — admin page layout. * (c) 2026 TWWIM UG. All rights reserved. (www.twwim.com) * * Loaded only on the TWWIM AI admin page (toplevel_page_twwim-ai). * Makes the embedded React SPA fill the available viewport and hides the * default WP footer, since the SPA renders its own chrome. */ #wpbody-content { padding-bottom: 0 !important; } #wpfooter { display: none !important; } /* * Lock body overflow on the plugin admin page. #root is sized to the * viewport, but WP-rendered siblings (notices before our re-parent JS * runs, admin sidebar in some layouts, etc.) can push body height past * the viewport — that's what creates the second (browser-window) scroll * bar behind our internally-scrolling
. Clipping at makes * #main the only scroll surface. */ html:has(body.toplevel_page_twwim-ai), body.toplevel_page_twwim-ai { overflow: hidden !important; height: 100vh; } #root { margin: -1px 0 0 -20px; height: calc(100vh - 32px); overflow: hidden; } /* * SPA uses `min-h-screen` (100vh) at multiple nesting levels (__root, * _authenticated, DashboardLayout). Each forces the tree to be 100vh tall, * overflowing #root (calc(100vh-32px)) by ~32px and pushing the sidebar * user profile under the WP chrome. Neutralise min-height and propagate a * real 100% height chain instead. * * MUST be declared inside @layer utilities — Tailwind v4 emits * `.min-h-screen { min-height: 100vh !important }` inside its own * @layer utilities block. Per CSS Cascade Layers spec, unlayered * !important rules have LOWER priority than layered !important rules, * so overrides outside a layer would be silently ignored. Inside the * same layer, specificity (#root .min-h-screen = 1,1,0 vs .min-h-screen * = 0,1,0) resolves the conflict in our favour. */ @layer utilities { #root > div { height: 100% !important; } #root .min-h-screen { min-height: 0 !important; height: 100% !important; } } /* * Float WP admin notices as toasts over the SPA instead of pushing it down. * #root is sized against the viewport — any block above it in normal flow * (notices, screen-options) would shift the SPA out of view. * * Multiple simultaneous notices stack via margin — they won't overlap * because #twwim-notice-stack is a flow container. */ #twwim-notice-stack { position: fixed; top: 42px; right: 20px; width: 380px; max-width: calc(100vw - 40px); z-index: 99999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } #twwim-notice-stack .notice, #twwim-notice-stack div.updated, #twwim-notice-stack div.error, #twwim-notice-stack div.update-nag { margin: 0 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); pointer-events: auto; } #screen-meta, #screen-meta-links { display: none !important; }