mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
Pamela Chia
6d4263bf1a
Multi-line cells in the /pricing comparison table rendered as one cramped block once lines wrapped: the stacked values had no gap between entries, and the continuation lines' `leading-4` is a no-op at `text-xs`. At the same narrow desktop widths (1024 to 1280px), category headers clipped behind the sticky plan header because their hardcoded `top-[108px] xl:top-[84px]` offsets desync from the plan header's variable height. **Changed:** - **Value cells get vertical padding**: the value tds were `pl-6 pr-2` with no vertical padding, so tall multi-line cells pressed text against the row dividers; they now carry `py-5` like the row-label column (text ink sits ~21px off both borders, measured). - **Stacked price lines read as separate entries**: `gap-2` between entries while wrapped lines inside one entry stay tight (`leading-4`), so each price reads as its own block. Two earlier iterations that only widened the entry gap (`gap-1`, then `gap-2` with looser `leading-5` wraps) reviewed as still-cramped; the missing cell padding was the dominant cause. Mobile untouched. - **Category headers never clip behind the plan header**: a ResizeObserver measures the sticky thead's real height and publishes `--pricing-category-top` as a CSS variable on the table; the category header consumes it via `var()`, keeping the old 108px/84px values as pre-hydration fallbacks so SSR paint is unchanged. Runs in a layout effect so the first client paint already has the measured value. **Note:** I rejected re-tuning the hardcoded offsets: numbers desyncing from the header's content-driven height is the root cause, and new constants re-break on the next copy or breakpoint change. ## Before / after **Before** (prod: multi-line prices pressed against the row dividers as one dense block; rows clipped under the sticky category header): <img width="1442" height="450" alt="pr-before" src="https://github.com/user-attachments/assets/91d428df-e04c-4494-b454-84a8a46b3ddd" /> **After** (this PR: padded cells, each price its own block, headers pin flush): <img width="1497" height="375" alt="pr-after" src="https://github.com/user-attachments/assets/5aa2c3c7-b41e-42c0-8159-bb294a5d1dea" /> ## To test Tested on the Vercel preview (Playwright, measured values in parens): - [x] At a 1024 to 1280px viewport, open /pricing and find the Pipelines row: the 3 price lines in the Pro and Team cells read as distinct blocks (row-gap 8px between entries, tight 16px line boxes within an entry, 20px cell padding; verified on localhost pre-push and on the preview, light and dark) - [x] Multi-line cell text no longer touches the row dividers: ~21px from border to text ink top and bottom (was 0-3px) - [x] At the same width, scroll the whole comparison table: Database and Auth section headers pin flush below the plan-price header, with no row text clipped between them (pinned category top within 0.2px of thead bottom) - [x] At ~1800px wide: Pipelines and Point in time recovery (Enterprise) cells show the same separated lines (PITR Enterprise is a single wrapping string, renders cleanly) - [x] Resize across 1280px after load: category headers stay flush under the plan header (ResizeObserver refires; same 0.2px alignment after 1900px to 1150px resize without reload) - [x] Below 1024px: the mobile comparison view is unchanged - [x] Added: cold navigation to /pricing#compare-plans lands with `--pricing-category-top` already applied (151px at 1150px width) and the pinned header flush - [x] Added: no new console errors versus the page's pre-existing baseline ## Linear - fixes GROWTH-1137