From 48e6e268a711857eb738995efcdbffdb015e9e44 Mon Sep 17 00:00:00 2001
From: Marcello Fitton <106866560+angelplusultra@users.noreply.github.com>
Date: Tue, 10 Feb 2026 08:55:38 -0800
Subject: [PATCH] Fix Sidebar Clipping When Closed (#4970)

fix sidebar clipping when closed
---
 .../Sidebar/SidebarToggle/index.jsx           |  2 +-
 frontend/src/components/Sidebar/index.jsx     | 62 ++++++++++---------
 2 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/Sidebar/SidebarToggle/index.jsx b/frontend/src/components/Sidebar/SidebarToggle/index.jsx
index a0f47b6b4..30aac82ce 100644
--- a/frontend/src/components/Sidebar/SidebarToggle/index.jsx
+++ b/frontend/src/components/Sidebar/SidebarToggle/index.jsx
@@ -75,7 +75,7 @@ export function ToggleSidebarButton({ showSidebar, setShowSidebar }) {
     <>
       <button
         type="button"
-        className={`hidden md:block border-none bg-transparent outline-none ring-0 transition-left duration-500 ${showSidebar ? "left-[247px]" : "absolute top-[20px] left-[30px] z-10"}`}
+        className={`hidden md:block border-none bg-transparent outline-none ring-0 absolute transition-all duration-500 z-10 ${showSidebar ? "top-[18px] left-[248px]" : "top-[20px] left-[30px]"}`}
         onClick={() => setShowSidebar((prev) => !prev)}
         data-tooltip-id="sidebar-toggle"
         data-tooltip-content={
diff --git a/frontend/src/components/Sidebar/index.jsx b/frontend/src/components/Sidebar/index.jsx
index 34eccb118..edbd2cafb 100644
--- a/frontend/src/components/Sidebar/index.jsx
+++ b/frontend/src/components/Sidebar/index.jsx
@@ -34,39 +34,41 @@ export default function Sidebar() {
           width: showSidebar ? "292px" : "0px",
           paddingLeft: showSidebar ? "0px" : "16px",
         }}
-        className="transition-all duration-500"
+        className="relative transition-all duration-500"
       >
-        <div className="flex shrink-0 w-full justify-center my-[18px]">
-          <div className="flex justify-between w-[250px] min-w-[250px]">
-            <Link to={paths.home()} aria-label="Home">
-              <img
-                src={logo}
-                alt="Logo"
-                className={`rounded max-h-[24px] object-contain transition-opacity duration-500 ${showSidebar ? "opacity-100" : "opacity-0"}`}
-              />
-            </Link>
-            {canToggleSidebar && (
-              <ToggleSidebarButton
-                showSidebar={showSidebar}
-                setShowSidebar={setShowSidebar}
-              />
-            )}
+        {canToggleSidebar && (
+          <ToggleSidebarButton
+            showSidebar={showSidebar}
+            setShowSidebar={setShowSidebar}
+          />
+        )}
+        <div className="overflow-hidden h-full">
+          <div className="flex shrink-0 w-full justify-center my-[18px]">
+            <div className="flex w-[250px] min-w-[250px]">
+              <Link to={paths.home()} aria-label="Home">
+                <img
+                  src={logo}
+                  alt="Logo"
+                  className={`rounded max-h-[24px] object-contain transition-opacity duration-500 ${showSidebar ? "opacity-100" : "opacity-0"}`}
+                />
+              </Link>
+            </div>
           </div>
-        </div>
-        <div
-          ref={sidebarRef}
-          className="relative m-[16px] rounded-[16px] bg-theme-bg-sidebar border-[2px] border-theme-sidebar-border light:border-none min-w-[250px] p-[10px] h-[calc(100%-76px)]"
-        >
-          <div className="flex flex-col h-full overflow-hidden">
-            <div className="flex-grow flex flex-col min-w-[235px] min-h-0">
-              <div className="relative h-[calc(100%-60px)] flex flex-col w-full justify-between pt-[10px] overflow-y-scroll no-scroll">
-                <div className="flex flex-col gap-y-[14px]">
-                  <SearchBox user={user} showNewWsModal={showNewWsModal} />
-                  <ActiveWorkspaces />
+          <div
+            ref={sidebarRef}
+            className="relative m-[16px] rounded-[16px] bg-theme-bg-sidebar border-[2px] border-theme-sidebar-border light:border-none min-w-[250px] p-[10px] h-[calc(100%-76px)]"
+          >
+            <div className="flex flex-col h-full overflow-hidden">
+              <div className="flex-grow flex flex-col min-w-[235px] min-h-0">
+                <div className="relative h-[calc(100%-60px)] flex flex-col w-full justify-between pt-[10px] overflow-y-scroll no-scroll">
+                  <div className="flex flex-col gap-y-[14px]">
+                    <SearchBox user={user} showNewWsModal={showNewWsModal} />
+                    <ActiveWorkspaces />
+                  </div>
+                </div>
+                <div className="absolute bottom-0 left-0 right-0 pb-3 rounded-b-[16px] bg-theme-bg-sidebar bg-opacity-80 backdrop-filter backdrop-blur-md z-10">
+                  <Footer />
                 </div>
-              </div>
-              <div className="absolute bottom-0 left-0 right-0 pb-3 rounded-b-[16px] bg-theme-bg-sidebar bg-opacity-80 backdrop-filter backdrop-blur-md z-10">
-                <Footer />
               </div>
             </div>
           </div>