Before
<img width="588" height="439" alt="Screenshot 2026-07-08 at 7 29 07 PM"
src="https://github.com/user-attachments/assets/8a3380d3-571f-49cd-8f32-7b38650dd0e5"
/>
After
<img width="578" height="436" alt="Screenshot 2026-07-08 at 7 29 55 PM"
src="https://github.com/user-attachments/assets/09e74c31-e131-41d5-87da-b4518514cfb5"
/>
## Summary
On the homepage, the Postgres Database product card's elephant artwork
renders over the card's description text at every viewport ≥1280px. I
traced it to #47226 (merged June 24): standardizing the marketing
container to `section-container` (`max-w-7xl` + `xl:px-24`) capped
products-grid content at 1088px, shrinking the card to ~538px while its
fixed geometry (250px text column + 398px right-anchored square artwork
box) needs ~625px. Large monitors regressed hardest: before June 24 they
got ~676px cards and no overlap. The app-router homepage move (#47228),
the color system PR (#47288), and the artwork PNGs are all unrelated
(verified against production DOM and full diffs).
Two changes to the artwork span in `DatabaseVisual.tsx`:
1. Cap the box width at `calc(100% - 280px)` from `md` up, where 280
covers the text column's `md:max-w-[250px]` cap (in `ProductCard.tsx`'s
`isDatabase` branch) plus card padding and breathing room. The art
scales down through its existing `object-contain`. At md/lg the card is
full-width (`md:col-span-12`), so the clamp never binds and rendering is
unchanged there.
2. Remove the `xl:-right-12` bleed (base `right-0` stands, matching how
2xl already rendered). The bleed used to clip only the art's transparent
canvas margin; with the clamped box the art fills its full width, so the
48px offset was cropping the elephant itself at 1280-1535px.
The hover line-art SVG scales with the box and stays aligned with the
PNG (identical aspect ratios: viewBox 390:430, PNG 585x645).
## Changes
- Add `md:max-w-[calc(100%-280px)]` to the artwork span in
`DatabaseVisual.tsx` so the Postgres card art can never cross its text
column
- Drop `xl:-right-12 2xl:right-0` from the same span so the smaller art
isn't clipped at the card's right edge
## Testing
Round 1 on the Vercel preview (commit e1ca671, measured via
getBoundingClientRect + computed styles):
- [x] Art clear of the text column at 1280/1440/1600/1920 (gap 54px at
1280/1440, 6px at 1600/1920); computed `max-width: calc(100% - 280px)`
applies
- [x] Hover at 1440 — SVG and PNG rects identical (pixel-exact
alignment)
- [x] 768/1024 — full-width card unchanged, span still a 398px square
(clamp resolves but doesn't bind)
- [x] Light theme at 1440 — same geometry, no overlap
Round 1 also surfaced that the `xl:-right-12` bleed now cropped the
elephant at 1280-1535px widths → second commit removes it. Round 2
(commit e28b408):
- [x] 1280/1440/1512/1600/1920 — art fully visible (span right edge
flush at the card's inner edge, e.g. 713 vs 714 at 1440), still clear of
the text column (span left 457 vs text right 451)
- [x] 768/1024 — unchanged (span still a right-anchored 398px square)
- [x] Hover alignment still exact (PNG and SVG rects identical:
457,452,256,398)
## Linear
- fixes GROWTH-971
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
Bug fix.
## What is the current behavior?
On the `apps/www` homepage, the Realtime product card shows a
cursor-following hover animation (the "self" cursor) alongside two other
peer cursors (User 1 and User 2) that animate independently.
The mouse-follow animation is driven by an `onMouseMove` handler on the
`<figure>` in `RealtimeVisual.tsx`. The three animated cursor divs are
positioned absolutely on top of that figure but did **not** set
`pointer-events-none`. As the peer cursors move around (and the self
cursor tracks the pointer), they become the pointer target under the OS
cursor and intercept mouse events, so the main hover animation
stutters/breaks when the pointer passes over one of the other cursors.
## What is the new behavior?
Added `pointer-events-none` to all three animated cursor wrappers (User
1, User 2, and Self). The animated cursors are purely decorative, so
they should never intercept pointer events. The `<figure>` keeps
`pointer-events-auto` and now receives `onMouseMove` uninterrupted, so
the cursor-follow animation stays smooth while hovering over the card.
## Additional context
Three-line change in `apps/www/components/Products/RealtimeVisual.tsx`.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
https://claude.ai/code/session_01YCXXskLSt6k4DjUxgS4vc5
---
_Generated by [Claude
Code](https://claude.ai/code/session_01YCXXskLSt6k4DjUxgS4vc5)_
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Bug Fixes**
- Improved interaction behavior for the on-screen user indicators so
they no longer capture pointer events, ensuring hover/drag behavior
elsewhere remains consistent.
- Refined the pointer-follow animation wiring to use DOM event listeners
for more reliable coordinate tracking.
- Updated motion behavior to respect “reduce motion” settings by
disabling the pointer-follow effect when enabled.
- Kept “Self” marker hover opacity transitions consistent with previous
visuals.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude <noreply@anthropic.com>
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES/NO
## What kind of change does this PR introduce?
Bug fix, feature, docs update, ...
## What is the current behavior?
Please link any relevant issues here.
## What is the new behavior?
Feel free to include screenshots if it includes visual changes.
## Additional context
Add any other context or screenshots.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Refreshed theming across the UI to use modern color expressions and
shared theme variables (including OKLCH-based gradients), improving
consistency for charts, code blocks, overlays, icons, and decorative
backgrounds.
* **Bug Fixes**
* Improved light/dark color and gradient consistency across axis/grid
styling, reference lines, buttons/badges, sidebar accents, loaders, and
other visual components.
* **Documentation**
* Updated styling/theming guidance to align with the revised semantic
token system and the updated theme variable usage patterns.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
To reproduce:
- resize viewport to mobile
- try to click the Realtime card
Tested on Brave.
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
Bug fix.
## What is the current behavior?
Click doesn't work on mobile.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Product cards are now interactive and respond to user clicks and hover
interactions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
- Most changes are related to either types or `useRef` usages (it now
requires an initial value).
- also updated `vaul` to its latest version and haven't noticed any
change ([design-system
demo](https://design-system-git-react-19-supabase.vercel.app/design-system/docs/components/drawer))
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Upgraded workspace to React 19.
* **Bug Fixes**
* Improved null-safety and ref handling across editors, UI components,
shortcuts, and markdown/image rendering to reduce runtime errors.
* Safer event/timeout/interval cleanup and more robust command/context
handling.
* **Chores**
* Bumped vaul dependency versions.
* **Documentation**
* Type and TypeScript accuracy improvements for clearer developer
feedback.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45886)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.
---------
Co-authored-by: Jordi Enric <jordi.err@gmail.com>
This PR preps the monorepo for a migration to Tailwind v4:
- Bump all Tailwind dependencies and libraries to the latest possible
version, while still compatible with Tailwind 3.
- Cleans up obsolete Tailwind 3 specific options and configs.
- Cleans up unused CSS files and fixes the CSS imports.
- Migrates all `important` uses in `@apply` lines to using the `!`
prefix.
- Move `typography.css` to the `config` package and import it from the
apps.
- Migrated all occurrences of `flex-grow`, `flex-shrink`,
`overflow-clip` and `overflow-ellipsis` since they're deprecated and
will be removed in Tailwind 4.
- Make the default theme object typesafe in the `ui` package.
- Migrate all `bg-opacity`, `border-opacity`, `ring-opacity` and
`divider-opacity` to the new format where they're declared as part of
the property color.
- Bump and unify all imports of `postcss` dependency.
* Move typescript version definition to pnpm-workspace.
* Bump typescript to 5.9.
* Minor fixes to satisfy the compiler.
---------
Co-authored-by: Raúl Barroso <code@raulb.dev>
* state of startups page init
* state of startups page design
* finish dark aware design
* embed placeholder typescript form
* embed typeform in popup
* newsletter form to hubspot
* update typeform id and increase circle size on mobile
* update meta description
* promo
* fix line height and yc
* update subheading
* fix conflict and error handling
* fix anime js
* fix ent quotes logos
* mobile hp product cards
* mobile customers section
* mobile examples
* update sitemap
* mobile customers slider
* remove autoplay
* Add lucide-react to docs (to make the autocomplete work).
* Migrate the docs app icons.
* Migrate the ui-patterns.
* Remove the old icons from ui package.
* Migrate the www app from react-feather icons.
* Migrate all of studio icons.
* Migrate the only component in design-system.
* Fix an old import in ui package. Revert an import in docs app.
* Fix some pages in www.
* Remove unneeded files used in generation of icons.
* Fix a prettier error.
* Fix more issues in www.
* Fix an issue in Log Date picker.
* Replace all string sizes with number sizes because the icons grew in some cases.
* Fix more imports in security page.
* Fix an extra import.
* Remove the size prop from all icons if they're in a button and they match the button size.
* Minor fixes for docs and www.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* set up multiple themes in studio
* set up multiple themes in studio
* set up multiple themes in docs and www
* update all resolvedTheme to also include deep-dark
* update all resolvedTheme checks to also include deep-dark
* update tailwind.config.js tokens
* update tailwind.config.js tokens
* update leftover scale12 token
* update if resolvedTheme _doesn't_ include 'dark'
* update more styling tokens
* add dynamic themes to CmdK
* fix nav and footer for multi theme
* add data-theme selector output to transformTokens.js
* update code-hike.css to target data-theme css
* update tailwindcss to ^3.3.5
* ThemeImage with light and dark src for www and docs
* add brand-button styling token
* update old dark theme boolean
* update old dark theme boolean
* make homepage product visuals themeable
* update product page themed images
* update badge green with brand
* fix roles list appearance
* fix auth widget in auth page
* update more dark logic
* update more dark logic
* add button default bg and border
* update pricing page theme styling
* clean up Themeimage
* remove forceDark in homepage
* update dark:border-dark occurrences
* update dark:border-dark occurrences
* fix dark mode base colors
* remove foreground-strong
* fix notification badge bg
* remove some dark: selectors
* update dark: selectors
* update code-hike deep dark bg color
* fix comment typo
* update border-button-hover token
* fix customer story logo
* remove some more dark: selectors
* restore forceDark in www homepage
* fix auth react icon
* fix homepage product visuals
* remove theme
* add brand-link token
* fix checkbox bg
* npm install
* more visible EntityListItem active bg
* fix --background-alternative-default css vars
---------
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
* migrate some www components to tokens
* consolidate InteractiveShimmerCard to Panel component
* update tokens in blog
* update tokens in careers page
* update tokens in customers section
* update tokens in open-source section
* update tokens in Realtime page
* update tokens in Storage and Vector
* update tokens in SplitCodeBlockCarousel
* update tokens in PGCharts
* remove unused css files
* update tokens in Card
* update tokens in Pricing page
* clean up priving page imports
* remove hardcoded theme vars
* migrate first half of defaultTheme.ts to tokens
* migrate second half of defaultTheme.ts to tokens
* improve inputs
* add foreground to text-light and text-lighter
* add foreground to text-light and text-lighter
* migrate docs components with styling tokens
* migrate docs components with styling tokens
* fix broken Repos component
* fix broken classes in blog
* update tokens on Button and other components
* update tokens on IconPanel
* update studio main layout base styling tokens
* update tokens across studio, docs and www
* update tokens across studio, docs and www
* update ui/Panel to styling tokens
* update ExampleProject and TableEditorMenu tokens
* www vector page tokens
* update studio UI tokens
* update other studio UI tokens
* update more studio UI tokens
* change tokens here, change tokens there
* finish updating colors with tokens variables
* add gui sandbox for theme experimentation
* use common package for www, docs and studio and fix Command K tokens
* provide light mode default tokens options
* fix conflict leftover
* update loading line
* fix className typo
* fix prettier
* update themeSandbox preset default values
* fix text-background0
* prettier
* update warningBanner with warning color
* switch all border-border with border-default
* improve border-secondary and foreground-muted in light mode
* force ring color on toggle
* fix button bg color and border-muted light token
* fix input bg color
* fix dark button hover
* fix homepage product card
* fix code-hike table header colors
* button dark border
* remove tabIndex leftover from homepage main ctas
---------
Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com>
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
* update deps + image codemod (studio)
* update next links (studio)
* update deps
* update links (ui)
* remove next-transpile-modules
* move next-themes dependency
* chore: update ConfirmDialog
* chore: remove old ConfirmModal js file. migrated to TS
* dependency wrangling
* remove empty page
* update next links (www)
* First run bump react-data-grid-v7 beta 4
* fix package-lock.json
* more deps wrangling
* update recharts
* update sentry options
* fix some broken things in www
* studio fixes
* fix graphiql
* fix studio build
* fix menu hydration
* small build error
* update turbo
* fix www typescript errors
* docs image codemod
* links codemod docs
* fix docs typescript errors
* move useConsent to ui to prevent circular deps
* Fix links
* Fix homepage
* Fix links
* move studio/ to apps/
* Revert "move studio/ to apps/"
This reverts commit 1b0a985fcb.
* disable outputFileTracingRoot
* remove outputFileTracingRoot
* fix homepage product cards
* fix PrivacySettings links
* Fix links
* Fix the build for www.
* Minor fixes for JWTGenerator.
* Fix the docs and ui tests.
* Revert codehike back to 0.8.3
* remove ConfirmAlert()
* reenable babel because mobx hates me
* fix blog image and comparison page avatar
* Fix svg errors
* update image synthax
* Fix code hike
* Move the button in a div so that it doesn't inherit its parent height and make the button look weird.
* When components are defined in a component, they get recreated on each render. This makes them unstable in certain cases and causes infinite rerenders.
* Replace the next/head usage with next/script.
* Chore/upgrade next 13 fix table editor (#18431)
* fix table editor styling and fix row deletion logic
* Fix deleting selected rows from header, and fix checkboxes not clearing up
* Fix deleting all rows when filter applied, and fix deleting all rows
* Fix grid size styling issue
* Fix TS error
* Hydration errors
* studio org pages fixes
* fix more studio links
* audit logs fixes
* dropdown icon styling fixes
* fix some images in www
* upgrade to next 14
* try new sentry wrapper for api
* see if this is even invoked
* Revert "see if this is even invoked"
This reverts commit 86c3973ffa.
* Revert "try new sentry wrapper for api"
This reverts commit f67623ebad.
* Revert "upgrade to next 14"
This reverts commit a24dd6131e.
* chore: allow node version 19/20
* Try to fix the LogTable so that it renders with the newer "react-data-grid" version.
* Fix type errors in the log renderer code.
* Fix the replication screen.
* Add the CSS for the GraphiQL.
* Fix SQL editor results rendering
* Lint
* Fix SQL editor results height issue
* Fix auth RLS not invalidating RQ when toggling RLS
* Fix database tables new/edit column regressed
* Fix migrations page empty state if migrations schema not yet created
* Fix API side panel docs temp remove postgrest text for column description PK and FK
* Fix + improve timeout handling in SQL editor
---------
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Co-authored-by: Terry Sutton <saltcod@gmail.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com>
Pamela Chia
