fix(demo): restore the theme menu's swatch rail

PR #15 rebuilt the theme picker as `mat-menu-item` rows and styled them as
if the icon, the name and the colour swatch were flex children of the
button:

    .theme-option .theme-option-name { flex: 1; }
    .color-swatch { flex-shrink: 0; margin-left: 12px; }

They are not. `MatMenuItem` projects into two slots -- `mat-icon,
[matMenuItemIcon]` for the leading icon and `*` for everything else -- and
the second slot is wrapped in a `<span class="mat-mdc-menu-item-text">`
that Material renders as a block. So the name and the swatch both land
inside that block, `flex: 1` applies to a span whose parent is not a flex
container and does nothing, and the swatch simply flows 12px after the
label. Its position then tracks the label's length: measured across the
13 rows, the gap from the swatch to the panel's right edge ranged from
26.7px (Spring Green) to 79.5px (Red) -- a ragged column where the design
wants a flush rail.

The published 22.1.0 demo predates that rewrite, which is why it still
looks right.

Wrap the name and swatch in a `.theme-option-row` span and make that the
flex container. The Material wrapper is already `flex: 1`, so a block-level
child fills the row and the existing rules start working as written. This
keeps the whole fix inside the component's own markup and styles: no
`::ng-deep`, no global rule reaching for `.mat-mdc-menu-item-text`, and no
borrowing the `matMenuItemIcon` slot for a trailing element -- the sort of
coupling to MDC internals #15 was itself removing.

`display: inline-block` on `.color-swatch` goes with it; the swatch is a
flex item now, so it was blockified anyway.

Verified in a headless browser: all 13 swatches sit at 26.9px from the
panel edge, each at full width and its own palette colour, with the
checked row's primary tint unchanged.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PuiyqrcbMudio9AAQpNNBe

Author: TobyBackstrom

projects/demo/src/app/app.html

@@ -74,11 +74,13 @@
             ? "radio_button_checked"
             : "radio_button_unchecked"
         }}</mat-icon>
-        <span class="theme-option-name">{{ themeConfig.displayName }}</span>
-        <span
-          class="color-swatch"
-          [style.background-color]="'var(' + themeConfig.cssVariable + ')'"
-        ></span>
+        <span class="theme-option-row">
+          <span class="theme-option-name">{{ themeConfig.displayName }}</span>
+          <span
+            class="color-swatch"
+            [style.background-color]="'var(' + themeConfig.cssVariable + ')'"
+          ></span>
+        </span>
       </button>
       }
     </mat-menu>

projects/demo/src/app/app.scss

@@ -127,8 +127,20 @@ body.dark-mode {
   }
 }
 
-/* Theme picker rows: icon, name, then the palette swatch on the trailing edge */
+/* Theme picker rows: icon, name, then the palette swatch on the trailing edge.
+   mat-menu-item projects everything but the icon into its own
+   .mat-mdc-menu-item-text block, so the row needs a flex container of our own
+   inside it -- laying the name and swatch out as children of the button never
+   reaches them. */
 .theme-option {
+  .theme-option-row {
+    display: flex;
+    align-items: center;
+    // Redundant while the Material wrapper is a block, but keeps the swatch
+    // flush if it ever becomes a flex container itself.
+    width: 100%;
+  }
+
   .theme-option-name {
     flex: 1;
   }
@@ -143,7 +155,6 @@ body.dark-mode {
 }
 
 .color-swatch {
-  display: inline-block;
   width: 24px;
   height: 16px;
   border-radius: 4px;