Editing tabs and the months modal

resources/views/app.blade.php

@@ -932,7 +932,9 @@
         .ui-month-tabs {
             display: flex;
             gap: 0.35rem;
-            overflow-x: auto;
+            overflow: visible;
+            position: relative;
+            z-index: 50;
             max-width: 350px;
             width: 100%;
             padding: 0.45rem;
@@ -950,13 +952,15 @@
         .ui-month-more {
             position: relative;
             flex-shrink: 0;
+            z-index: 60;
         }
 
         .ui-month-more-menu {
             position: absolute;
             top: calc(100% + 0.35rem);
-            left: 0;
-            z-index: 40;
+            right: 0;
+            left: auto;
+            z-index: 100;
             min-width: 9rem;
             max-height: 16rem;
             overflow-y: auto;
@@ -964,14 +968,14 @@
             border-radius: 0.75rem;
             background: var(--surface-panel, #fff);
             border: 1px solid var(--border-glass, #e5e7eb);
-            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
             display: flex;
             flex-direction: column;
             gap: 0.15rem;
         }
 
         .ui-month-more-menu.hidden {
-            display: none;
+            display: none !important;
         }
 
         .ui-month-more-item {
@@ -1015,6 +1019,8 @@
             border-radius: 0 0 var(--radius-xl) var(--radius-xl);
             box-shadow: var(--shadow-soft);
             overflow: hidden;
+            position: relative;
+            z-index: 1;
             color: var(--text-primary);
         }