@visns-studio/visns-components 5.11.3 → 5.11.4

package/src/components/crm/styles/Navigation.module.scss

@@ -13,6 +13,16 @@
         line-height: 1.45;
         margin-right: 1rem;
 
+        .logoButton {
+            background: none;
+            border: none;
+            padding: 0;
+            margin: 0;
+            cursor: pointer;
+            width: 100%;
+            display: block;
+        }
+
         img {
             width: 100%;
             height: auto;
@@ -89,7 +99,8 @@
         }
 
         a,
-        span {
+        span,
+        button {
             font-size: 0.9rem;
             display: flex;
             flex-wrap: nowrap;
@@ -103,11 +114,16 @@
             outline: none;
             border-radius: var(--br);
             transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
+            background: none;
+            border: none;
+            cursor: pointer;
+            font-family: inherit;
         }
 
         &.nav-item {
             a,
-            span {
+            span,
+            button {
                 color: var(--tertiary-color);
             }
 
@@ -120,7 +136,9 @@
             &:hover a,
             &.active a,
             &:hover span,
-            &.active span {
+            &.active span,
+            &:hover button,
+            &.active button {
                 background: rgba(var(--secondary-rgb), 1);
                 color: var(--tertiary-color);
             }
@@ -175,7 +193,8 @@
                         border-radius: 0;
                     }
 
-                    > a {
+                    > a,
+                    > button {
                         width: 100%;
                         padding: 8px 20px;
                         box-sizing: border-box;
@@ -187,9 +206,14 @@
                         background: rgba(var(--primary-rgb), 1);
                         color: var(--tertiary-color) !important;
                         position: relative;
+                        border: none;
+                        cursor: pointer;
+                        font-family: inherit;
+                        text-align: left;
                     }
 
-                    &:hover a {
+                    &:hover a,
+                    &:hover button {
                         background: rgba(var(--primary-rgb), 1);
                         color: var(--tertiary-color);
                     }
@@ -305,7 +329,7 @@
     width: max-content;
     justify-self: end;
     position: relative;
-    z-index: 100; // Ensure proper stacking above modal content
+    z-index: 1000; // Higher z-index to stay above sticky header
 
     > ul {
         list-style: none;
@@ -318,7 +342,7 @@
         justify-content: flex-end;
         gap: 2px;
         position: relative;
-        z-index: 101;
+        z-index: 1001;
 
         li {
             margin: 0 2px;
@@ -329,7 +353,7 @@
             min-width: 32px; // Reduced from 40px for better spacing
             min-height: 32px; // Reduced from 40px for better spacing
             justify-content: center;
-            z-index: 102;
+            z-index: 1002;
         }
 
         a {
@@ -338,7 +362,7 @@
             padding: 0.35rem;
             text-decoration: none;
             background: none;
-            border: 2px solid var(--primary-color);
+            border: 1px solid var(--primary-color);
             border-radius: 100%;
             transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); // Reduced duration
             display: flex;
@@ -347,9 +371,16 @@
             width: 32px; // Reduced from 36px
             height: 32px; // Reduced from 36px
             position: relative;
-            z-index: 103;
-            transform: translateZ(0); // Force hardware acceleration
+            z-index: 1003;
+            transform: translateZ(0) translateX(0) translateY(0); // Force compositor layer
             will-change: transform, background-color; // Optimize for animations
+            /* Remove contain: layout to prevent rendering optimization conflicts */
+            outline: none;
+            appearance: none;
+            backface-visibility: hidden; // Prevent rendering glitches
+            -webkit-backface-visibility: hidden;
+            /* Force onto own layer to prevent culling */
+            isolation: isolate;
 
             &:hover,
             &.active {
@@ -379,9 +410,13 @@
             outline: none;
             appearance: none;
             position: relative;
-            z-index: 103;
-            transform: translateZ(0); // Force hardware acceleration
+            z-index: 1003;
+            transform: translateZ(0) translateX(0) translateY(0); // Force compositor layer
             will-change: transform, background-color; // Optimize for animations
+            /* Remove contain: layout to prevent rendering optimization conflicts */
+            backface-visibility: hidden; // Prevent rendering glitches
+            -webkit-backface-visibility: hidden;
+            isolation: isolate;
 
             &:hover,
             &.active {
@@ -400,7 +435,7 @@
     width: max-content;
     justify-self: end;
     position: relative;
-    z-index: 100; // Ensure proper stacking above modal content
+    z-index: 1000; // Higher z-index to stay above sticky header
 
     > ul {
         list-style: none;
@@ -413,7 +448,7 @@
         justify-content: flex-end;
         gap: 2px;
         position: relative;
-        z-index: 101;
+        z-index: 1001;
 
         li {
             margin: 0 2px;
@@ -424,7 +459,7 @@
             min-width: 32px; // Reduced from 40px for better spacing
             min-height: 32px; // Reduced from 40px for better spacing
             justify-content: center;
-            z-index: 102;
+            z-index: 1002;
         }
 
         a {
@@ -433,7 +468,7 @@
             padding: 0.35rem;
             text-decoration: none;
             background: none;
-            border: 2px solid var(--primary-color);
+            border: 1px solid var(--primary-color);
             border-radius: 100%;
             transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); // Reduced duration
             display: flex;
@@ -442,9 +477,16 @@
             width: 32px; // Reduced from 36px
             height: 32px; // Reduced from 36px
             position: relative;
-            z-index: 103;
-            transform: translateZ(0); // Force hardware acceleration
+            z-index: 1003;
+            transform: translateZ(0) translateX(0) translateY(0); // Force compositor layer
             will-change: transform, background-color; // Optimize for animations
+            /* Remove contain: layout to prevent rendering optimization conflicts */
+            outline: none;
+            appearance: none;
+            backface-visibility: hidden; // Prevent rendering glitches
+            -webkit-backface-visibility: hidden;
+            /* Force onto own layer to prevent culling */
+            isolation: isolate;
 
             &:hover,
             &.active {
@@ -474,9 +516,13 @@
             outline: none;
             appearance: none;
             position: relative;
-            z-index: 103;
-            transform: translateZ(0); // Force hardware acceleration
+            z-index: 1003;
+            transform: translateZ(0) translateX(0) translateY(0); // Force compositor layer
             will-change: transform, background-color; // Optimize for animations
+            /* Remove contain: layout to prevent rendering optimization conflicts */
+            backface-visibility: hidden; // Prevent rendering glitches
+            -webkit-backface-visibility: hidden;
+            isolation: isolate;
 
             &:hover,
             &.active {
@@ -687,15 +733,17 @@
         flex-wrap: nowrap;
         justify-content: space-between;
         align-items: center;
-        overflow-x: auto; /* Allow horizontal scrolling if needed */
+        overflow: visible; /* Allow icons to remain visible */
         -webkit-overflow-scrolling: touch;
         scrollbar-width: none; /* Firefox */
         -ms-overflow-style: none; /* IE and Edge */
         position: sticky;
         top: 0;
         z-index: 995;
-        contain: layout; /* Prevent layout shifts */
+        /* Remove contain: layout as it can cause rendering issues with child elements */
         transform: translateZ(0); /* Force hardware acceleration */
+        backface-visibility: hidden; /* Prevent rendering glitches */
+        -webkit-backface-visibility: hidden;
 
         /* Hide scrollbar for Chrome/Safari/Opera */
         &::-webkit-scrollbar {
@@ -1040,6 +1088,30 @@
     }
 }
 
+// Debug styles for troubleshooting icon disappearing
+.debug-icons {
+    a, button {
+        border: 2px solid red !important;
+        background: rgba(255, 0, 0, 0.1) !important;
+        
+        &::before {
+            content: 'A' !important;
+            position: absolute !important;
+            top: -15px !important;
+            left: 0 !important;
+            font-size: 10px !important;
+            background: red !important;
+            color: white !important;
+            padding: 2px !important;
+        }
+    }
+    
+    button::before {
+        content: 'B' !important;
+        background: blue !important;
+    }
+}
+
 @media (max-width: 960px) {
     .hwrap {
         grid-template-columns: auto 1fr auto;