From 1a77d3e25620427f00ed20b41157ea246af39381 Mon Sep 17 00:00:00 2001
From: mubashir1osmani <mubashir.osmani777@gmail.com>
Date: Sun, 23 Aug 2026 14:06:52 -0400
Subject: [PATCH] fix(ui): align Skills, Access Groups and Budgets page spacing
 with Teams

Teams sets its list-view padding with `p-8` and its header-to-content
rhythm with a `gap-6` Tabs root. These three pages each drifted from that
in one of two ways: Skills carried `m-8 p-2`, and Access Groups and
Budgets carried `p-6 px-12`, so horizontal padding ran 48px against
Teams' 32px.

Skills also nested its own `overflow-y-auto` inside the dashboard
layout's scrolling `<main>`, which is why it scrolled independently of
every other page. Dropping it also drops `mx-auto` and `flex-auto`, both
inert here since there is no max-width to center against and the parent
`<main>` is a block.

Guardrails, Agents, Prompts, Projects, and the two detail pages share the
same two deviations and are left alone. There is no shared page shell to
fix them all at once, and building one reaches 8+ files.
---
 .../access-groups/_components/AccessGroupsPage.tsx            | 4 ++--
 .../src/app/(dashboard)/budgets/_components/budget_panel.tsx  | 2 +-
 .../(dashboard)/skills/_components/ClaudeCodePluginsPanel.tsx | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/access-groups/_components/AccessGroupsPage.tsx b/ui/litellm-dashboard/src/app/(dashboard)/access-groups/_components/AccessGroupsPage.tsx
index 4fc51910161..387197057ec 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/access-groups/_components/AccessGroupsPage.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/access-groups/_components/AccessGroupsPage.tsx
@@ -59,8 +59,8 @@ export function AccessGroupsPage() {
   }
 
   return (
-    <div className="p-6 px-12">
-      <div className="mb-4">
+    <div className="p-8">
+      <div className="mb-6">
         <LegacyPageHeader
           title="Access Groups"
           subtitle="Manage resource permissions for your organization"
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/budgets/_components/budget_panel.tsx b/ui/litellm-dashboard/src/app/(dashboard)/budgets/_components/budget_panel.tsx
index 18b8e774aae..4dab122ca57 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/budgets/_components/budget_panel.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/budgets/_components/budget_panel.tsx
@@ -79,7 +79,7 @@ const BudgetPanel: React.FC<BudgetSettingsPageProps> = ({ accessToken }) => {
   };
 
   return (
-    <div className="flex h-full flex-col gap-4 p-6 px-12">
+    <div className="flex h-full flex-col gap-6 p-8">
       <LegacyPageHeader
         icon={<Wallet className="size-5" />}
         title="Budgets"
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/skills/_components/ClaudeCodePluginsPanel.tsx b/ui/litellm-dashboard/src/app/(dashboard)/skills/_components/ClaudeCodePluginsPanel.tsx
index f79b9a405cc..0706d4ddb9a 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/skills/_components/ClaudeCodePluginsPanel.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/skills/_components/ClaudeCodePluginsPanel.tsx
@@ -78,7 +78,7 @@ const ClaudeCodePluginsPanel: React.FC<ClaudeCodePluginsPanelProps> = ({ accessT
   };
 
   return (
-    <div className="w-full mx-auto flex-auto overflow-y-auto m-8 p-2">
+    <div className="p-8">
       {selectedSkill ? (
         <SkillDetail
           skill={selectedSkill}