- fixed grouped rows

- added shortcut hint in menu items

src/app.css

@@ -4,10 +4,11 @@
   --surface-1: #eee;
   --surface-2: #f8f8f8;
   --surface-3: #fff;
-  --text: #222;
+  --text-1: #222;
+  --text-2: #282828;
   --primary: #41c6b3;
 
-  color: var(--text);
+  color: var(--text-1);
   accent-color: var(--primary);
 
   --info: oklch(.71 .17 249);
@@ -21,7 +22,8 @@
     --surface-1: #333;
     --surface-2: #383838;
     --surface-3: #444;
-    --text: #eee;
+    --text-1: #eee;
+    --text-2: #d8d8d8;
 
     --primary: #6be8d6;
 
@@ -68,7 +70,7 @@ body {
     block-size: 2em;
 
     background-color: var(--surface-2);
-    color: var(--text);
+    color: var(--text-1);
 
     & > .logo {
       inline-size: 3em;
@@ -93,7 +95,7 @@ body {
       padding: .5em 1em;
 
       background-color: inherit;
-      color: var(--text);
+      color: var(--text-1);
       border: none;
       cursor: pointer;
 
@@ -109,7 +111,7 @@ body {
       inset-inline-start: anchor(self-start);
       inset-block-start: anchor(end);
 
-      grid-auto-flow: row;
+      grid-template-columns: auto auto;
       place-content: start;
 
       gap: .5em;
@@ -126,11 +128,21 @@ body {
       }
 
       & > .menu-item {
+        grid-column: span 2;
+        display: grid;
+        grid-template-columns: subgrid;
+        align-items: center;
+
         background-color: var(--surface-2);
 
         &:hover {
           background-color: var(--surface-3);
         }
+
+        & > sub {
+          color: var(--text-2);
+          text-align: end;
+        }
       }
     }