Fix main content padding when sidebar collapses

[Copilot]

The main content area had fixed lg:pl-64 padding while the sidebar width transitions from w-64 (256px) to w-20 (80px) on collapse, creating a 176px gap.

Changes

• Created SidebarContext to share collapse state between Sidebar and Layout components
• Layout padding now adjusts dynamically: lg:pl-64 when expanded, lg:pl-20 when collapsed
• Sidebar uses shared context instead of component-local state

Implementation

// Layout.tsx - dynamic padding based on sidebar state
const { collapsed } = useSidebar();
<div className={`${collapsed ? "lg:pl-20" : "lg:pl-64"} transition-all duration-300 relative z-10`}>

The existing CSS transition provides smooth animation between states.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• plugins.dprint.dev
  • Triggering command: /home/REDACTED/.npm/_npx/e94364357ee2fa87/node_modules/dprint/dprint /home/REDACTED/.npm/_npx/e94364357ee2fa87/node_modules/dprint/dprint check apps/dashboard/src/context/SidebarContext.tsx apps/dashboard/src/App.tsx apps/dashboard/src/components/Layout.tsx apps/dashboard/src/components/layout/Sidebar.tsx (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Page style error.</issue_title>
<issue_description>

vibe-dashboard/apps/dashboard/src/components/Layout.tsx

Line 15 in f780e87

<div className="lg:pl-64 transition-all duration-300 relative z-10">

Change lg:pl-64 to lg:pl-20 when the sidebar collapses.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Page style error. #119

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.