From 5470f44ebb752bf9a2552392f8f4c649e98534da Mon Sep 17 00:00:00 2001 From: gorkem-bwl Date: Fri, 28 Aug 2026 23:40:41 -0400 Subject: [PATCH] fix(client): align sidebar group labels with the nav icons The group labels sat 11px left of the icon column and rendered at the same 13px as the nav items, so the groups read as indented blocks rather than headings over a list. The label used paddingLeft LAYOUT.LG (16px) while NavItem uses theme.spacing(5) (10px); matching NavItem puts the label flush with the icons. The eyebrow variant is 13px, so the size is overridden to typographyLevels.s (11px) to sit below the item text. Top padding goes from XS to SM for a little more separation above each group. Measured in the browser: label and first icon both start at x=12, label renders 11px against the items' 13px. Claude-Session: https://claude.ai/code/session_01AbYLvwpEaZFXktHVcqrFRd --- client/src/Components/sidebar/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/client/src/Components/sidebar/index.tsx b/client/src/Components/sidebar/index.tsx index 1d1257414..1821f5a79 100644 --- a/client/src/Components/sidebar/index.tsx +++ b/client/src/Components/sidebar/index.tsx @@ -6,6 +6,7 @@ import Typography from "@mui/material/Typography"; import List from "@mui/material/List"; import Divider from "@mui/material/Divider"; import { LAYOUT } from "@/Utils/Theme/constants"; +import { typographyLevels } from "@/Utils/Theme/Palette"; import { useSidebar } from "@/Hooks/useSidebar.js"; import { Logo } from "@/Components/sidebar/Logo"; import { getMenu, getAccountMenu } from "@/Components/sidebar/Menu"; @@ -107,8 +108,9 @@ export const Sidebar = () => { variant="eyebrow" component="div" color={theme.palette.text.disabled} - paddingLeft={theme.spacing(LAYOUT.LG)} - paddingTop={theme.spacing(LAYOUT.XS)} + fontSize={typographyLevels.s} + paddingLeft={theme.spacing(5)} + paddingTop={theme.spacing(LAYOUT.SM)} paddingBottom={theme.spacing(LAYOUT.XXS)} > {group.group}