Use outline for cards on config pages (#12558)

hassio/src/addon-store/hassio-addon-repository.ts

@@ -68,6 +68,7 @@ class HassioAddonRepositoryEl extends LitElement {
           ${addons.map(
             (addon) => html`
               <ha-card
+                outlined
                 .addon=${addon}
                 class=${addon.available ? "" : "not_available"}
                 @click=${this._addonTapped}

hassio/src/addon-view/config/hassio-addon-audio.ts

@@ -50,6 +50,7 @@ class HassioAddonAudio extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-card
+        outlined
         .header=${this.supervisor.localize("addon.configuration.audio.header")}
       >
         <div class="card-content">

hassio/src/addon-view/config/hassio-addon-config.ts

@@ -162,7 +162,7 @@ class HassioAddonConfig extends LitElement {
         );
     return html`
       <h1>${this.addon.name}</h1>
-      <ha-card>
+      <ha-card outlined>
         <div class="header">
           <h2>
             ${this.supervisor.localize("addon.configuration.options.header")}

hassio/src/addon-view/config/hassio-addon-network.ts

@@ -58,6 +58,7 @@ class HassioAddonNetwork extends LitElement {
 
     return html`
       <ha-card
+        outlined
         .header=${this.supervisor.localize(
           "addon.configuration.network.header"
         )}

hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts

@@ -38,7 +38,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
     }
     return html`
       <div class="content">
-        <ha-card>
+        <ha-card outlined>
           ${this._error
             ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
             : ""}

hassio/src/addon-view/info/hassio-addon-info.ts

@@ -166,7 +166,7 @@ class HassioAddonInfo extends LitElement {
           `
         : ""}
 
-      <ha-card>
+      <ha-card outlined>
         <div class="card-content">
           <div class="addon-header">
             ${!this.narrow ? this.addon.name : ""}
@@ -649,7 +649,7 @@ class HassioAddonInfo extends LitElement {
 
       ${this.addon.long_description
         ? html`
-            <ha-card>
+            <ha-card outlined>
               <div class="card-content">
                 <ha-markdown
                   .content=${this.addon.long_description}

hassio/src/addon-view/log/hassio-addon-logs.ts

@@ -34,7 +34,7 @@ class HassioAddonLogs extends LitElement {
   protected render(): TemplateResult {
     return html`
       <h1>${this.addon.name}</h1>
-      <ha-card>
+      <ha-card outlined>
         ${this._error
           ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
           : ""}

hassio/src/dashboard/hassio-addons.ts

@@ -26,7 +26,7 @@ class HassioAddons extends LitElement {
         <div class="card-group">
           ${!this.supervisor.supervisor.addons?.length
             ? html`
-                <ha-card>
+                <ha-card outlined>
                   <div class="card-content">
                     <button class="link" @click=${this._openStore}>
                       ${this.supervisor.localize("dashboard.no_addons")}
@@ -38,7 +38,11 @@ class HassioAddons extends LitElement {
                 .sort((a, b) => caseInsensitiveStringCompare(a.name, b.name))
                 .map(
                   (addon) => html`
-                    <ha-card .addon=${addon} @click=${this._addonTapped}>
+                    <ha-card
+                      outlined
+                      .addon=${addon}
+                      @click=${this._addonTapped}
+                    >
                       <div class="card-content">
                         <hassio-card-content
                           .hass=${this.hass}

src/panels/config/areas/ha-config-area-page.ts

@@ -259,6 +259,7 @@ class HaConfigAreaPage extends LitElement {
                   <ha-svg-icon .path=${mdiImagePlus} slot="icon"></ha-svg-icon>
                 </mwc-button>`}
             <ha-card
+              outlined
               .header=${this.hass.localize("ui.panel.config.devices.caption")}
               >${devices.length
                 ? devices.map(
@@ -281,6 +282,7 @@ class HaConfigAreaPage extends LitElement {
                   `}
             </ha-card>
             <ha-card
+              outlined
               .header=${this.hass.localize(
                 "ui.panel.config.areas.editor.linked_entities_caption"
               )}
@@ -314,6 +316,7 @@ class HaConfigAreaPage extends LitElement {
             ${isComponentLoaded(this.hass, "automation")
               ? html`
                   <ha-card
+                    outlined
                     .header=${this.hass.localize(
                       "ui.panel.config.devices.automation.automations_heading"
                     )}
@@ -361,6 +364,7 @@ class HaConfigAreaPage extends LitElement {
             ${isComponentLoaded(this.hass, "scene")
               ? html`
                   <ha-card
+                    outlined
                     .header=${this.hass.localize(
                       "ui.panel.config.devices.scene.scenes_heading"
                     )}
@@ -400,6 +404,7 @@ class HaConfigAreaPage extends LitElement {
             ${isComponentLoaded(this.hass, "script")
               ? html`
                   <ha-card
+                    outlined
                     .header=${this.hass.localize(
                       "ui.panel.config.devices.script.scripts_heading"
                     )}

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -164,7 +164,7 @@ export default class HaAutomationActionRow extends LitElement {
     const yamlMode = this._yamlMode;
 
     return html`
-      <ha-card>
+      <ha-card outlined>
         ${this.action.enabled === false
           ? html`<div class="disabled-bar">
               ${this.hass.localize(

src/panels/config/automation/action/ha-automation-action.ts

@@ -32,7 +32,7 @@ export default class HaAutomationAction extends LitElement {
           ></ha-automation-action-row>
         `
       )}
-      <ha-card>
+      <ha-card outlined>
         <div class="card-actions add-card">
           <mwc-button @click=${this._addAction}>
             ${this.hass.localize(

src/panels/config/automation/action/types/ha-automation-action-choose.ts

@@ -69,7 +69,7 @@ export class HaChooseAction extends LitElement implements ActionElement {
           </div>
         </ha-card>`
       )}
-      <ha-card>
+      <ha-card outlined>
         <div class="card-actions add-card">
           <mwc-button @click=${this._addOption}>
             ${this.hass.localize(

src/panels/config/automation/blueprint-automation-editor.ts

@@ -75,7 +75,7 @@ export class HaBlueprintAutomationEditor extends LitElement {
             "ui.panel.config.automation.editor.introduction"
           )}
         </span>
-        <ha-card>
+        <ha-card outlined>
           <div class="card-content">
             <ha-textfield
               .label=${this.hass.localize(
@@ -145,6 +145,7 @@ export class HaBlueprintAutomationEditor extends LitElement {
       </ha-config-section>
 
       <ha-card
+        outlined
         class="blueprint"
         .header=${this.hass.localize(
           "ui.panel.config.automation.editor.blueprint.header"

src/panels/config/automation/condition/ha-automation-condition-editor.ts

@@ -5,7 +5,6 @@ import { dynamicElement } from "../../../../common/dom/dynamic-element-directive
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stringCompare } from "../../../../common/string/compare";
 import type { LocalizeFunc } from "../../../../common/translations/localize";
-import "../../../../components/ha-card";
 import "../../../../components/ha-select";
 import type { HaSelect } from "../../../../components/ha-select";
 import "../../../../components/ha-yaml-editor";

src/panels/config/automation/condition/ha-automation-condition-row.ts

@@ -67,7 +67,7 @@ export default class HaAutomationConditionRow extends LitElement {
       return html``;
     }
     return html`
-      <ha-card>
+      <ha-card outlined>
         ${this.condition.enabled === false
           ? html`<div class="disabled-bar">
               ${this.hass.localize(

src/panels/config/automation/condition/ha-automation-condition.ts

@@ -56,7 +56,7 @@ export default class HaAutomationCondition extends LitElement {
           ></ha-automation-condition-row>
         `
       )}
-      <ha-card>
+      <ha-card outlined>
         <div class="card-actions add-card">
           <mwc-button @click=${this._addCondition}>
             ${this.hass.localize(

src/panels/config/automation/dialog-new-automation.ts

@@ -3,7 +3,6 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-blueprint-picker";
-import "../../../components/ha-card";
 import "../../../components/ha-circular-progress";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import { showAutomationEditor } from "../../../data/automation";

src/panels/config/automation/ha-automation-editor.ts

@@ -239,8 +239,8 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                   ? html`
                       ${!this.narrow
                         ? html`
-                            <ha-card
-                              ><div class="card-header">
+                            <ha-card outlined>
+                              <div class="card-header">
                                 ${this._config.alias}
                               </div>
                               ${stateObj
@@ -275,8 +275,8 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                         .defaultValue=${this._preprocessYaml()}
                         @value-changed=${this._yamlChanged}
                       ></ha-yaml-editor>
-                      <ha-card
-                        ><div class="card-actions">
+                      <ha-card outlined>
+                        <div class="card-actions">
                           <mwc-button @click=${this._copyYaml}>
                             ${this.hass.localize(
                               "ui.panel.config.automation.editor.copy_to_clipboard"

src/panels/config/automation/manual-automation-editor.ts

@@ -47,7 +47,7 @@ export class HaManualAutomationEditor extends LitElement {
             "ui.panel.config.automation.editor.introduction"
           )}
         </span>
-        <ha-card>
+        <ha-card outlined>
           <div class="card-content">
             <ha-textfield
               .label=${this.hass.localize(

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -127,7 +127,7 @@ export default class HaAutomationTriggerRow extends LitElement {
     const showId = "id" in this.trigger || this._requestShowId;
 
     return html`
-      <ha-card>
+      <ha-card outlined>
         ${this.trigger.enabled === false
           ? html`<div class="disabled-bar">
               ${this.hass.localize(

src/panels/config/automation/trigger/ha-automation-trigger.ts

@@ -27,7 +27,7 @@ export default class HaAutomationTrigger extends LitElement {
           ></ha-automation-trigger-row>
         `
       )}
-      <ha-card>
+      <ha-card outlined>
         <div class="card-actions add-card">
           <mwc-button @click=${this._addTrigger}>
             ${this.hass.localize(

src/panels/config/cloud/account/cloud-account.ts

@@ -81,6 +81,7 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
             </div>
 
             <ha-card
+              outlined
               .header=${this.hass.localize(
                 "ui.panel.config.cloud.account.nabu_casa_account"
               )}

src/panels/config/cloud/account/cloud-alexa-pref.ts

@@ -26,6 +26,7 @@ export class CloudAlexaPref extends LitElement {
 
     return html`
       <ha-card
+        outlined
         header=${this.hass!.localize(
           "ui.panel.config.cloud.account.alexa.title"
         )}

src/panels/config/cloud/account/cloud-google-pref.ts

@@ -31,6 +31,7 @@ export class CloudGooglePref extends LitElement {
 
     return html`
       <ha-card
+        outlined
         header=${this.hass.localize(
           "ui.panel.config.cloud.account.google.title"
         )}

src/panels/config/cloud/account/cloud-remote-pref.ts

@@ -34,6 +34,7 @@ export class CloudRemotePref extends LitElement {
     if (!remote_certificate) {
       return html`
         <ha-card
+          outlined
           header=${this.hass.localize(
             "ui.panel.config.cloud.account.remote.title"
           )}
@@ -49,6 +50,7 @@ export class CloudRemotePref extends LitElement {
 
     return html`
       <ha-card
+        outlined
         header=${this.hass.localize(
           "ui.panel.config.cloud.account.remote.title"
         )}

src/panels/config/cloud/account/cloud-tts-pref.ts

@@ -44,6 +44,7 @@ export class CloudTTSPref extends LitElement {
 
     return html`
       <ha-card
+        outlined
         header=${this.hass.localize("ui.panel.config.cloud.account.tts.title")}
       >
         <div class="card-content">

src/panels/config/cloud/account/cloud-webhooks.ts

@@ -40,6 +40,7 @@ export class CloudWebhooks extends LitElement {
   protected render() {
     return html`
       <ha-card
+        outlined
         header=${this.hass!.localize(
           "ui.panel.config.cloud.account.webhooks.title"
         )}

src/panels/config/cloud/alexa/cloud-alexa.ts

@@ -153,7 +153,7 @@ class CloudAlexa extends SubscribeMixin(LitElement) {
       ></ha-icon-button>`;
 
       target.push(html`
-        <ha-card>
+        <ha-card outlined>
           <div class="card-content">
             <div class="top-line">
               <state-info

src/panels/config/cloud/forgot-password/cloud-forgot-password.ts

@@ -36,6 +36,7 @@ export class CloudForgotPassword extends LitElement {
       >
         <div class="content">
           <ha-card
+            outlined
             .header=${this.hass.localize(
               "ui.panel.config.cloud.forgot_password.subtitle"
             )}

src/panels/config/cloud/google-assistant/cloud-google-assistant.ts

@@ -159,7 +159,7 @@ class CloudGoogleAssistant extends SubscribeMixin(LitElement) {
       ></ha-icon-button>`;
 
       target.push(html`
-        <ha-card>
+        <ha-card outlined>
           <div class="card-content">
             <div class="top-line">
               <state-info

src/panels/config/cloud/login/cloud-login.ts

@@ -99,6 +99,7 @@ export class CloudLogin extends LitElement {
               : ""}
 
             <ha-card
+              outlined
               .header=${this.hass.localize(
                 "ui.panel.config.cloud.login.sign_in"
               )}
@@ -157,7 +158,7 @@ export class CloudLogin extends LitElement {
               </div>
             </ha-card>
 
-            <ha-card>
+            <ha-card outlined>
               <paper-item @click=${this._handleRegister}>
                 <paper-item-body two-line>
                   ${this.hass.localize(

src/panels/config/cloud/register/cloud-register.ts

@@ -121,6 +121,7 @@ export class CloudRegister extends LitElement {
               </ul>
             </div>
             <ha-card
+              outlined
               .header=${this.hass.localize(
                 "ui.panel.config.cloud.register.create_account"
               )}

src/panels/config/core/ha-config-section-updates.ts

@@ -196,7 +196,7 @@ class HaConfigSectionUpdates extends LitElement {
       display: flex;
       justify-content: space-between;
       flex-direction: column;
-      padding: 16px;
+      padding: 0;
     }
   `;
 }

src/panels/config/devices/device-detail/ha-device-actions-card.ts

@@ -1,5 +1,4 @@
 import { customElement } from "lit/decorators";
-import "../../../../components/ha-card";
 import {
   DeviceAction,
   localizeDeviceAutomationAction,

src/panels/config/devices/device-detail/ha-device-automation-card.ts

@@ -1,7 +1,6 @@
 import { css, html, LitElement, TemplateResult } from "lit";
 import { property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-card";
 import "../../../../components/ha-chip";
 import "../../../../components/ha-chip-set";
 import { showAutomationEditor } from "../../../../data/automation";

src/panels/config/devices/device-detail/ha-device-conditions-card.ts

@@ -1,5 +1,4 @@
 import { customElement } from "lit/decorators";
-import "../../../../components/ha-card";
 import {
   DeviceCondition,
   localizeDeviceAutomationCondition,

src/panels/config/devices/device-detail/ha-device-entities-card.ts

@@ -62,7 +62,7 @@ export class HaDeviceEntitiesCard extends LitElement {
   protected render(): TemplateResult {
     if (!this.entities.length) {
       return html`
-        <ha-card .header=${this.header}>
+        <ha-card outlined .header=${this.header}>
           <div class="empty card-content">
             ${this.hass.localize("ui.panel.config.devices.entities.none")}
           </div>
@@ -89,7 +89,7 @@ export class HaDeviceEntitiesCard extends LitElement {
     });
 
     return html`
-      <ha-card .header=${this.header}>
+      <ha-card outlined .header=${this.header}>
         <div id="entities" @hass-more-info=${this._overrideMoreInfo}>
           ${shownEntities.map((entry) =>
             this.hass.states[entry.entity_id]

src/panels/config/devices/device-detail/ha-device-info-card.ts

@@ -1,5 +1,6 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
+import "../../../../components/ha-card";
 import { AreaRegistryEntry } from "../../../../data/area_registry";
 import {
   computeDeviceName,
@@ -24,6 +25,7 @@ export class HaDeviceCard extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-card
+        outlined
         .header=${this.hass.localize(
           "ui.panel.config.devices.device_info",
           "type",
@@ -145,3 +147,9 @@ export class HaDeviceCard extends LitElement {
     ];
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-device-info-card": HaDeviceCard;
+  }
+}

src/panels/config/devices/ha-config-device-page.ts

@@ -579,7 +579,7 @@ export class HaConfigDevicePage extends LitElement {
             ${
               isComponentLoaded(this.hass, "automation")
                 ? html`
-                    <ha-card>
+                    <ha-card outlined>
                       <h1 class="card-header">
                         ${this.hass.localize(
                           "ui.panel.config.devices.automation.automations_heading"
@@ -673,7 +673,7 @@ export class HaConfigDevicePage extends LitElement {
             ${
               isComponentLoaded(this.hass, "scene") && entities.length
                 ? html`
-                    <ha-card>
+                    <ha-card outlined>
                       <h1 class="card-header">
                         ${this.hass.localize(
                           "ui.panel.config.devices.scene.scenes_heading"
@@ -771,7 +771,7 @@ export class HaConfigDevicePage extends LitElement {
               ${
                 isComponentLoaded(this.hass, "script")
                   ? html`
-                      <ha-card>
+                      <ha-card outlined>
                         <h1 class="card-header">
                           ${this.hass.localize(
                             "ui.panel.config.devices.script.scripts_heading"

src/panels/config/energy/components/ha-energy-battery-settings.ts

@@ -51,7 +51,7 @@ export class EnergyBatterySettings extends LitElement {
     });
 
     return html`
-      <ha-card>
+      <ha-card outlined>
         <h1 class="card-header">
           <ha-svg-icon .path=${mdiBatteryHigh}></ha-svg-icon>
           ${this.hass.localize("ui.panel.config.energy.battery.title")}

src/panels/config/energy/components/ha-energy-device-settings.ts

@@ -36,7 +36,7 @@ export class EnergyDeviceSettings extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-card>
+      <ha-card outlined>
         <h1 class="card-header">
           <ha-svg-icon .path=${mdiDevices}></ha-svg-icon>
           ${this.hass.localize(

src/panels/config/energy/components/ha-energy-gas-settings.ts

@@ -51,7 +51,7 @@ export class EnergyGasSettings extends LitElement {
     });
 
     return html`
-      <ha-card>
+      <ha-card outlined>
         <h1 class="card-header">
           <ha-svg-icon .path=${mdiFire}></ha-svg-icon>
           ${this.hass.localize("ui.panel.config.energy.gas.title")}

src/panels/config/energy/components/ha-energy-grid-settings.ts

@@ -80,7 +80,7 @@ export class EnergyGridSettings extends LitElement {
     }
 
     return html`
-      <ha-card>
+      <ha-card outlined>
         <h1 class="card-header">
           <ha-svg-icon .path=${mdiTransmissionTower}></ha-svg-icon>
           ${this.hass.localize("ui.panel.config.energy.grid.title")}

src/panels/config/energy/components/ha-energy-solar-settings.ts

@@ -54,7 +54,7 @@ export class EnergySolarSettings extends LitElement {
     });
 
     return html`
-      <ha-card>
+      <ha-card outlined>
         <h1 class="card-header">
           <ha-svg-icon .path=${mdiSolarPower}></ha-svg-icon>
           ${this.hass.localize("ui.panel.config.energy.solar.title")}

src/panels/config/person/ha-config-person.ts

@@ -88,7 +88,7 @@ class HaConfigPerson extends LitElement {
             </a>
           </span>
 
-          <ha-card class="storage">
+          <ha-card outlined class="storage">
             ${this._storageItems.map(
               (entry) => html`
                 <paper-icon-item @click=${this._openEditEntry} .entry=${entry}>
@@ -117,7 +117,7 @@ class HaConfigPerson extends LitElement {
           </ha-card>
           ${this._configItems.length > 0
             ? html`
-                <ha-card header="Configuration.yaml persons">
+                <ha-card outlined header="Configuration.yaml persons">
                   ${this._configItems.map(
                     (entry) => html`
                       <paper-icon-item>

src/panels/config/scene/ha-scene-editor.ts

@@ -287,7 +287,7 @@ export class HaSceneEditor extends SubscribeMixin(
                       "ui.panel.config.scene.editor.introduction"
                     )}
                   </div>
-                  <ha-card>
+                  <ha-card outlined>
                     <div class="card-content">
                       <ha-textfield
                         .value=${this._config.name}
@@ -335,7 +335,7 @@ export class HaSceneEditor extends SubscribeMixin(
                   ${devices.map(
                     (device) =>
                       html`
-                        <ha-card>
+                        <ha-card outlined>
                           <h1 class="card-header">
                             ${device.name}
                             <ha-icon-button
@@ -373,6 +373,7 @@ export class HaSceneEditor extends SubscribeMixin(
                   )}
 
                   <ha-card
+                    outlined
                     .header=${this.hass.localize(
                       "ui.panel.config.scene.editor.devices.add"
                     )}
@@ -405,6 +406,7 @@ export class HaSceneEditor extends SubscribeMixin(
                         ${entities.length
                           ? html`
                               <ha-card
+                                outlined
                                 class="entities"
                                 .header=${this.hass.localize(
                                   "ui.panel.config.scene.editor.entities.without_device"
@@ -445,6 +447,7 @@ export class HaSceneEditor extends SubscribeMixin(
                           : ""}
 
                         <ha-card
+                          outlined
                           header=${this.hass.localize(
                             "ui.panel.config.scene.editor.entities.add"
                           )}

src/panels/config/script/blueprint-script-editor.ts

@@ -51,7 +51,7 @@ export class HaBlueprintScriptEditor extends LitElement {
           "ui.panel.config.automation.editor.blueprint.header"
         )}</span
       >
-      <ha-card>
+      <ha-card outlined>
         <div class="blueprint-picker-container">
           ${this._blueprints
             ? Object.keys(this._blueprints).length

src/panels/config/script/ha-script-editor.ts

@@ -290,7 +290,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                               "ui.panel.config.script.editor.introduction"
                             )}
                           </span>
-                          <ha-card>
+                          <ha-card outlined>
                             <div class="card-content">
                               <ha-form
                                 .schema=${schema}
@@ -387,8 +387,8 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
             ? html`
                 ${!this.narrow
                   ? html`
-                      <ha-card
-                        ><div class="card-header">${this._config?.alias}</div>
+                      <ha-card outlined>
+                        <div class="card-header">${this._config?.alias}</div>
                         <div
                           class="card-actions layout horizontal justified center"
                         >
@@ -412,8 +412,8 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                   .defaultValue=${this._preprocessYaml()}
                   @value-changed=${this._yamlChanged}
                 ></ha-yaml-editor>
-                <ha-card
-                  ><div class="card-actions">
+                <ha-card outlined>
+                  <div class="card-actions">
                     <mwc-button @click=${this._copyYaml}>
                       ${this.hass.localize(
                         "ui.panel.config.automation.editor.copy_to_clipboard"

src/panels/config/tags/ha-config-tags.ts

@@ -9,7 +9,6 @@ import { html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table";
-import "../../../components/ha-card";
 import "../../../components/ha-fab";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-relative-time";

src/panels/config/zone/ha-config-zone.ts

@@ -228,7 +228,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
                 <span slot="introduction">
                   ${hass.localize("ui.panel.config.zone.introduction")}
                 </span>
-                <ha-card>${listBox}</ha-card>
+                <ha-card outlined>${listBox}</ha-card>
               </ha-config-section>
             `
           : ""}
@@ -471,7 +471,6 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
         color: var(--primary-color);
       }
       ha-card {
-        max-width: 600px;
         margin: 16px auto;
         overflow: hidden;
       }