From 9c2a1766f603dea537f53a32fb7b64a88c6f7761 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Thu, 22 Jan 2026 04:27:34 +0530
Subject: [PATCH] fix: always show the 3-dot and the folder in mobile view

---
 surfsense_web/components/layout/ui/sidebar/ChatListItem.tsx   | 4 ++--
 surfsense_web/components/layout/ui/sidebar/SidebarSection.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/surfsense_web/components/layout/ui/sidebar/ChatListItem.tsx b/surfsense_web/components/layout/ui/sidebar/ChatListItem.tsx
index 7f5ede04c..5dd9c2cfa 100644
--- a/surfsense_web/components/layout/ui/sidebar/ChatListItem.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/ChatListItem.tsx
@@ -39,11 +39,11 @@ export function ChatListItem({ name, isActive, onClick, onDelete }: ChatListItem
 			</button>
 
 			{/* Actions dropdown */}
-			<div className="absolute right-1 top-1/2 -translate-y-1/2 opacity-0 group-hover/item:opacity-100 transition-opacity">
+			<div className="absolute right-1 top-1/2 -translate-y-1/2 opacity-100 md:opacity-0 md:group-hover/item:opacity-100 transition-opacity">
 				<DropdownMenu>
 					<DropdownMenuTrigger asChild>
 						<Button variant="ghost" size="icon" className="h-6 w-6">
-							<MoreHorizontal className="h-3.5 w-3.5" />
+							<MoreHorizontal className="h-3.5 w-3.5 text-muted-foreground" />
 							<span className="sr-only">{t("more_options")}</span>
 						</Button>
 					</DropdownMenuTrigger>
diff --git a/surfsense_web/components/layout/ui/sidebar/SidebarSection.tsx b/surfsense_web/components/layout/ui/sidebar/SidebarSection.tsx
index 52d681199..0ceafc113 100644
--- a/surfsense_web/components/layout/ui/sidebar/SidebarSection.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/SidebarSection.tsx
@@ -37,7 +37,7 @@ export function SidebarSection({
 
 				{/* Action button - visible on hover (always visible on mobile) */}
 				{action && (
-					<div className="shrink-0 opacity-0 group-hover/section:opacity-100 transition-opacity pr-1 flex items-center">
+					<div className="shrink-0 opacity-100 md:opacity-0 md:group-hover/section:opacity-100 transition-opacity pr-1 flex items-center">
 						{action}
 					</div>
 				)}