Fixing time between flyouts

app/static/css/style.css

@@ -68,23 +68,65 @@ a:hover {
   gap: 0.75rem;
 }
 
+/* Nav icons */
+.nav-icon {
+  width: 14px;
+  height: 14px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  flex-shrink: 0;
+  vertical-align: -2px;
+}
+
 /* Nav dropdowns */
 .nav-group {
   position: relative;
   line-height: 1;
 }
 
+/* Invisible bridge so the hover isn't broken by the gap between trigger and panel */
+.nav-group::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  height: 8px;
+}
+
+/* Fly-out submenus open to the right — bridge the margin-left gap */
+.nav-dropdown .nav-group::after {
+  top: 0;
+  bottom: 0;
+  left: 100%;
+  right: auto;
+  height: auto;
+  width: 4px;
+}
+
 .nav-label {
   cursor: default;
   color: #a5b4fc;
   white-space: nowrap;
   user-select: none;
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
 }
 
 .nav-label:hover {
   text-decoration: underline;
 }
 
+.topbar nav>a {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
 .nav-dropdown {
   display: none;
   position: absolute;
@@ -94,17 +136,19 @@ a:hover {
   border: 1px solid var(--border);
   border-radius: 8px;
   padding: 0.3rem 0;
-  min-width: 180px;
+  min-width: 190px;
   z-index: 200;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
 }
 
-.nav-group:hover > .nav-dropdown {
+.nav-group:hover>.nav-dropdown {
   display: block;
 }
 
 .nav-dropdown a {
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
   padding: 0.38rem 0.9rem;
   white-space: nowrap;
   color: #a5b4fc;
@@ -122,22 +166,28 @@ a:hover {
 }
 
 /* Second-level group inside a dropdown */
-.nav-dropdown .nav-group > .nav-label {
-  display: block;
+.nav-dropdown .nav-group>.nav-label {
   padding: 0.38rem 0.9rem;
 }
 
-.nav-dropdown .nav-group:hover > .nav-label {
+.nav-dropdown .nav-group:hover>.nav-label {
   background: var(--surface-2);
   text-decoration: none;
 }
 
-.nav-dropdown .nav-group > .nav-dropdown {
+.nav-dropdown .nav-group>.nav-dropdown {
   top: -0.3rem;
   left: 100%;
   margin-left: 2px;
 }
 
+.nav-chevron {
+  margin-left: auto;
+  opacity: 0.6;
+  font-style: normal;
+  font-size: 0.7em;
+}
+
 /* Cards */
 .card {
   background: var(--surface);