From 9d7c224ad2c979a58142556ebb0544e45bb8cef6 Mon Sep 17 00:00:00 2001
From: Chris Chen <yuanson.ch@gmail.com>
Date: Tue, 23 Jun 2026 13:53:57 -0700
Subject: [PATCH] Update user-portal.component.scss

---
 .../user-portal/user-portal.component.scss    | 33 +++++++++----------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/APP/src/app/portals/user-portal/user-portal.component.scss b/APP/src/app/portals/user-portal/user-portal.component.scss
index 2ff7151..3006788 100644
--- a/APP/src/app/portals/user-portal/user-portal.component.scss
+++ b/APP/src/app/portals/user-portal/user-portal.component.scss
@@ -336,10 +336,17 @@
     transition: all 0.2s ease;
     position: relative;
     margin: 0.125rem 0;
+    // Suppress the grey native tap-flash on touch devices; the active state below
+    // is the intended feedback.
+    -webkit-tap-highlight-color: transparent;
 
-    &:hover {
-        background: rgba(30, 64, 175, 0.1);
-        color: #1e40af;
+    // Only apply hover on devices that can truly hover (desktop). On touch, hover
+    // styles "stick" after a tap and leave a muddy box on the last-tapped item.
+    @media (hover: hover) {
+        &:hover {
+            background: rgba(30, 64, 175, 0.1);
+            color: #1e40af;
+        }
     }
 
     &.active {
@@ -612,6 +619,12 @@
         display: block;
     }
 
+    // The top-header hamburger toggles the drawer on mobile, so the duplicate
+    // toggle inside the open drawer header is redundant — hide it.
+    .sidebar-toggle {
+        display: none;
+    }
+
     .page-content {
         padding: 1rem;
     }
@@ -635,20 +648,6 @@
     }
 }
 
-// Overlay for mobile sidebar
-@media (max-width: 768px) {
-    .sidebar:not(.collapsed)::before {
-        content: "";
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: rgba(0, 0, 0, 0.5);
-        z-index: -1;
-    }
-}
-
 // Desktop sidebar collapsed state
 @media (min-width: 769px) {
     .sidebar.collapsed {