mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +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
541 lines
18 KiB
TypeScript
541 lines
18 KiB
TypeScript
'use client'
|
|
|
|
import { PricingTableRowDesktop, PricingTableRowMobile } from '~/components/Pricing/PricingTableRow'
|
|
import Solutions from '~/data/MainProducts'
|
|
import { Organization } from '~/data/organizations'
|
|
import { useSendTelemetryEvent } from '~/lib/telemetry'
|
|
import { useIsomorphicLayoutEffect } from 'common'
|
|
import Link from 'next/link'
|
|
import { useRef, useState } from 'react'
|
|
import { plans } from 'shared-data/plans'
|
|
import { pricing } from 'shared-data/pricing'
|
|
import {
|
|
Button,
|
|
cn,
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from 'ui'
|
|
|
|
import UpgradePlan from './UpgradePlan'
|
|
|
|
const MobileHeader = ({
|
|
description,
|
|
priceDescription,
|
|
price,
|
|
plan,
|
|
showDollarSign = true,
|
|
from = false,
|
|
organizations,
|
|
hasExistingOrganizations,
|
|
}: {
|
|
description: string
|
|
priceDescription: string
|
|
price: string
|
|
plan: string
|
|
showDollarSign?: boolean
|
|
from?: boolean
|
|
organizations?: Organization[]
|
|
hasExistingOrganizations?: boolean
|
|
}) => {
|
|
const sendTelemetryEvent = useSendTelemetryEvent()
|
|
const orgSlug = organizations?.[0]?.slug
|
|
|
|
const selectedPlan = plans.find((p) => p.name === plan)!
|
|
const isUpgradablePlan = selectedPlan.name === 'Pro' || selectedPlan.name === 'Team'
|
|
|
|
return (
|
|
<div className="mt-8 px-4 mobile-header">
|
|
<h2 className="text-foreground text-3xl font-medium uppercase font-mono">{plan}</h2>
|
|
<div className="flex items-baseline gap-2">
|
|
{from && <span className="text-foreground text-base">From</span>}
|
|
{showDollarSign ? (
|
|
<span className="h1 font-mono">
|
|
{plan !== 'Enterprise' ? '$' : ''}
|
|
{price}
|
|
</span>
|
|
) : (
|
|
<span className="text-foreground-light">{price}</span>
|
|
)}
|
|
|
|
<p className="p">{priceDescription}</p>
|
|
</div>
|
|
<p className="p">{description}</p>
|
|
{isUpgradablePlan && hasExistingOrganizations ? (
|
|
<UpgradePlan
|
|
organizations={organizations}
|
|
onClick={() =>
|
|
sendTelemetryEvent({
|
|
action: 'www_pricing_plan_cta_clicked',
|
|
properties: {
|
|
plan,
|
|
showUpgradeText: true,
|
|
section: 'comparison_table',
|
|
tableMode: 'mobile',
|
|
},
|
|
...(orgSlug && { groups: { organization: orgSlug } }),
|
|
})
|
|
}
|
|
size="medium"
|
|
planId={selectedPlan.planId}
|
|
/>
|
|
) : (
|
|
<Button asChild size="medium" variant={plan === 'Enterprise' ? 'default' : 'primary'} block>
|
|
<Link
|
|
href={selectedPlan.href}
|
|
onClick={() =>
|
|
sendTelemetryEvent({
|
|
action: 'www_pricing_plan_cta_clicked',
|
|
properties: {
|
|
plan,
|
|
showUpgradeText: false,
|
|
section: 'comparison_table',
|
|
tableMode: 'mobile',
|
|
},
|
|
...(orgSlug && { groups: { organization: orgSlug } }),
|
|
})
|
|
}
|
|
>
|
|
{selectedPlan.cta}
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
interface PricingComparisonTableProps {
|
|
organizations?: Organization[]
|
|
hasExistingOrganizations?: boolean
|
|
}
|
|
|
|
const PricingComparisonTable = ({
|
|
organizations,
|
|
hasExistingOrganizations,
|
|
}: PricingComparisonTableProps) => {
|
|
const [activeMobilePlan, setActiveMobilePlan] = useState('Free')
|
|
|
|
const sendTelemetryEvent = useSendTelemetryEvent()
|
|
const orgSlug = organizations?.[0]?.slug
|
|
|
|
const tableRef = useRef<HTMLTableElement>(null)
|
|
const theadRef = useRef<HTMLTableSectionElement>(null)
|
|
|
|
useIsomorphicLayoutEffect(() => {
|
|
const table = tableRef.current
|
|
const thead = theadRef.current
|
|
if (!table || !thead) return
|
|
|
|
const observer = new ResizeObserver(() => {
|
|
const theadTop = parseFloat(getComputedStyle(thead).top) || 0
|
|
const categoryTop = Math.floor(theadTop + thead.getBoundingClientRect().height)
|
|
table.style.setProperty('--pricing-category-top', `${categoryTop}px`)
|
|
})
|
|
observer.observe(thead)
|
|
return () => observer.disconnect()
|
|
}, [])
|
|
|
|
return (
|
|
<div
|
|
id="compare-plans"
|
|
className="sm:pb-18 container relative mx-auto px-4 pb-16 md:pb-16 lg:px-16 xl:px-20"
|
|
>
|
|
{/* <!-- xs to lg --> */}
|
|
<div className="lg:hidden">
|
|
{/* Free - Mobile */}
|
|
<div className="bg-background p-2 sticky top-14 z-10 pt-4">
|
|
<div className="bg-surface-100 rounded-lg border py-2 px-4 flex justify-between items-center">
|
|
<label className="text-foreground-lighter grow">Change plan</label>
|
|
<Select
|
|
name="Change plan"
|
|
value={activeMobilePlan}
|
|
onValueChange={(value) => setActiveMobilePlan(value)}
|
|
>
|
|
<SelectTrigger id="change-plan" className="w-auto min-w-[120px]">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectItem value="Free">Free</SelectItem>
|
|
<SelectItem value="Pro">Pro</SelectItem>
|
|
<SelectItem value="Team">Team</SelectItem>
|
|
<SelectItem value="Enterprise">Enterprise</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
{activeMobilePlan === 'Free' && (
|
|
<>
|
|
<MobileHeader
|
|
plan="Free"
|
|
price={'0'}
|
|
priceDescription={'/month'}
|
|
description={'Perfect for hobby projects and experiments'}
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing.database}
|
|
plan={'free'}
|
|
icon={Solutions['database'].icon}
|
|
sectionId="database"
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing.auth}
|
|
plan={'free'}
|
|
icon={Solutions['authentication'].icon}
|
|
sectionId="auth"
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing.storage}
|
|
plan={'free'}
|
|
icon={Solutions['storage'].icon}
|
|
sectionId="storage"
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing.realtime}
|
|
plan={'free'}
|
|
icon={Solutions['realtime'].icon}
|
|
sectionId="realtime"
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing['edge_functions']}
|
|
plan={'free'}
|
|
icon={Solutions['functions'].icon}
|
|
sectionId="edge-functions"
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing.dashboard}
|
|
plan={'free'}
|
|
icon={pricing.dashboard.icon}
|
|
sectionId="dashboard"
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing.security}
|
|
plan={'free'}
|
|
icon={pricing.security.icon}
|
|
sectionId="security"
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing.support}
|
|
plan={'free'}
|
|
icon={pricing.support.icon}
|
|
sectionId="support"
|
|
/>
|
|
</>
|
|
)}
|
|
|
|
{activeMobilePlan === 'Pro' && (
|
|
<>
|
|
<MobileHeader
|
|
plan="Pro"
|
|
from={false}
|
|
price={'25'}
|
|
priceDescription={'/month + additional use'}
|
|
description={'Everything you need to scale your project into production'}
|
|
organizations={organizations}
|
|
hasExistingOrganizations={hasExistingOrganizations}
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing.database}
|
|
plan={'pro'}
|
|
icon={Solutions['database'].icon}
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing.auth}
|
|
plan={'pro'}
|
|
icon={Solutions['authentication'].icon}
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing.storage}
|
|
plan={'pro'}
|
|
icon={Solutions['storage'].icon}
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing.realtime}
|
|
plan={'pro'}
|
|
icon={Solutions['realtime'].icon}
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing['edge_functions']}
|
|
plan={'pro'}
|
|
icon={Solutions['functions'].icon}
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing.dashboard}
|
|
plan={'pro'}
|
|
icon={pricing.dashboard.icon}
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing.security}
|
|
plan={'pro'}
|
|
icon={pricing.security.icon}
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing.support}
|
|
plan={'pro'}
|
|
icon={pricing.support.icon}
|
|
/>
|
|
</>
|
|
)}
|
|
|
|
{activeMobilePlan === 'Team' && (
|
|
<>
|
|
<MobileHeader
|
|
plan="Team"
|
|
from={false}
|
|
price={'599'}
|
|
priceDescription={'/month + additional use'}
|
|
description={'Collaborate with different permissions and access patterns'}
|
|
organizations={organizations}
|
|
hasExistingOrganizations={hasExistingOrganizations}
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing.database}
|
|
plan={'team'}
|
|
icon={Solutions['database'].icon}
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing.auth}
|
|
plan={'team'}
|
|
icon={Solutions['authentication'].icon}
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing.storage}
|
|
plan={'team'}
|
|
icon={Solutions['storage'].icon}
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing.realtime}
|
|
plan={'team'}
|
|
icon={Solutions['realtime'].icon}
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing['edge_functions']}
|
|
plan={'team'}
|
|
icon={Solutions['functions'].icon}
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing.dashboard}
|
|
plan={'team'}
|
|
icon={pricing.dashboard.icon}
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing.security}
|
|
plan={'team'}
|
|
icon={pricing.security.icon}
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing.support}
|
|
plan={'team'}
|
|
icon={pricing.support.icon}
|
|
/>
|
|
</>
|
|
)}
|
|
|
|
{activeMobilePlan === 'Enterprise' && (
|
|
<>
|
|
<MobileHeader
|
|
plan="Enterprise"
|
|
price={'Contact us for a quote'}
|
|
priceDescription={''}
|
|
description={'Designated support team, account manager and technical specialist'}
|
|
showDollarSign={false}
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing.database}
|
|
plan={'enterprise'}
|
|
icon={Solutions['database'].icon}
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing.auth}
|
|
plan={'enterprise'}
|
|
icon={Solutions['authentication'].icon}
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing.storage}
|
|
plan={'enterprise'}
|
|
icon={Solutions['storage'].icon}
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing.realtime}
|
|
plan={'enterprise'}
|
|
icon={Solutions['realtime'].icon}
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing['edge_functions']}
|
|
plan={'enterprise'}
|
|
icon={Solutions['functions'].icon}
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing.dashboard}
|
|
plan={'enterprise'}
|
|
icon={pricing.dashboard.icon}
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing.security}
|
|
plan={'enterprise'}
|
|
icon={pricing.security.icon}
|
|
/>
|
|
<PricingTableRowMobile
|
|
category={pricing.support}
|
|
plan={'enterprise'}
|
|
icon={pricing.support.icon}
|
|
/>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* <!-- lg+ --> */}
|
|
<div className="hidden lg:block">
|
|
<table ref={tableRef} className="h-px w-full table-fixed">
|
|
<caption className="sr-only">Pricing plan comparison</caption>
|
|
<thead ref={theadRef} className="bg-background sticky top-[62px] z-10">
|
|
<tr>
|
|
<th
|
|
className="text-foreground w-1/3 px-6 pt-2 pb-2 text-left text-sm font-normal"
|
|
scope="col"
|
|
>
|
|
<span className="sr-only">Feature by</span>
|
|
<span
|
|
className="h-0.25 absolute bottom-0 left-0 w-full"
|
|
style={{ height: '1px' }}
|
|
/>
|
|
</th>
|
|
|
|
{plans.map((plan) => {
|
|
const isUpgradablePlan = plan.name === 'Pro' || plan.name === 'Team'
|
|
|
|
return (
|
|
<th
|
|
className="text-foreground w-1/4 px-0 text-left text-sm font-normal"
|
|
scope="col"
|
|
key={plan.name}
|
|
>
|
|
<span className="flex flex-col px-6 pr-2 pt-2 gap-1.5">
|
|
<span className="flex flex-col xl:flex-row xl:items-end gap-1">
|
|
<h3 className="text-lg xl:text-xl 2xl:text-2xl leading-5 uppercase font-mono font-normal flex items-center">
|
|
{plan.name}
|
|
</h3>
|
|
<p
|
|
className={cn(
|
|
'text-foreground-lighter -my-1 xl:m-0',
|
|
plan.name === 'Enterprise' && 'xl:opacity-0'
|
|
)}
|
|
>
|
|
<span
|
|
className="text-foreground-lighter font-mono text-xl mr-1 tracking-tighter"
|
|
translate="no"
|
|
>
|
|
{plan.name !== 'Enterprise' && '$'}
|
|
{plan.priceMonthly}
|
|
</span>
|
|
{['Free', 'Pro', 'Team'].includes(plan.name) && (
|
|
<span className="text-[13px] leading-4 mt-1">{plan.costUnit}</span>
|
|
)}
|
|
</p>
|
|
</span>
|
|
<span className="flex flex-col justify-between h-full pb-2">
|
|
{isUpgradablePlan && hasExistingOrganizations ? (
|
|
<UpgradePlan
|
|
organizations={organizations}
|
|
onClick={() =>
|
|
sendTelemetryEvent({
|
|
action: 'www_pricing_plan_cta_clicked',
|
|
properties: {
|
|
plan: plan.name,
|
|
showUpgradeText: true,
|
|
section: 'comparison_table',
|
|
tableMode: 'desktop',
|
|
},
|
|
...(orgSlug && { groups: { organization: orgSlug } }),
|
|
})
|
|
}
|
|
size="tiny"
|
|
planId={plan.planId}
|
|
/>
|
|
) : (
|
|
<Button
|
|
asChild
|
|
size="tiny"
|
|
variant={plan.name === 'Enterprise' ? 'default' : 'primary'}
|
|
block
|
|
>
|
|
<Link
|
|
href={plan.href}
|
|
onClick={() =>
|
|
sendTelemetryEvent({
|
|
action: 'www_pricing_plan_cta_clicked',
|
|
properties: {
|
|
plan: plan.name,
|
|
showUpgradeText: false,
|
|
section: 'comparison_table',
|
|
tableMode: 'desktop',
|
|
},
|
|
...(orgSlug && { groups: { organization: orgSlug } }),
|
|
})
|
|
}
|
|
>
|
|
{plan.cta}
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
</span>
|
|
</span>
|
|
</th>
|
|
)
|
|
})}
|
|
</tr>
|
|
</thead>
|
|
<tbody className="border-default divide-border divide-y first:divide-y-0">
|
|
<PricingTableRowDesktop
|
|
category={pricing.database}
|
|
icon={Solutions['database'].icon}
|
|
sectionId="database"
|
|
/>
|
|
<PricingTableRowDesktop
|
|
category={pricing.auth}
|
|
icon={Solutions['authentication'].icon}
|
|
sectionId="auth"
|
|
/>
|
|
<PricingTableRowDesktop
|
|
category={pricing.storage}
|
|
icon={Solutions['storage'].icon}
|
|
sectionId="storage"
|
|
/>
|
|
<PricingTableRowDesktop
|
|
category={pricing.realtime}
|
|
icon={Solutions['realtime'].icon}
|
|
sectionId="realtime"
|
|
/>
|
|
<PricingTableRowDesktop
|
|
category={pricing['edge_functions']}
|
|
icon={Solutions['functions'].icon}
|
|
sectionId="edge-functions"
|
|
/>
|
|
<PricingTableRowDesktop
|
|
category={pricing.dashboard}
|
|
icon={pricing.dashboard.icon}
|
|
sectionId="dashboard"
|
|
/>
|
|
<PricingTableRowDesktop
|
|
category={pricing.security}
|
|
icon={pricing.security.icon}
|
|
sectionId="security"
|
|
/>
|
|
<PricingTableRowDesktop
|
|
category={pricing.support}
|
|
icon={pricing.support.icon}
|
|
sectionId="support"
|
|
/>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default PricingComparisonTable
|