fix(oc-docs): sidebar highlight + dock switcher padding tweaks

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');
   });
 });

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}

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);