polished the UI a bit. next up: saving changes (and maybe a diff ui as confirmation dialog)

src/features/menu/index.module.css

@@ -0,0 +1,58 @@
+.item {
+    padding: .5em 1em;
+
+    background-color: inherit;
+    color: var(--text-1);
+    border: none;
+    cursor: pointer;
+
+    text-align: start;
+
+    &:hover {
+        background-color: var(--surface-2);
+    }
+}
+
+.child {
+    position: fixed;
+    inset-inline-start: anchor(self-start);
+    inset-block-start: anchor(end);
+
+    grid-template-columns: auto auto;
+    place-content: start;
+
+    gap: .5em;
+    padding: .5em 0;
+    inline-size: max-content;
+
+    background-color: var(--surface-2);
+    border: 1px solid var(--surface-3);
+    border-block-start-width: 0;
+    margin: unset;
+
+    &:popover-open {
+        display: grid;
+    }
+
+    & > .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;
+        }
+    }
+}
+
+:popover-open + .item {
+    background-color: var(--surface-2);
+}