From cbd59171a07b4d9e6b7838040fa2d817ea238bed Mon Sep 17 00:00:00 2001
From: Githelp AI Aagent <stian@githelp.app>
Date: Wed, 19 Aug 2026 15:56:41 +0000
Subject: [PATCH] feat: What to change: The left sidebar when collapsed (for
 all user categories)

Task: 166180d0
Source: slack
Requested by: U04E9DZ5ELF
---
 src/components/layout/public-support-sidebar.tsx | 2 +-
 src/components/layout/sidebar.tsx                | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/layout/public-support-sidebar.tsx b/src/components/layout/public-support-sidebar.tsx
index abf4655..8818196 100644
--- a/src/components/layout/public-support-sidebar.tsx
+++ b/src/components/layout/public-support-sidebar.tsx
@@ -74,7 +74,7 @@ export function PublicSupportSidebar({ className, activeTab, onTabChange }: Publ
       // the TopBar and the profile block stays pinned to the bottom.
       className={`${isCollapsed ? "w-16" : "w-64"} bg-[#FAFAFA] border-r border-sidebar-border flex flex-col transition-all duration-300 self-stretch overflow-hidden shrink-0 ${className}`}
     >
-      <div className="px-4 pt-4 pb-3 flex items-center justify-end min-h-[40px] shrink-0">
+      <div className={`${isCollapsed ? "justify-center" : "px-4 justify-end"} pt-4 pb-3 flex items-center min-h-[40px] shrink-0`}>
         {!isCollapsed ? (
           <Button
             variant="ghost"
diff --git a/src/components/layout/sidebar.tsx b/src/components/layout/sidebar.tsx
index a9aa81d..02b15ef 100644
--- a/src/components/layout/sidebar.tsx
+++ b/src/components/layout/sidebar.tsx
@@ -207,7 +207,7 @@ export function Sidebar({ className }: SidebarProps) {
       // `self-stretch` and `h-full` are equivalent — so this is a no-op there.
       className={`${isCollapsed ? "w-16" : "w-64"} bg-[#FAFAFA] border-r border-sidebar-border flex flex-col transition-all duration-300 self-stretch overflow-hidden shrink-0 ${className}`}
     >
-      <div className="px-4 pt-4 pb-3 flex items-center justify-end min-h-[40px] shrink-0">
+      <div className={`${isCollapsed ? "justify-center px-0" : "justify-end px-4"} pt-4 pb-3 flex items-center min-h-[40px] shrink-0`}>
         {!isCollapsed ? (
           <Button
             variant="ghost"
@@ -392,7 +392,7 @@ export function Sidebar({ className }: SidebarProps) {
                 ) : (
                   <Link href={item.href} onClick={() => setExpandedItems([])}>
                     <div
-                      className={`flex items-center gap-3 px-3 py-2.5 min-h-[40px] rounded-md text-sm font-medium transition-colors ${
+                      className={`flex items-center ${isCollapsed ? "justify-center" : "gap-3"} px-3 py-2.5 min-h-[40px] rounded-md text-sm font-medium transition-colors ${
                         isActive ? activeClasses : inactiveClasses
                       }`}
                       title={isCollapsed ? item.name : undefined}
@@ -413,7 +413,7 @@ export function Sidebar({ className }: SidebarProps) {
       <div className="px-3 py-2.5 border-t border-sidebar-border space-y-0.5 shrink-0">
         {bottomItems.map((item) => {
           const isActive = item.href !== "#" && pathname === item.href
-          const className = `flex items-center gap-3 px-3 py-2.5 min-h-[40px] text-sm font-medium rounded-md cursor-pointer transition-colors ${
+          const className = `flex items-center ${isCollapsed ? "justify-center" : "gap-3"} px-3 py-2.5 min-h-[40px] text-sm font-medium rounded-md cursor-pointer transition-colors ${
             isActive ? "bg-bg-subtle text-sidebar-foreground" : "text-[#55555E] hover:bg-bg-subtle hover:text-sidebar-foreground"
           }`
           const content = (