Fix dark main-content and split gallery demo (#10675)

gallery/src/demos/demo-ha-alert.ts

@@ -1,8 +1,10 @@
-import "../../../src/components/ha-logo-svg";
+import "@material/mwc-button/mwc-button";
-import { html, css, LitElement, TemplateResult } from "lit";
+import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
+import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 import "../../../src/components/ha-alert";
 import "../../../src/components/ha-card";
+import "../../../src/components/ha-logo-svg";
 
 const alerts: {
   title?: string;
@@ -130,7 +132,10 @@ const alerts: {
 export class DemoHaAlert extends LitElement {
   protected render(): TemplateResult {
     return html`
-      <ha-card header="ha-alert demo">
+      ${["light", "dark"].map(
+        (mode) => html`
+          <div class=${mode}>
+            <ha-card header="ha-alert ${mode} demo">
               <div class="card-content">
                 ${alerts.map(
                   (alert) => html`
@@ -146,13 +151,41 @@ export class DemoHaAlert extends LitElement {
                 )}
               </div>
             </ha-card>
+          </div>
+        `
+      )}
     `;
   }
 
+  firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    applyThemesOnElement(
+      this.shadowRoot!.querySelector(".dark"),
+      {
+        default_theme: "default",
+        default_dark_theme: "default",
+        themes: {},
+        darkMode: false,
+      },
+      "default",
+      { dark: true }
+    );
+  }
+
   static get styles() {
     return css`
+      :host {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+      .dark,
+      .light {
+        display: block;
+        background-color: var(--primary-background-color);
+        padding: 0 50px;
+      }
       ha-card {
-        max-width: 600px;
         margin: 24px auto;
       }
       ha-alert {

src/components/ha-alert.ts

@@ -113,9 +113,9 @@ class HaAlert extends LitElement {
       justify-content: space-between;
       align-items: center;
       width: 100%;
-      z-index: 1;
     }
     .action {
+      z-index: 1;
       width: min-content;
       --mdc-theme-primary: var(--primary-text-color);
     }