chore: uniform card and panel padding-x#41237
Merged
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
6 Skipped Deployments
|
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
Contributor
🎭 Playwright Test Results
Details
Flaky testsFeatures › database.spec.ts › Database › Schema Visualizer › actions works as expected Skipped testsFeatures › sql-editor.spec.ts › SQL Editor › snippet favourite works as expected |
kemaldotearth
approved these changes
Dec 10, 2025
kemaldotearth
left a comment
Contributor
There was a problem hiding this comment.
How does this effect anywhere we have <Card /> with zero padding? I guess the p-0 applied via className overrides it still or?
Contributor
WalkthroughThis pull request introduces four new CSS custom properties for responsive card padding and refactors UI components across the application to use these variables instead of hard-coded padding utilities. The changes consolidate spacing tokens into a centralized CSS variable system for improved maintainability and consistency. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/ui/build/css/source/global.css (1)
129-132: New horizontal padding tokens look good; consider when to apply the-mdvariantDefining
--padding-x-sm/--padding-x-mdand the derived--card-padding-x/--card-padding-x-mdgives you a clear, tokenized way to keep card/panel x‑spacing consistent and adjustable from a single place. The inline comments mapping topx-4/px-6are helpful.Right now, in the snippets shown, only
--card-padding-xis used. That’s fine, but if the design later calls for wider padding at larger breakpoints (as some components previously had), you already have--card-padding-x-mdready to be wired up viamd:px-[var(--card-padding-x-md)].No changes needed here.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (12)
apps/studio/components/interfaces/Database/Roles/RoleRow.tsx(1 hunks)apps/studio/components/interfaces/Database/Roles/RolesList.tsx(2 hunks)apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx(2 hunks)apps/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx(1 hunks)apps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx(1 hunks)apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx(5 hunks)apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainsConfigureHostname.tsx(1 hunks)apps/studio/components/interfaces/Settings/General/General.tsx(3 hunks)apps/studio/components/ui/Forms/FormSection.tsx(1 hunks)apps/studio/components/ui/Panel.tsx(3 hunks)packages/ui/build/css/source/global.css(1 hunks)packages/ui/src/components/shadcn/ui/card.tsx(2 hunks)
🧰 Additional context used
🧠 Learnings (19)
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use CardContent for card sections, CardFooter for actions, and CardHeader/CardTitle only when card content is not described by surrounding content or when using multiple Cards to group related pieces
Applied to files:
apps/studio/components/interfaces/Database/Roles/RolesList.tsxapps/studio/components/interfaces/Settings/General/General.tsxapps/studio/components/ui/Forms/FormSection.tsxapps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsxapps/studio/components/interfaces/Settings/API/PostgrestConfig.tsxapps/studio/components/interfaces/Organization/SSO/SSOConfig.tsxapps/studio/components/ui/Panel.tsxapps/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsxpackages/ui/src/components/shadcn/ui/card.tsxapps/studio/components/interfaces/Database/Roles/RoleRow.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use generic ui table components for most tables, contained within a Card
Applied to files:
apps/studio/components/interfaces/Database/Roles/RolesList.tsxapps/studio/components/interfaces/Settings/General/General.tsxapps/studio/components/ui/Forms/FormSection.tsxapps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsxapps/studio/components/interfaces/Settings/API/PostgrestConfig.tsxapps/studio/components/interfaces/Organization/SSO/SSOConfig.tsxapps/studio/components/ui/Panel.tsxpackages/ui/src/components/shadcn/ui/card.tsxapps/studio/components/interfaces/Database/Roles/RoleRow.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use Card component to group related pieces of information
Applied to files:
apps/studio/components/interfaces/Database/Roles/RolesList.tsxapps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsxapps/studio/components/interfaces/Settings/API/PostgrestConfig.tsxapps/studio/components/interfaces/Organization/SSO/SSOConfig.tsxapps/studio/components/ui/Panel.tsxpackages/ui/src/components/shadcn/ui/card.tsxapps/studio/components/interfaces/Database/Roles/RoleRow.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Wrap forms in a Card component unless specified otherwise
Applied to files:
apps/studio/components/interfaces/Database/Roles/RolesList.tsxapps/studio/components/interfaces/Settings/General/General.tsxapps/studio/components/ui/Forms/FormSection.tsxapps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsxapps/studio/components/interfaces/Settings/API/PostgrestConfig.tsxapps/studio/components/interfaces/Organization/SSO/SSOConfig.tsxapps/studio/components/ui/Panel.tsxpackages/ui/src/components/shadcn/ui/card.tsxapps/studio/components/interfaces/Database/Roles/RoleRow.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : For simple lists of objects, use ResourceList with ResourceListItem instead of tables
Applied to files:
apps/studio/components/interfaces/Database/Roles/RolesList.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use typography classes from apps/studio/styles/typography.scss instead of hard-coding Tailwind classes (e.g., use 'heading-default' instead of 'text-sm font-medium')
Applied to files:
apps/studio/components/interfaces/Database/Roles/RolesList.tsxapps/studio/components/interfaces/Settings/General/General.tsxapps/studio/components/ui/Forms/FormSection.tsxapps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsxapps/studio/components/interfaces/Settings/API/PostgrestConfig.tsxapps/studio/components/interfaces/Organization/SSO/SSOConfig.tsxapps/studio/components/ui/Panel.tsxpackages/ui/src/components/shadcn/ui/card.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use _Shadcn_ form primitives (Form_Shadcn_, FormField_Shadcn_, FormControl_Shadcn_) and prefer FormItemLayout with layout='flex-row-reverse' for form controls
Applied to files:
apps/studio/components/interfaces/Database/Roles/RolesList.tsxapps/studio/components/interfaces/Settings/General/General.tsxapps/studio/components/ui/Forms/FormSection.tsxapps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsxapps/studio/components/interfaces/Settings/API/PostgrestConfig.tsxapps/studio/components/interfaces/Organization/SSO/SSOConfig.tsxapps/studio/components/ui/Panel.tsxpackages/ui/src/components/shadcn/ui/card.tsxapps/studio/components/interfaces/Database/Roles/RoleRow.tsxapps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainsConfigureHostname.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : UI components from packages/ui should be imported with _Shadcn_ suffix where applicable (e.g., Input_Shadcn_)
Applied to files:
apps/studio/components/interfaces/Database/Roles/RolesList.tsxapps/studio/components/ui/Forms/FormSection.tsxapps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsxapps/studio/components/interfaces/Settings/API/PostgrestConfig.tsxapps/studio/components/interfaces/Organization/SSO/SSOConfig.tsxapps/studio/components/ui/Panel.tsxpackages/ui/src/components/shadcn/ui/card.tsxapps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainsConfigureHostname.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/components/ui/**/*.{ts,tsx} : Studio-specific generic UI components should be placed in apps/studio/components/ui
Applied to files:
apps/studio/components/interfaces/Settings/General/General.tsxapps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsxapps/studio/components/interfaces/Settings/API/PostgrestConfig.tsxapps/studio/components/interfaces/Organization/SSO/SSOConfig.tsxapps/studio/components/ui/Panel.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : If a form's submit button is outside the form element, create a formId variable and set it as the id prop on the form and formId on the button
Applied to files:
apps/studio/components/interfaces/Settings/General/General.tsxapps/studio/components/ui/Forms/FormSection.tsxapps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use ScaffoldSection, ScaffoldSectionTitle, and ScaffoldSectionDescription for multi-section page layouts
Applied to files:
apps/studio/components/ui/Forms/FormSection.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Build forms with react-hook-form + zod
Applied to files:
apps/studio/components/ui/Forms/FormSection.tsxapps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsxapps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/pages/**/*.{ts,tsx} : Use related layout components (e.g., AuthLayout) when a page is within an existing section
Applied to files:
apps/studio/components/ui/Forms/FormSection.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to packages/ui/**/*.{ts,tsx} : Do not introduce new UI components in packages/ui unless explicitly asked to; use existing shadcn/ui-based components
Applied to files:
apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsxapps/studio/components/interfaces/Organization/SSO/SSOConfig.tsxapps/studio/components/ui/Panel.tsxpackages/ui/src/components/shadcn/ui/card.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/pages/**/*.{ts,tsx} : Use PageLayout component for new page structures with props: children, title, subtitle, icon, breadcrumbs, primaryActions, secondaryActions, navigationItems, className, size, isCompact
Applied to files:
apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsxapps/studio/components/ui/Panel.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Prefer _Shadcn_ components over non-suffixed variants when available
Applied to files:
apps/studio/components/ui/Panel.tsxpackages/ui/src/components/shadcn/ui/card.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Read packages/ui/index.tsx file for full list of available components before composing interfaces
Applied to files:
apps/studio/components/ui/Panel.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Use ScaffoldContainer for center-aligned container content
Applied to files:
apps/studio/components/ui/Panel.tsx
📚 Learning: 2025-12-11T02:40:11.135Z
Learnt from: CR
Repo: supabase/supabase PR: 0
File: .cursor/rules/studio-ui.mdc:0-0
Timestamp: 2025-12-11T02:40:11.135Z
Learning: Applies to apps/studio/**/*.{ts,tsx} : Place table-associated actions on the right-hand side above the table
Applied to files:
apps/studio/components/interfaces/Database/Roles/RoleRow.tsx
🧬 Code graph analysis (2)
apps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx (1)
packages/ui/src/components/shadcn/ui/card.tsx (1)
CardContent(70-70)
packages/ui/src/components/shadcn/ui/card.tsx (1)
blocks/vue/registry/default/lib/utils.ts (1)
cn(5-7)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: format
- GitHub Check: test
- GitHub Check: test (1)
- GitHub Check: typecheck
🔇 Additional comments (10)
apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainsConfigureHostname.tsx (1)
69-69: LGTM! Clean padding token migration.The horizontal padding update aligns with the centralized CSS variable system introduced in this PR.
apps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx (1)
183-183: LGTM! Padding now controlled by CardContent defaults.The removal of explicit vertical padding delegates spacing control to the CardContent component, which now uses the centralized CSS variable system.
apps/studio/components/interfaces/Settings/General/General.tsx (1)
104-104: LGTM! Consistent padding token updates.All three padding updates follow the same pattern of migrating to the centralized CSS variable system.
Also applies to: 142-142, 158-158
apps/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx (1)
120-120: LGTM! Clean padding token migration.The horizontal padding update aligns with the centralized CSS variable system.
apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx (1)
209-209: Verify the vertical padding reduction is intentional.The horizontal padding migration to
px-[var(--card-padding-x)]looks good. However, the vertical padding has been reduced frompy-8topy-4across all five FormItemLayout instances, which halves the vertical spacing. Please confirm this tighter spacing aligns with the intended design.Also applies to: 272-272, 351-351, 402-402, 429-429
apps/studio/components/interfaces/Database/Roles/RolesList.tsx (1)
189-189: Verify responsive padding behavior is preserved.The padding updates look good and are consistent. However, the original classes
px-4 md:px-6included responsive breakpoints. Ensure the--card-padding-xCSS variable definition includes media queries to maintain the intended responsive spacing behavior.Also applies to: 207-207
apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx (1)
444-444: LGTM! Consistent padding token updates.All three padding updates correctly migrate to the centralized CSS variable system. The changes maintain the same visual structure while improving maintainability.
Also applies to: 465-465, 469-469
apps/studio/components/ui/Forms/FormSection.tsx (1)
18-22: FormSection now uses--card-padding-x– confirm loss of md-specific wider paddingMigrating to
px-[var(--card-padding-x)]keeps the layout clean and aligns FormSection with the shared card/panel padding token. One behavioral change vs the previouspx-4 md:px-8is that horizontal padding is now a single value (1rem via--card-padding-x) at all breakpoints.If you still want wider padding on larger screens, consider:
const classes = [ 'grid grid-cols-12 gap-6 px-[var(--card-padding-x)] md:px-[var(--card-padding-x-md)] py-4 md:py-8', `${disabled ? ' opacity-30' : ' opacity-100'}`, `${className}`, ]Based on learnings, this keeps FormSection visually aligned with Card/Panel spacing; just double-check the intended responsive behavior.
apps/studio/components/ui/Panel.tsx (1)
34-45: Panel header/content/footer/notice correctly migrated to--card-padding-xUsing
px-[var(--card-padding-x)]across the Panel header, Content, Footer, andPanelNoticekeeps all Panel chrome horizontally aligned with the same token the Card uses, which is exactly what this PR is aiming for. This also ensures legacy Panel surfaces stay visually in sync while new work moves toCardper the deprecation notice.No issues from a code or layout-consistency perspective.
Based on learnings, this keeps studio “panel-like” UI aligned with the shared Card spacing system.
Also applies to: 56-58, 60-64, 94-101
packages/ui/src/components/shadcn/ui/card.tsx (1)
19-27: Card sections now driven by--card-padding-x– verify intended padding changeSwitching CardHeader, CardContent, and CardFooter to
px-[var(--card-padding-x)]nicely centralizes horizontal spacing and aligns with how Studio components consume the token.One subtle change: these were previously
px-6(1.5rem). With the new vars inglobal.css:--padding-x-sm: 1rem; /* px-4 */ --padding-x-md: 1.5rem; /* px-6 */ --card-padding-x: var(--padding-x-sm); --card-padding-x-md: var(--padding-x-md);the default card x‑padding becomes 1rem unless overridden.
If preserving the old 1.5rem card padding is desired, you could either:
- Point the base token at the md value:
--card-padding-x: var(--padding-x-md);or
- Use the md variant just for cards:
className={cn('flex items-center py-4 px-[var(--card-padding-x-md)]', className)}This looks correct mechanically; just confirm the new, slightly tighter card padding matches the design intent.
Also applies to: 48-55, 59-66
| id="collapsible-trigger" | ||
| type="button" | ||
| className="group flex w-full items-center justify-between rounded py-3 px-4 md:px-6 text-foreground" | ||
| className="group flex w-full items-center justify-between rounded py-3 px-[var(--card-padding-x)] text-foreground" |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Search for --card-padding-x CSS variable definition
# Check for CSS/SCSS/TSX files with the variable
rg -n "card-padding-x" --type-list | head -20
# Search across common stylesheet locations
find . -type f \( -name "*.css" -o -name "*.scss" -o -name "*.tsx" -o -name "*.ts" \) -exec grep -l "card-padding-x" {} \;
# Look for the variable definition with context
rg -B 5 -A 5 "card-padding-x" --type=css --type=scss
# Also check in tsx/ts files for CSS-in-JS or style definitions
rg -B 3 -A 3 "card-padding-x" --type=tsx --type=tsRepository: supabase/supabase
Length of output: 1227
🏁 Script executed:
#!/bin/bash
# Search for --card-padding-x in global.css with full context
echo "=== Searching global.css for card-padding-x ==="
rg -B 10 -A 10 "card-padding-x" ./packages/ui/build/css/source/global.css
echo ""
echo "=== Checking if there are media queries for card-padding ==="
rg -B 3 -A 3 "@media.*card|card.*@media" ./packages/ui/build/css/source/global.css
echo ""
echo "=== Checking entire card-related section in global.css ==="
rg -B 5 -A 5 "card" ./packages/ui/build/css/source/global.css | head -100
echo ""
echo "=== Checking card.tsx for any responsive styles ==="
cat ./packages/ui/src/components/shadcn/ui/card.tsxRepository: supabase/supabase
Length of output: 3218
🏁 Script executed:
#!/bin/bash
# Check RoleRow.tsx around line 96 to see the full context
echo "=== RoleRow.tsx context around line 96 ==="
sed -n '85,110p' ./apps/studio/components/interfaces/Database/Roles/RoleRow.tsx
echo ""
echo "=== Check if there are media queries or responsive rules elsewhere for card-padding-x ==="
rg -r "" "@media" ./packages/ui/build/css/source/global.css | head -30Repository: supabase/supabase
Length of output: 1367
🏁 Script executed:
#!/bin/bash
# Let's verify what the original class was - check git history or similar components
echo "=== Check RolesList.tsx to see if it has similar patterns ==="
rg -B 3 -A 3 "card-padding-x|md:px-" ./apps/studio/components/interfaces/Database/Roles/RolesList.tsx | head -40
echo ""
echo "=== Check other Panel or FormSection components for padding patterns ==="
rg -B 2 -A 2 "md:px-" ./apps/studio/components/ui/Panel.tsx
rg -B 2 -A 2 "md:px-" ./apps/studio/components/ui/Forms/FormSection.tsxRepository: supabase/supabase
Length of output: 779
🏁 Script executed:
#!/bin/bash
# Check if there's a Tailwind config or if CSS variables are overridden with media queries
echo "=== Check for Tailwind config ==="
find . -name "tailwind.config.*" -type f -exec cat {} \; | head -100
echo ""
echo "=== Check if there are any media query overrides for card-padding in any CSS file ==="
rg "@media" ./packages/ui/build/css/source/ -A 10 | grep -A 10 "card\|padding"
echo ""
echo "=== Check the full global.css file for any media query sections ==="
wc -l ./packages/ui/build/css/source/global.css
head -200 ./packages/ui/build/css/source/global.css | tail -100Repository: supabase/supabase
Length of output: 8579
Responsive padding has been lost and needs to be fixed.
The change from md:px-6 to px-[var(--card-padding-x)] removes responsive behavior. The CSS variable --card-padding-x is statically set to 1rem (px-4) across all breakpoints, whereas the original code used px-6 (1.5rem) on medium screens and above.
A separate variable --card-padding-x-md exists but is unused. To preserve responsive padding, either:
- Use
md:px-[var(--card-padding-x-md)]alongsidepx-[var(--card-padding-x)] - Add media queries to the CSS variable definition to make
--card-padding-xresponsive
🤖 Prompt for AI Agents
In apps/studio/components/interfaces/Database/Roles/RoleRow.tsx around line 96
the change from md:px-6 to px-[var(--card-padding-x)] removed responsive padding
because --card-padding-x is fixed; restore responsive behavior by using the
medium breakpoint variable: add md:px-[var(--card-padding-x-md)] alongside the
existing px-[var(--card-padding-x)] (or alternatively make --card-padding-x
responsive in CSS via media queries and remove the unused --card-padding-x-md),
ensuring medium+ screens receive the larger padding.
stylessh
pushed a commit
that referenced
this pull request
Dec 11, 2025
This was referenced Dec 11, 2025
stylessh
added a commit
that referenced
this pull request
Dec 16, 2025
* wip * wip * single page * new sections and polishing up * reponsive * nits * semantic titles * optimize imgs * nits * wup * hero bubbles * Update apps/www/components/Wrapped/Pages/SupabaseSelect.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix: Use `amaro` for stripping types in code samples (#41229) * Fix the error for babel/preset-typescript in docs. * Unfix the version. * Try using amaro for type stripping. * Run prettier after stripping types. * Fix tests. --------- Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com> * fix: Fix minor issue in the foreign key selector (#41235) Change the isPending state to isLoading. * docs: Remove empty troubleshooting fields (#41236) * Remove emoty fields * Fix lock file * chore: update self-hosted image versions (#41234) * Feature: show index advisor in table editor (#41166) * added table advisor query * updated to include table editor performance * updated JSON B * added side panel * updated query indexes to show highlights context * show index advisor in table editor * updated invalidation logic * added color updates * added query indexes * updated query performance type * updated overflow and title * put behind flag * remove gap * added on close * Update apps/studio/data/database/table-index-advisor-query.ts Co-authored-by: Charis <26616127+charislam@users.noreply.github.com> * updated styling --------- Co-authored-by: Charis <26616127+charislam@users.noreply.github.com> * fix: useFlag to update initial check of flag store (#41209) * fix flag lib * updated uneeded logic * updated logic * remove line * updated comment * fix: Hide favourites and share snippets on self-hosted variant (#41227) * Hide favorite and share actions for self-hosted version. * Rename the query on save only on platform. * Simplify useCheckOpenAiKeyQuery. * Rename with AI now depends if the OPENAI_API_KEY is set. * Minor fixes. * Fix the tests to use .skip for skipping tests. Remove extra port params. * Make the test for favourites work only on platform variant. * feat(reports): support new database report granularity FE-2221 (#41228) * handle new granularity * undo unnecessary type change * rm console log * fix: blog auto scroll post app router migration for blog (#41220) Enhance TOC highlighting and anchor scroll in blog posts Refactored useActiveAnchors hook to support smooth hash scrolling and improved TOC highlighting based on scroll position. Added options for custom selectors and offset, and updated BlogPostClient to enable scroll-to-anchor and TOC highlight functionality. * fix: remove flakiness with launch options and default timeouts (#41245) * attempt to make table editor tests less flaky * updated race conditions for table editor * updated playwright config with optimized launch options * reduce workers * updated timeouts for tests * updated config to have a global timeout of 20 seconds * updated to be visible * chore: update changelog and image versions file (#41244) * feat(design-system): improve table docs (#41215) * docs updates * docs expansion * minor docs fix * improvements * fix dependencies * docs expansion * more table examples * map over data * improve copy * Update apps/design-system/registry/default/example/table-row-link-actions.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update apps/design-system/registry/default/example/table-row-link-actions.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fixes * fix --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * chore(studio): improve table presentation (#41217) * billing improvements * wrapper improvements * border fix * Nit adjustments * fixes * fix aria * fix loading * fixes * fix --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> * Save opened side bar in local storage, and init on new session (#41224) * Save opened side bar in local storage, and init on new session * Fix test * Fix * Nit * docs(design-system): Data Table and Data Grid documentation (#41252) * basic differentiation * docs * data-grid examples * data-grid-demo * data-table * demo * use existing components * improvements * markup * docs * remove data table * lint * Update apps/design-system/content/docs/ui-patterns/empty-states.mdx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix ref * use TanStack sorting * grammar * dependency * 📝 Add docstrings to `dnywh/docs/data-table-data-grid` (#41255) Docstrings generation was requested by @MildTomato. * #41252 (comment) The following files were modified: * `apps/design-system/registry/default/example/data-grid-demo.tsx` * `apps/design-system/registry/default/example/data-grid-empty-state.tsx` * `apps/design-system/registry/default/example/data-table-demo.tsx` Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * docs: fix grammatical error in generate-text-embeddings guide (#41187) * docs: fix grammatical error in generate-text-embeddings guide * Update generate-text-embeddings.mdx Co-authored-by: Chris Chinchilla <chris@chrischinchilla.com> --------- Co-authored-by: Chris Chinchilla <chris@chrischinchilla.com> * chore: uniform card and panel padding-x (#41237) * docs: Fix typo in API introduction documentation (#41251) * chore(billing): regenerate api-types to include vanity subdomain entitlement (#41257) chore(billing: regenerate api-types to include vanity subdomain entitlement * Add liam to humans.txt (#41169) * docs: Add link to restoring backup to new Supabase project (#39108) Co-authored-by: Chris Chinchilla <chris.ward@supabase.io> * feat(code-block): add word wrap functionality and controls to code bl… (#39689) * feat(code-block): add word wrap functionality and controls to code blocks * feat(code-block): enhance layout of code block with improved line number display and structure * fix h-full issue * fix Prettier issue --------- Co-authored-by: Chris Chinchilla <chris.ward@supabase.io> * wip * wip * single page * optimize imgs * revert * pkg * update new content * rm overflow * new data * nits * nits * og * border * fix: improve AnimatedCounter and FloatingStatBubbles/Intro components - Update AnimatedCounter to correctly reflect value changes in the DOM. - Add lifetime management for timers in FloatingStatBubbles and FloatingBoxes to prevent memory leaks. - Ensure cleanup of timers on component unmount for better resource management. * dbs * minify images * text-brand-link on light mode * fix grid * max-width on images * address comments * fixes * faster image rotation * upd og * new launch * nitsgs * last nits --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com> Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com> Co-authored-by: Chris Chinchilla <chris.ward@supabase.io> Co-authored-by: Andrey A. <56412611+aantti@users.noreply.github.com> Co-authored-by: Ali Waseem <waseema393@gmail.com> Co-authored-by: Jordi Enric <37541088+jordienr@users.noreply.github.com> Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com> Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com> Co-authored-by: Joshen Lim <joshenlimek@gmail.com> Co-authored-by: Dinesh Dawonauth <dineshddawo@gmail.com> Co-authored-by: Chris Chinchilla <chris@chrischinchilla.com> Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com> Co-authored-by: 李子衿 <160584929+hhhez@users.noreply.github.com> Co-authored-by: Kanishk Dudeja <kanishk@kanishkdudeja.com> Co-authored-by: lch-supa <liam.hogan@supabase.io> Co-authored-by: Timothy Lim <tim.lim@supabase.io> Co-authored-by: Priyanshu Thapliyal <114170980+Priyanshuthapliyal2005@users.noreply.github.com>
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adding a global css
--card-padding-xvariable to centralize the horizontal spacing for cards and panels and other layouts that commonly should align to these.Some examples
Summary by CodeRabbit
Release Notes
✏️ Tip: You can customize this high-level summary in your review settings.