michael/merlyn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Sidebar Clipping When Closed (#4970)

Browse Source 
fix sidebar clipping when closed
This commit is contained in:
Marcello Fitton 2026-02-10 08:55:38 -08:00 committed by GitHub
parent 1c91d369c3
commit 48e6e268a7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 33 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/Sidebar/SidebarToggle/index.jsx
View File

@ -75,7 +75,7 @@ export function ToggleSidebarButton({ showSidebar, setShowSidebar }) {
<> <>
<button <button
type="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)} onClick={() => setShowSidebar((prev) => !prev)}
data-tooltip-id="sidebar-toggle" data-tooltip-id="sidebar-toggle"
data-tooltip-content={ data-tooltip-content={

62
frontend/src/components/Sidebar/index.jsx
View File

@ -34,39 +34,41 @@ export default function Sidebar() {
width: showSidebar ? "292px" : "0px", width: showSidebar ? "292px" : "0px",
paddingLeft: showSidebar ? "0px" : "16px", 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]"> {canToggleSidebar && (
<div className="flex justify-between w-[250px] min-w-[250px]"> <ToggleSidebarButton
<Link to={paths.home()} aria-label="Home"> showSidebar={showSidebar}
<img setShowSidebar={setShowSidebar}
src={logo} />
alt="Logo" )}
className={`rounded max-h-[24px] object-contain transition-opacity duration-500 ${showSidebar ? "opacity-100" : "opacity-0"}`} <div className="overflow-hidden h-full">
/> <div className="flex shrink-0 w-full justify-center my-[18px]">
</Link> <div className="flex w-[250px] min-w-[250px]">
{canToggleSidebar && ( <Link to={paths.home()} aria-label="Home">
<ToggleSidebarButton <img
showSidebar={showSidebar} src={logo}
setShowSidebar={setShowSidebar} alt="Logo"
/> className={`rounded max-h-[24px] object-contain transition-opacity duration-500 ${showSidebar ? "opacity-100" : "opacity-0"}`}
)} />
</Link>
</div>
</div> </div>
</div> <div
<div ref={sidebarRef}
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)]"
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 flex-col h-full overflow-hidden"> <div className="flex-grow flex flex-col min-w-[235px] min-h-0">
<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="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]">
<div className="flex flex-col gap-y-[14px]"> <SearchBox user={user} showNewWsModal={showNewWsModal} />
<SearchBox user={user} showNewWsModal={showNewWsModal} /> <ActiveWorkspaces />
<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>
<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> </div>
</div> </div>