Fix Sidebar Clipping When Closed (#4970)

fix sidebar clipping when closed

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={

frontend/src/components/Sidebar/index.jsx

@@ -34,10 +34,17 @@ export default function Sidebar() {
           width: showSidebar ? "292px" : "0px",
           paddingLeft: showSidebar ? "0px" : "16px",
         }}
-        className="transition-all duration-500"
+        className="relative transition-all duration-500"
       >
+        {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 justify-between w-[250px] min-w-[250px]">
+            <div className="flex w-[250px] min-w-[250px]">
               <Link to={paths.home()} aria-label="Home">
                 <img
                   src={logo}
@@ -45,12 +52,6 @@ export default function Sidebar() {
                   className={`rounded max-h-[24px] object-contain transition-opacity duration-500 ${showSidebar ? "opacity-100" : "opacity-0"}`}
                 />
               </Link>
-            {canToggleSidebar && (
-              <ToggleSidebarButton
-                showSidebar={showSidebar}
-                setShowSidebar={setShowSidebar}
-              />
-            )}
             </div>
           </div>
           <div
@@ -71,6 +72,7 @@ export default function Sidebar() {
               </div>
             </div>
           </div>
+        </div>
         {showingNewWsModal && <NewWorkspaceModal hideModal={hideNewWsModal} />}
       </div>
       <WorkspaceAndThreadTooltips />