From e80569906cf20fc5f88fd63743623f257384fb74 Mon Sep 17 00:00:00 2001
From: PhuocNTB <phuocntb@mieusoft.com>
Date: Fri, 3 Jul 2026 23:01:57 +0700
Subject: [PATCH] fix ui

---
 management/src/App.tsx   | 28 ++++++++++++++--------------
 management/src/index.css | 15 ++++++---------
 2 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/management/src/App.tsx b/management/src/App.tsx
index bd80eb4..80fc0a4 100644
--- a/management/src/App.tsx
+++ b/management/src/App.tsx
@@ -345,21 +345,21 @@ function App() {
             Đăng xuất
           </button>
         </div>
-      </aside>
 
-      <button
-        type="button"
-        className={`sidebar-edge-toggle${sidebarCollapsed ? ' sidebar-edge-toggle--collapsed' : ''}`}
-        onClick={toggleSidebarCollapse}
-        title={sidebarCollapsed ? 'Mở rộng menu' : 'Thu gọn menu'}
-      >
-        <svg viewBox="0 0 10 18" width="10" height="18" fill="currentColor">
-          {sidebarCollapsed
-            ? <path d="M1 1 L9 9 L1 17" />
-            : <path d="M9 1 L1 9 L9 17" />
-          }
-        </svg>
-      </button>
+        <button
+          type="button"
+          className="sidebar-edge-toggle"
+          onClick={toggleSidebarCollapse}
+          title={sidebarCollapsed ? 'Mở rộng menu' : 'Thu gọn menu'}
+        >
+          <svg viewBox="0 0 10 18" width="10" height="18" fill="currentColor">
+            {sidebarCollapsed
+              ? <path d="M1 1 L9 9 L1 17" />
+              : <path d="M9 1 L1 9 L9 17" />
+            }
+          </svg>
+        </button>
+      </aside>
 
       <main className={`main-content${sidebarCollapsed ? ' main-content--full' : ''}`}>
         <div className="page-viewport">
diff --git a/management/src/index.css b/management/src/index.css
index c940b77..bf496bf 100644
--- a/management/src/index.css
+++ b/management/src/index.css
@@ -84,7 +84,7 @@ body {
   position: fixed;
   height: 100vh;
   max-height: 100vh;
-  overflow: hidden;
+  overflow: visible;
   z-index: 10;
   box-shadow: var(--shadow-sm);
   transition: transform 0.28s cubic-bezier(.4,0,.2,1), width 0.28s cubic-bezier(.4,0,.2,1);
@@ -97,8 +97,8 @@ body {
 
 /* ── Sidebar Edge Toggle (triangle tab at mid-right edge) ── */
 .sidebar-edge-toggle {
-  position: fixed;
-  left: 272px;
+  position: absolute;
+  right: -16px;
   top: 50%;
   transform: translateY(-50%);
   z-index: 11;
@@ -114,8 +114,9 @@ body {
   cursor: pointer;
   color: var(--text-muted);
   padding: 0;
-  transition: left 0.28s cubic-bezier(.4,0,.2,1), background 0.15s, color 0.15s;
+  transition: background 0.15s, color 0.15s;
   box-shadow: 2px 0 6px rgba(0,0,0,0.06);
+  pointer-events: auto;
 }
 
 .sidebar-edge-toggle:hover {
@@ -123,10 +124,6 @@ body {
   color: var(--accent);
 }
 
-.sidebar-edge-toggle--collapsed {
-  left: 0;
-}
-
 .sidebar > nav {
   flex: 1;
   min-height: 0;
@@ -4706,7 +4703,7 @@ input:checked + .slider:before {
   }
 
   /* Show edge toggle when sidebar is open on mobile */
-  .sidebar--open ~ .sidebar-edge-toggle {
+  .sidebar.sidebar--open .sidebar-edge-toggle {
     display: flex;
   }