/* ========================================================================== HHC — CONSOLE WIDTH & DENSITY ========================================================================== Loaded after Filament's own stylesheet (it is registered as a panel asset, and Filament emits registered Css assets after the base theme). Nothing here changes a colour, a component or a behaviour: it changes WHERE THE CONTENT STOPS and how much air sits between rows. -------------------------------------------------------------------------- THE PROBLEM, AS REPORTED -------------------------------------------------------------------------- "Update the UI/UX and make sure that you maximize the whole page, so the size of the browser... allow for a full width for, let's say, large screens so that it's not compressing so much information in the table." The Attendance board has thirteen columns — expected in/out, actual in, actual out, worked, late/undertime/overtime/night-diff, day type, status, flags — and Filament caps every page at `--container-7xl` (80rem / 1280px). On a 1440px laptop that leaves a dead margin on both sides while the columns are squeezed; on a 1920px screen it wastes a third of the display. The screenshot that prompted this showed exactly that: a 7-column table using the middle half of a wide window. -------------------------------------------------------------------------- WHAT REPLACES IT — a width the reviewer chooses, remembered per browser -------------------------------------------------------------------------- One custom property, `--hhc-content-width`, read by `.fi-main`: · no choice saved the panel's own 7xl — the width every existing screenshot and test was taken against. This file can only ever WIDEN a page, and only once someone has asked it to · `--hhc-measure` the table measure: 140rem (2240px). What the width control applies on a first visit, and what its slider stops at by default. A form or a login page does not stretch to 2500px of one-line inputs — it simply never reaches it · `--hhc-filled` the user pressed "Fill": the whole viewport, still capped at `--hhc-cap` so an ultrawide monitor does not become a 3400px-wide single row of text THE CAP IS THE "COMPACT ON A SUPER WIDE SCREEN" PART OF THE REQUEST. Filling 3440px edge to edge is not a gift: the eye loses the start of a row before it reaches the end of it. So "Fill" means "use the screen", bounded at 2560px, and the slider lets anyone go further or pull back. WHY A CUSTOM PROPERTY AND NOT A CLASS PER PRESET: a slider produces a continuous number, and no Tailwind build has a class for "1783px". The property also makes the control trivial: one `style.setProperty` and every page in the panel — including ones that do not exist yet — obeys it. ========================================================================== */ :root { /* The panel's stock cap. Kept as a variable so the default is stated once. */ --hhc-content-width: var(--container-7xl); --hhc-measure: 140rem; --hhc-filled: 100%; --hhc-cap: 2560px; /* Row air. Filament's table cells are comfortable for six columns and loose for thirteen; trimming them is what makes a wide board readable rather than merely wide. Both are one step down from Filament's defaults — a trim, not a squeeze. */ --hhc-cell-block-padding: 0.5rem; --hhc-cell-inline-padding: 0.75rem; } /* -------------------------------------------------------------------------- The rule that changes page width. -------------------------------------------------------------------------- THE MODE IS CARRIED ON ``, NOT ON THE ELEMENT BEING SIZED, and that is the whole reason there is more than one selector here. The `
` element belongs to a Livewire page. It exists only after that page has rendered, it is replaced whenever the page navigates or a table filter is applied, and the width control lives in a *different* Livewire component (the topbar). Reaching across from one to the other to add a class would mean re-applying it after every single navigation — which is exactly the kind of state that gets lost and produces "it works until you click something". So the choice is stored on `` — set once, by the early script in and by the control — and the sizing is done by DESCENDANT selectors that CSS re-evaluates for free, on every page, forever. Both facts must hold at once: the mode-specific rules carry `!important` because they override the single-class `fi-width-*` utility Filament puts on the same element, and they are attributed on so they cannot be assembled by class order. The custom properties are set inline on by the control, which is the normal way to drive a value that no Tailwind build could have a class for. */ .fi-main.fi-main, .fi-main-ctn > .fi-main { max-width: min(var(--hhc-content-width), var(--hhc-cap)); } /* A measured width, chosen with the slider or a preset. */ html[data-hhc-width='custom'] .fi-main { max-width: min(var(--hhc-content-width), var(--hhc-cap)) !important; } /* "Fill" — the whole window, still capped so an ultrawide monitor does not become one 3400px line of text. `width: 100%` matters in its own right: a block box shrinks to its content once the max-width is lifted, so without it "Fill" would produce a page narrower than the default on a table with few columns. */ html[data-hhc-width='fill'] .fi-main { width: 100%; max-width: min(var(--hhc-filled), var(--hhc-cap)) !important; } /* The panel's own default, stated as an explicit mode so returning to it is a choice rather than the absence of one. */ html[data-hhc-width='panel'] .fi-main { max-width: var(--container-7xl); } /* -------------------------------------------------------------------------- Density — for the boards that need it, not for the whole console. -------------------------------------------------------------------------- Scoped to pages carrying a TABLE, because that is where the columns are. Forms, the dashboard and the login page keep Filament's own spacing; a form with tight rows is harder to fill in, and there is nothing to gain there. MEASURED, NOT GUESSED. At 2240px the board's rows are ~73px and at 1280px they are ~145px — the difference is text WRAPPING, not padding: `SAN MIGUEL CORPORATION — SMC Pasig Clinic` is three lines in a 1280px column and one line in a 2240px one. So the width is what fixes the density problem, and the padding trim below is the smaller, honest part of it: enough to fit more rows on a screen, not so much that a table of figures starts to read as a spreadsheet screenshot. */ .fi-main:has(.fi-ta) .fi-ta-table > tbody > tr > td, .fi-main:has(.fi-ta) .fi-ta-table > thead > tr > th { padding-block: var(--hhc-cell-block-padding); padding-inline: var(--hhc-cell-inline-padding); } /* The page heading block: Filament reserves a large top margin for a heading that, in this console, is one line ("Attendance board") and a one-line subheading. Reclaiming it puts the first table row above the fold on a laptop. */ .fi-main:has(.fi-ta) .fi-header { margin-block-start: 0.25rem; padding-block-end: 0.75rem; } /* The filter bar and the search row are the busiest chrome on the attendance board: filters button, search field, and (on wide screens) room to breathe. Trimming the gap between them stops the table being pushed down by its own toolbar. */ .fi-main:has(.fi-ta) .fi-ta-header-toolbar { row-gap: 0.5rem; } /* -------------------------------------------------------------------------- Print / narrow screens — never worse than before. -------------------------------------------------------------------------- Below 1024px the panel is already full-width and stacked; imposing a measured width there would SHRINK content rather than widen it, which is the opposite of the point. The control hides itself in the same range (see the script). */ @media (max-width: 1023px) { .fi-main.fi-main, .fi-main-ctn > .fi-main { max-width: 100%; } } /* -------------------------------------------------------------------------- x-cloak — and this one is not decoration. -------------------------------------------------------------------------- Filament's own stylesheet does NOT define `[x-cloak]`. Every component that uses it relies on Alpine removing the attribute once it boots, which means that between the HTML arriving and Alpine starting, an `x-cloak` element is VISIBLE. For a nav item that is a flicker; for this popover it is a 19rem card, with a slider and six buttons, appearing open in the corner of the screen on every page load and then vanishing. Verified rather than assumed: `grep '\[x-cloak\]' public/css/filament/filament/app.css` finds nothing. This rule is the reason the control can use `x-cloak` at all. */ [x-cloak] { display: none !important; } /* -------------------------------------------------------------------------- The content-width handle. A 16px invisible strip on the boundary of the content box, with a small grip in the middle. The strip is wide because a 1px line is almost impossible to grab on a laptop trackpad; the grip is small because a permanent bar down the middle of the console would be a worse artefact than the problem it solves. `position: fixed` and positioned from JS: Filament rebuilds the content column on every Livewire navigation, so a handle parented to it would be destroyed mid-drag. -------------------------------------------------------------------------- */ .hhc-width-handle { position: fixed; inset-block: 0; width: 16px; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; justify-content: center; cursor: col-resize; /* The pointer must own the gesture: without this, a drag on a touchscreen scrolls the page instead of resizing it. */ touch-action: none; /* A drag is a pointer gesture, so the browser must not try to select the table underneath it. */ user-select: none; } .hhc-width-handle__grip { display: block; width: 4px; height: 44px; border-radius: 9999px; background-color: var(--gray-300); opacity: 0.55; transition: opacity 120ms ease, height 120ms ease, background-color 120ms ease; } .hhc-width-handle:hover .hhc-width-handle__grip, .hhc-width-handle:focus-visible .hhc-width-handle__grip { opacity: 1; height: 64px; background-color: var(--primary-500); } .hhc-width-handle:focus-visible { outline: none; } .hhc-width-handle.is-dragging .hhc-width-handle__grip { opacity: 1; height: 64px; background-color: var(--primary-600); } .dark .hhc-width-handle__grip { background-color: var(--gray-600); } .dark .hhc-width-handle:hover .hhc-width-handle__grip, .dark .hhc-width-handle:focus-visible .hhc-width-handle__grip, .dark .hhc-width-handle.is-dragging .hhc-width-handle__grip { background-color: var(--primary-500); } /* While dragging, the whole document keeps the resize cursor and drops text selection — otherwise the pointer leaves the 16px strip and the cursor flickers back to a caret, and a fast drag paints a blue selection across the table. */ body.hhc-resizing { cursor: col-resize !important; user-select: none !important; } body.hhc-resizing * { cursor: col-resize !important; }