Enhance navbar usability with improved tap targets and mobile dropdown behavior

templates/base.html

@@ -110,6 +110,40 @@
 
                 }
             }
+            
+/* Improve navbar tap targets and mobile dropdown behaviour */
+@media (max-width: 991.98px) {
+    /* Make navbar links larger and easier to tap */
+    .navbar-nav .nav-link {
+        padding: .75rem 1rem;
+        font-size: 1.05rem;
+        min-height: 44px; /* recommended minimum touch target */
+    }
+
+    /* Make dropdown items full-width and larger */
+    .navbar-nav .dropdown-menu .dropdown-item {
+        padding: .75rem 1rem;
+        font-size: 1.05rem;
+    }
+
+    /* When the navbar is collapsed, render dropdown menus as static stacked blocks
+         so nested items are easy to tap (prevents absolute-position overlap issues). */
+    .navbar-collapse .dropdown-menu {
+        position: static !important;
+        float: none !important;
+        display: block !important;
+        width: 100% !important;
+        margin-top: .25rem;
+    }
+
+    /* Ensure dropdown toggles are full-width when collapsed */
+    .navbar-collapse .dropdown > .nav-link {
+        width: 100%;
+        text-align: left;
+        display: block;
+    }
+}
+
         </style>
         {% block css %}
         {% endblock %}