/* ========================================================================== Portal - Search performance page (app/Filament/Portal/Pages/SearchPerformance.php) Layout/spacing only - no hardcoded colours. Every rule is scoped under .cxp-searchperf-page (the wrapper only this page renders) so nothing here can reach Dashboard, Rankings, Content or any other portal page. Loaded last in CyticxDesign::STYLES so it can out-specify cxp.css/ cxs-skin.css rules that were never designed for this page's 2-3 tab strip. ========================================================================== */ /* ---- Fix 1: tab strip stretches full width as a bordered "empty card" --- REMOVED for CYT-802, same reason as the twin in portal-content.css. This page had its own copy of the tab-hug fix (measured 1440px wide around two buttons spanning 222px before it). The canonical .cxp-map-tabs component in pages.css now hugs on every portal page, so the per-page copy is gone: measured live at 1440 with this block deleted, the strip is 209px around its two labels, and the mobile full-width grid below 640px is untouched. ---- */ /* ---- Fix 2: gap between the (now content-hugging) tab strip and the panel below it. .cxp-map-details' generic 1rem row-gap (cxp.css) was sized for a full-width tab bar; once the bar hugs its buttons the same 1rem reads as an oversized gap under a much smaller box. Tightened so the tabs read as attached to the panel they control. ---- */ body.fi-panel-portal .cxp-searchperf-page .cxp-map-details { row-gap: .5rem; } /* ---- Fix 3 (round-7, secondary defect): "What people searched for" table (.cxp-searchperf-terms-table) had a 16px inner-scroller overflow at 1440px (measured live: wrap clientWidth 1126, scrollWidth 1142 - column widths Search term 484 + Clicks 90 + Impressions 128 + Click rate 111 + Position 103 + Movement 116 + Best ever 110 = 1142). FIRST ATTEMPT (reverted): copying portal-content.css's prose-first recipe verbatim - width:1%+nowrap on every column after the first, plus .cxp-content-truncate's block/ellipsis rules re-scoped here. Measured live afterwards: WORSE (30px overflow, not 16). Cause: 5 of the 6 "metric" columns (Clicks/Impressions/Click rate/Position/Best ever) were already exactly single-line at their natural width with no rule at all - forcing width:1%+nowrap on them changed nothing (identical px before and after). But "Movement" carries a full SENTENCE ("No earlier check to compare"), not a badge/date/number like the content-page recipe assumes; forcing it to nowrap stopped it from wrapping across 2 lines at its natural width and grew it 116px -> 130px, adding 14px on top of the original 16px gap. The .cxp-content-truncate block/ellipsis rules had ZERO measured effect either way, before or after - the "Search term" column's 484px natural width already fit its longest values without truncating, so this table was never actually missing a truncation affordance; the real defect is purely a raw column-width-budget overrun. ACTUAL FIX: leave Movement to wrap naturally (excluded from the nth-child(n+2) selector below via :not()), keep the harmless width:1% idiom on the five genuinely-short columns for consistency/robustness against future data, and give the prose column ("Search term") a real (non-percentage) `max-width` - the one column with headroom to give some up via its own already-correct ellipsis truncation - instead of letting it claim its full natural content width. 460px leaves >=6px margin under the 1120px non-prose budget (541.56px five short metrics + Movement's natural 116.44px = 658px; 1126 - 658 - 460 = 8px), re-verified live at 1920/1440/390 below. */ body.fi-panel-portal .cxp-searchperf-page .cxp-searchperf-terms-table { table-layout: auto !important; } body.fi-panel-portal .cxp-searchperf-page .cxp-searchperf-terms-table th:first-child, body.fi-panel-portal .cxp-searchperf-page .cxp-searchperf-terms-table td:first-child { width: auto !important; min-width: 0 !important; max-width: 460px !important; } body.fi-panel-portal .cxp-searchperf-page .cxp-searchperf-terms-table th:nth-child(n+2):not(:nth-child(6)), body.fi-panel-portal .cxp-searchperf-page .cxp-searchperf-terms-table td:nth-child(n+2):not(:nth-child(6)) { width: 1% !important; white-space: nowrap !important; } /* Scoped to this page's own table only - NOT a blanket `.cxp-content-truncate` override, which would also reach the Dashboard and Content pages that share the same class name under their own, already-correct scopes. Now load-bearing (unlike the reverted attempt above) because the prose column has a real max-width to truncate against. */ body.fi-panel-portal .cxp-searchperf-page .cxp-searchperf-terms-table .cxp-content-truncate { display: block !important; max-width: none !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } body.fi-panel-portal .cxp-searchperf-page .cxp-searchperf-terms-table .cxp-content-truncate--sub { margin-top: .15rem; } /* Below 640px this table already switches to the stacked .cxp-mobile-card-table pattern (cxp.css) - reset the desktop column discipline above so the card layout gets natural wrapping instead of a sliver-width column, same reset portal-content.css already applies for its own identical shape. */ @media (max-width: 640px) { body.fi-panel-portal .cxp-searchperf-page .cxp-searchperf-terms-table th, body.fi-panel-portal .cxp-searchperf-page .cxp-searchperf-terms-table td { width: auto !important; max-width: none !important; white-space: normal !important; } body.fi-panel-portal .cxp-searchperf-page .cxp-searchperf-terms-table .cxp-content-truncate { white-space: normal !important; overflow: visible !important; } } /* ---- CYT-884: Search terms - search/sort toolbar and pager, sticky header on scroll. Same shape as the Reviews page pager (filament-bridge.css, .cxp-rv-pager), WebsiteHealth's Crawled-pages controls, and the twin block in portal-content.css for Published articles - reused rather than invented so the portal keeps one paginated-table language. ---- */ body.fi-panel-portal .cxp-searchperf-page .cxp-tbl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: 0 1rem .75rem; } body.fi-panel-portal .cxp-searchperf-page .cxp-tbl-search { max-width: 16rem; flex: 1 1 12rem; } body.fi-panel-portal .cxp-searchperf-page .cxp-tbl-sort { display: inline-flex; align-items: center; gap: .4rem; font-size: 12px; color: var(--muted-foreground); } body.fi-panel-portal .cxp-searchperf-page .cxp-tbl-pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .6rem 1rem; border-top: 1px solid var(--border); } body.fi-panel-portal .cxp-searchperf-page .cxp-tbl-pager__pages { display: inline-flex; align-items: center; gap: .3rem; } body.fi-panel-portal .cxp-searchperf-page .cxp-tbl-pager__btn { min-width: 2.1rem; justify-content: center; } body.fi-panel-portal .cxp-searchperf-page .cxp-tbl-pager__btn.is-active { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground, #fff); } /* CYT-884 QA fix: .4 read as "very low-contrast" against the card background - raised so a disabled prev/next arrow is still legible, not just barely-there. Same fix as portal-content.css's twin table pager. */ body.fi-panel-portal .cxp-searchperf-page .cxp-tbl-pager__btn.is-disabled { opacity: .65; color: var(--muted-foreground); pointer-events: none; } body.fi-panel-portal .cxp-searchperf-page .cxp-tbl-pager__ellipsis { padding: 0 .3rem; color: var(--muted-foreground); user-select: none; } @media (max-width: 640px) { body.fi-panel-portal .cxp-searchperf-page .cxp-tbl-toolbar { padding: 0 .75rem .6rem; } body.fi-panel-portal .cxp-searchperf-page .cxp-tbl-search { max-width: none; flex-basis: 100%; } body.fi-panel-portal .cxp-searchperf-page .cxp-tbl-pager { justify-content: center; } body.fi-panel-portal .cxp-searchperf-page .cxp-tbl-pager__pages { width: 100%; justify-content: center; flex-wrap: wrap; } } /* Sticky header on scroll - same idiom as the twin rule in portal-content.css. Reset below 640px: the house .cxp-mobile-card-table pattern hides there and switches to stacked cards (this page's own compact-list block handles that breakpoint already), so a vertical scroller has nothing left to stick. */ body.fi-panel-portal .cxp-searchperf-page .kt-table-wrap--scroll-y { max-height: 640px; overflow-y: auto; } body.fi-panel-portal .cxp-searchperf-page .kt-table-wrap--scroll-y thead th { position: sticky; top: 0; z-index: 1; background: var(--card); } @media (max-width: 640px) { body.fi-panel-portal .cxp-searchperf-page .kt-table-wrap--scroll-y { max-height: none; overflow-y: visible; } }