From 20d1d08b5ec3c4c7322745955935fcf3882a0874 Mon Sep 17 00:00:00 2001
From: Nguyen Ngo <ngodanguyen@gmail.com>
Date: Sat, 18 Apr 2026 14:57:21 -0400
Subject: [PATCH] 04/18 fix toggle button of sidebar 3

---
 app/static/css/app.css | 44 +++++++++++++++++++++++++++---------------
 1 file changed, 28 insertions(+), 16 deletions(-)

diff --git a/app/static/css/app.css b/app/static/css/app.css
index 21e5771..ee8cec7 100644
--- a/app/static/css/app.css
+++ b/app/static/css/app.css
@@ -303,7 +303,7 @@ ul {
 
 /* ── Sidebar ─────────────────────────────────────────────────────── */
 .sidebar {
-  width: 220px;
+  width: 240px;
   flex-shrink: 0;
   background: var(--color-sidebar-bg);
   color: var(--color-sidebar-text);
@@ -314,7 +314,7 @@ ul {
 }
 
 .sidebar.collapsed {
-  width: 56px;
+  width: 72px;
 }
 
 /* Sidebar must not clip its children when collapsed — tooltips need to escape */
@@ -433,39 +433,46 @@ ul {
   color: #fff;
 }
 .sidebar-icon {
-  font-size: 16px;
+  font-size: 20px;
   flex-shrink: 0;
+  width: 22px;
+  text-align: center;
 }
 
-/* Labels — fade out when collapsed */
+/* Labels — fade out when collapsed; use max-width so icon stays visible */
 .sidebar-label {
-  transition: opacity 0.15s ease;
+  transition:
+    opacity 0.15s ease,
+    max-width 0.22s ease;
+  max-width: 200px;
+  overflow: hidden;
 }
 .sidebar.collapsed .sidebar-label {
   opacity: 0;
+  max-width: 0;
 }
 .sidebar.collapsed .sidebar-item {
   justify-content: center;
-  padding: 9px 0;
-  overflow: visible; /* allow tooltip to escape */
+  padding: 10px 0;
+  overflow: visible;
 }
 
-/* Tooltip — shown on hover in collapsed state */
+/* Tooltip — appears to the right of the 72px rail */
 .sidebar.collapsed .sidebar-item::after {
   content: attr(data-tooltip);
   position: fixed;
-  left: 64px;
+  left: 80px;
   background: #111827;
   color: #fff;
   font-size: 12px;
-  padding: 4px 10px;
-  border-radius: 4px;
+  padding: 5px 10px;
+  border-radius: 5px;
   white-space: nowrap;
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.12s ease;
   z-index: 1000;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
 }
 .sidebar.collapsed .sidebar-item:hover::after {
   opacity: 1;
@@ -1342,18 +1349,23 @@ ul {
 /* ── Responsive ──────────────────────────────────────────────────── */
 @media (max-width: 640px) {
   .sidebar {
-    width: 56px;
+    width: 72px;
     overflow-y: visible;
   }
   .sidebar-header .logo-text,
-  .sidebar-label,
+  .sidebar-label {
+    opacity: 0;
+    max-width: 0;
+  }
   .sidebar-section-header {
     opacity: 0;
-    width: 0;
+    pointer-events: none;
+    height: 0;
+    padding: 0;
   }
   .sidebar-item {
     justify-content: center;
-    padding: 12px 0;
+    padding: 10px 0;
   }
   .vault-header {
     padding: 12px 16px;