From 7797f7cc0cb8f8d747a11287231db54e1e6ce8cf Mon Sep 17 00:00:00 2001
From: Sundram Gupta <sundram@usebruno.com>
Date: Thu, 23 Jul 2026 00:06:01 +0530
Subject: [PATCH 1/2] fix(oc-docs): tighten playground dock switcher padding to
 1px

---
 .../src/components/Playground/DockSwitcher/StyledWrapper.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/oc-docs/src/components/Playground/DockSwitcher/StyledWrapper.ts b/packages/oc-docs/src/components/Playground/DockSwitcher/StyledWrapper.ts
index 37d0e58c..9b7bd11c 100644
--- a/packages/oc-docs/src/components/Playground/DockSwitcher/StyledWrapper.ts
+++ b/packages/oc-docs/src/components/Playground/DockSwitcher/StyledWrapper.ts
@@ -4,7 +4,7 @@ export const StyledWrapper = styled.div`
   display: inline-flex;
   align-items: center;
   gap: 2px;
-  padding: 3px;
+  padding: 1px;
   border: 1px solid var(--oc-border-border0);
   border-radius: var(--oc-radius);
   background-color: var(--oc-background-surface-bright);

From d030e23b5132a8c49b0956a917819ada18cb38a0 Mon Sep 17 00:00:00 2001
From: Sundram Gupta <sundram@usebruno.com>
Date: Thu, 23 Jul 2026 00:06:01 +0530
Subject: [PATCH 2/2] fix(oc-docs): widen sidebar selected-item highlight left
 pad to 8px

---
 .../Sidebar/SidebarNavLink/SidebarNavLink.spec.tsx   |  8 ++++----
 .../Docs/Sidebar/SidebarNavLink/SidebarNavLink.tsx   | 12 +++++++-----
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/oc-docs/src/components/Docs/Sidebar/SidebarNavLink/SidebarNavLink.spec.tsx b/packages/oc-docs/src/components/Docs/Sidebar/SidebarNavLink/SidebarNavLink.spec.tsx
index 0363a937..c2e05b3a 100644
--- a/packages/oc-docs/src/components/Docs/Sidebar/SidebarNavLink/SidebarNavLink.spec.tsx
+++ b/packages/oc-docs/src/components/Docs/Sidebar/SidebarNavLink/SidebarNavLink.spec.tsx
@@ -52,11 +52,11 @@ describe('SidebarNavLink', () => {
     expect(html).not.toContain('navlink-label mono');
   });
 
-  it('indents by level via margin (chevron + gap step of 19px) with a 4px inner pad', () => {
+  it('indents by level via margin (chevron + gap step of 19px) with a uniform 8px inner pad', () => {
     const html = renderToStaticMarkup(<SidebarNavLink label="Nested" level={2} />);
-    // level*19 + 4 = 42px -> 42/16 = 2.625rem margin; the fixed 4px (0.25rem) pad
-    // restores the level*19+8 glyph offset.
+    // level*19 + 4 = 42px -> 42/16 = 2.625rem margin; the 8px (0.5rem) pad is uniform
+    // across folders and leaves so glyphs line up under their parent.
     expect(html).toContain('margin-left:2.625rem');
-    expect(html).toContain('padding-left:0.25rem');
+    expect(html).toContain('padding-left:0.5rem');
   });
 });
diff --git a/packages/oc-docs/src/components/Docs/Sidebar/SidebarNavLink/SidebarNavLink.tsx b/packages/oc-docs/src/components/Docs/Sidebar/SidebarNavLink/SidebarNavLink.tsx
index d70e0bc2..7880842b 100644
--- a/packages/oc-docs/src/components/Docs/Sidebar/SidebarNavLink/SidebarNavLink.tsx
+++ b/packages/oc-docs/src/components/Docs/Sidebar/SidebarNavLink/SidebarNavLink.tsx
@@ -52,13 +52,15 @@ const SidebarNavLink: React.FC<SidebarNavLinkProps> = ({
   return (
     <StyledWrapper
       className={classes}
-      // Indent with margin (outside the highlight) plus a small 4px inner pad, so
-      // the highlight starts just left of the chevron instead of filling the empty
-      // indent, while each level's glyph still lines up under its parent. Right
-      // margin keeps the highlight short of the edge: 8px at root, 4px when nested.
+      // Indent with margin (outside the highlight) plus an 8px inner pad, so the
+      // highlight sits a little left of the chevron / method badge instead of filling
+      // the empty indent. The pad is uniform across folders and leaf requests so each
+      // level's glyph still lines up under its parent (the 19px chevron+gap matches one
+      // indent step). Right margin keeps the highlight short of the edge: 8px at root,
+      // 4px when nested.
       style={{
         marginLeft: `${(level * 19 + 4) / 16}rem`,
-        paddingLeft: '0.25rem',
+        paddingLeft: '0.5rem',
         marginRight: level === 0 ? '0.5rem' : '0.25rem'
       }}
       data-testid={testId}