Files
supabase/packages/ui-patterns
Danny White d523603e17 fix(ui-patterns): hide Skip to content drop shadow when off-screen (#51460)
## Problem

The shared Skip to content control parks itself with
`-translate-y-full`, so its bottom edge sits on the top of the viewport.
After raised Button shadows landed, the `0 1px 3px` drop shadow still
peeks into the top-left of Studio, Docs, www, and design-system even
when the link is hidden.

## Solution

Hide the control with `-translate-y-[calc(100%+8px)]` so the shadow
clears the viewport. Update the unit test to match. One shared
`ui-patterns` change covers every consumer.

| Before |
| --- |
| <img width="420" height="108" alt="CleanShot 2026-10-09 at 10 14
27@2x"
src="https://github.com/user-attachments/assets/469dd260-d989-49a2-a28c-7f02fa353571"
/> |
| _Note the shadow poking out from the top of the viewport_ |

## Review instructions

On light mode and on Safari (for clearest visibility):

1. Open any Studio, Docs, or www preview page (no need to sign in on
www/docs).
2. Look at the top-left of the viewport before pressing Tab. Confirm
there is no faint button shadow / dark speck.
3. Press Tab once. Confirm the Skip to content button still slides in
cleanly, then Enter to jump to main content.
2026-10-09 18:19:33 +11:00
..
2026-07-02 17:03:08 +02:00

Supabase UI Patterns

This package should be used for components which are built using NPM libraries (react-markdown, reactflow for example), which make no sense to be included in all apps. It should also be used for components which are constructed using various components from the ui package.

This package does not have a barrel file - each component has to be imported from its index (ui-patterns/PrivacySettings, for example). This is intentional so that adding a new component which is used only in 1 or 2 apps doesn't burden the rest of the apps.