From e5f7e87f42bb1cb1a1f7157130fcee8be4910aa1 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sat, 31 Jan 2026 23:33:20 +0530
Subject: [PATCH] refactor: update sidebar layout for shared and private chats
 to optimize space usage

---
 .../components/layout/ui/sidebar/Sidebar.tsx   | 11 ++++++-----
 .../layout/ui/sidebar/SidebarSection.tsx       | 18 +++++++++---------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx b/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
index 070462341..db04bf6dc 100644
--- a/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
@@ -125,11 +125,12 @@ export function Sidebar({
 				<div className="flex-1 w-[60px]" />
 			) : (
 				<div className="flex-1 flex flex-col gap-1 py-2 w-[240px] min-h-0 overflow-hidden">
-					{/* Shared Chats Section - takes half the space */}
+					{/* Shared Chats Section - takes only space needed, max 50% */}
 					<SidebarSection
 						title={t("shared_chats")}
 						defaultOpen={true}
-						fillHeight={true}
+						fillHeight={false}
+						className="shrink-0 max-h-[50%] flex flex-col"
 						action={
 							onViewAllSharedChats ? (
 								<Tooltip>
@@ -151,9 +152,9 @@ export function Sidebar({
 						}
 					>
 						{sharedChats.length > 0 ? (
-							<div className="relative flex-1 min-h-0">
+							<div className="relative min-h-0 flex-1">
 								<div
-									className={`flex flex-col gap-0.5 h-full overflow-y-auto scrollbar-thin scrollbar-thumb-muted-foreground/20 scrollbar-track-transparent ${sharedChats.length > 4 ? "pb-8" : ""}`}
+									className={`flex flex-col gap-0.5 max-h-full overflow-y-auto scrollbar-thin scrollbar-thumb-muted-foreground/20 scrollbar-track-transparent ${sharedChats.length > 4 ? "pb-8" : ""}`}
 								>
 									{sharedChats.slice(0, 20).map((chat) => (
 										<ChatListItem
@@ -177,7 +178,7 @@ export function Sidebar({
 						)}
 					</SidebarSection>
 
-					{/* Private Chats Section - takes half the space */}
+					{/* Private Chats Section - fills remaining space */}
 					<SidebarSection
 						title={t("chats")}
 						defaultOpen={true}
diff --git a/surfsense_web/components/layout/ui/sidebar/SidebarSection.tsx b/surfsense_web/components/layout/ui/sidebar/SidebarSection.tsx
index bebb357ef..6baf3b678 100644
--- a/surfsense_web/components/layout/ui/sidebar/SidebarSection.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/SidebarSection.tsx
@@ -30,7 +30,7 @@ export function SidebarSection({
 		<Collapsible
 			open={isOpen}
 			onOpenChange={setIsOpen}
-			className={cn("overflow-hidden", fillHeight && "flex flex-col flex-1 min-h-0", className)}
+			className={cn("overflow-hidden", fillHeight && "flex flex-col min-h-0", fillHeight && isOpen && "flex-1", className)}
 		>
 			<div className="flex items-center group/section shrink-0">
 				<CollapsibleTrigger className="flex flex-1 items-center gap-1.5 px-2 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors min-w-0">
@@ -56,15 +56,15 @@ export function SidebarSection({
 				)}
 			</div>
 
-			<CollapsibleContent
-				className={cn("overflow-hidden", fillHeight && "flex-1 flex flex-col min-h-0")}
+		<CollapsibleContent
+			className={cn("overflow-hidden flex-1 flex flex-col min-h-0")}
+		>
+			<div
+				className={cn("px-2 pb-2 flex-1 flex flex-col min-h-0 overflow-hidden")}
 			>
-				<div
-					className={cn("px-2 pb-2", fillHeight && "flex-1 flex flex-col min-h-0 overflow-hidden")}
-				>
-					{children}
-				</div>
-			</CollapsibleContent>
+				{children}
+			</div>
+		</CollapsibleContent>
 		</Collapsible>
 	);
 }