Center new more info controls (#15564)

* Center new more info controls

* Center change color view

src/dialogs/more-info/components/ha-more-info-control-style.ts

@@ -0,0 +1,24 @@
+import { css } from "lit";
+
+export const moreInfoControlStyle = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    justify-content: space-between;
+  }
+
+  .controls {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .controls > *:not(:last-child) {
+    margin-bottom: 24px;
+  }
+
+  ha-attributes {
+    width: 100%;
+  }
+`;

src/dialogs/more-info/components/lights/ha-more-info-view-light-color-picker.ts

@@ -23,7 +23,6 @@ import {
   lightSupportsColor,
   lightSupportsColorMode,
 } from "../../../../data/light";
-import { haStyleDialog } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
 import { LightColorPickerViewParams } from "./show-view-light-color-picker";
 
@@ -78,117 +77,115 @@ class MoreInfoViewLightColorPicker extends LitElement {
       lightSupportsColorMode(this.stateObj, LightColorMode.RGBW);
 
     return html`
-      <div>
+      ${this._modes.length > 1
-        ${this._modes.length > 1
+        ? html`
+            <mwc-tab-bar
+              .activeIndex=${this._mode ? this._modes.indexOf(this._mode) : 0}
+              @MDCTabBar:activated=${this._handleTabChanged}
+            >
+              ${this._modes.map(
+                (value) =>
+                  html`<mwc-tab
+                    .label=${this.hass.localize(
+                      `ui.dialogs.more_info_control.light.color_picker.mode.${value}`
+                    )}
+                  ></mwc-tab>`
+              )}
+            </mwc-tab-bar>
+          `
+        : ""}
+      <div class="content">
+        ${this._mode === LightColorMode.COLOR_TEMP
           ? html`
-              <mwc-tab-bar
+              <ha-control-slider
-                .activeIndex=${this._mode ? this._modes.indexOf(this._mode) : 0}
+                vertical
-                @MDCTabBar:activated=${this._handleTabChanged}
+                class="color_temp"
+                label=${this.hass.localize("ui.card.light.color_temperature")}
+                min="1"
+                max="100"
+                mode="cursor"
+                .value=${this._ctSliderValue}
+                @value-changed=${this._ctSliderChanged}
+                .min=${this.stateObj.attributes.min_color_temp_kelvin!}
+                .max=${this.stateObj.attributes.max_color_temp_kelvin!}
               >
-                ${this._modes.map(
+              </ha-control-slider>
-                  (value) =>
-                    html`<mwc-tab
-                      .label=${this.hass.localize(
-                        `ui.dialogs.more_info_control.light.color_picker.mode.${value}`
-                      )}
-                    ></mwc-tab>`
-                )}
-              </mwc-tab-bar>
             `
           : ""}
-        <div class="content">
+        ${this._mode === "color"
-          ${this._mode === LightColorMode.COLOR_TEMP
+          ? html`
-            ? html`
+              <div class="segmentationContainer">
-                <ha-control-slider
+                <ha-color-picker
-                  vertical
+                  class="color"
-                  class="color_temp"
+                  @colorselected=${this._colorPicked}
-                  label=${this.hass.localize("ui.card.light.color_temperature")}
+                  .desiredRgbColor=${this._colorPickerColor}
-                  min="1"
+                  throttle="500"
-                  max="100"
+                  .hueSegments=${this._hueSegments}
-                  mode="cursor"
+                  .saturationSegments=${this._saturationSegments}
-                  .value=${this._ctSliderValue}
-                  @value-changed=${this._ctSliderChanged}
-                  .min=${this.stateObj.attributes.min_color_temp_kelvin!}
-                  .max=${this.stateObj.attributes.max_color_temp_kelvin!}
                 >
-                </ha-control-slider>
+                </ha-color-picker>
-              `
+                <ha-icon-button
-            : ""}
+                  .path=${mdiPalette}
-          ${this._mode === "color"
+                  @click=${this._segmentClick}
-            ? html`
+                  class="segmentationButton"
-                <div class="segmentationContainer">
+                ></ha-icon-button>
-                  <ha-color-picker
+              </div>
-                    class="color"
-                    @colorselected=${this._colorPicked}
-                    .desiredRgbColor=${this._colorPickerColor}
-                    throttle="500"
-                    .hueSegments=${this._hueSegments}
-                    .saturationSegments=${this._saturationSegments}
-                  >
-                  </ha-color-picker>
-                  <ha-icon-button
-                    .path=${mdiPalette}
-                    @click=${this._segmentClick}
-                    class="segmentationButton"
-                  ></ha-icon-button>
-                </div>
 
-                ${supportsRgbw || supportsRgbww
+              ${supportsRgbw || supportsRgbww
-                  ? html`<ha-labeled-slider
+                ? html`<ha-labeled-slider
+                    .caption=${this.hass.localize(
+                      "ui.card.light.color_brightness"
+                    )}
+                    icon="hass:brightness-7"
+                    max="100"
+                    .value=${this._colorBrightnessSliderValue}
+                    @change=${this._colorBrightnessSliderChanged}
+                    pin
+                  ></ha-labeled-slider>`
+                : ""}
+              ${supportsRgbw
+                ? html`
+                    <ha-labeled-slider
                       .caption=${this.hass.localize(
-                        "ui.card.light.color_brightness"
+                        "ui.card.light.white_value"
                       )}
-                      icon="hass:brightness-7"
+                      icon="hass:file-word-box"
                       max="100"
-                      .value=${this._colorBrightnessSliderValue}
+                      .name=${"wv"}
-                      @change=${this._colorBrightnessSliderChanged}
+                      .value=${this._wvSliderValue}
+                      @change=${this._wvSliderChanged}
                       pin
-                    ></ha-labeled-slider>`
+                    ></ha-labeled-slider>
-                  : ""}
+                  `
-                ${supportsRgbw
+                : ""}
-                  ? html`
+              ${supportsRgbww
-                      <ha-labeled-slider
+                ? html`
-                        .caption=${this.hass.localize(
+                    <ha-labeled-slider
-                          "ui.card.light.white_value"
+                      .caption=${this.hass.localize(
-                        )}
+                        "ui.card.light.cold_white_value"
-                        icon="hass:file-word-box"
+                      )}
-                        max="100"
+                      icon="hass:file-word-box-outline"
-                        .name=${"wv"}
+                      max="100"
-                        .value=${this._wvSliderValue}
+                      .name=${"cw"}
-                        @change=${this._wvSliderChanged}
+                      .value=${this._cwSliderValue}
-                        pin
+                      @change=${this._wvSliderChanged}
-                      ></ha-labeled-slider>
+                      pin
-                    `
+                    ></ha-labeled-slider>
-                  : ""}
+                    <ha-labeled-slider
-                ${supportsRgbww
+                      .caption=${this.hass.localize(
-                  ? html`
+                        "ui.card.light.warm_white_value"
-                      <ha-labeled-slider
+                      )}
-                        .caption=${this.hass.localize(
+                      icon="hass:file-word-box"
-                          "ui.card.light.cold_white_value"
+                      max="100"
-                        )}
+                      .name=${"ww"}
-                        icon="hass:file-word-box-outline"
+                      .value=${this._wwSliderValue}
-                        max="100"
+                      @change=${this._wvSliderChanged}
-                        .name=${"cw"}
+                      pin
-                        .value=${this._cwSliderValue}
+                    ></ha-labeled-slider>
-                        @change=${this._wvSliderChanged}
+                  `
-                        pin
+                : ""}
-                      ></ha-labeled-slider>
+            `
-                      <ha-labeled-slider
+          : ""}
-                        .caption=${this.hass.localize(
-                          "ui.card.light.warm_white_value"
-                        )}
-                        icon="hass:file-word-box"
-                        max="100"
-                        .name=${"ww"}
-                        .value=${this._wwSliderValue}
-                        @change=${this._wvSliderChanged}
-                        pin
-                      ></ha-labeled-slider>
-                    `
-                  : ""}
-              `
-            : ""}
-        </div>
       </div>
     `;
   }
@@ -482,13 +479,18 @@ class MoreInfoViewLightColorPicker extends LitElement {
 
   static get styles(): CSSResultGroup {
     return [
-      haStyleDialog,
       css`
+        :host {
+          display: flex;
+          flex-direction: column;
+        }
         .content {
           display: flex;
           flex-direction: column;
           align-items: center;
-          padding: 16px;
+          justify-content: center;
+          padding: 24px;
+          flex: 1;
         }
 
         .segmentationContainer {

src/dialogs/more-info/const.ts

@@ -94,12 +94,12 @@ export const computeShowLogBookComponent = (
   return true;
 };
 
-export const computeShowNewMoreInfo = (stateObj: HassEntity) => {
+export const computeShowNewMoreInfo = (stateObj: HassEntity): boolean => {
   const domain = computeDomain(stateObj.entity_id);
   if (domain === "group") {
     const groupDomain = computeGroupDomain(stateObj as GroupEntity);
     return (
-      groupDomain &&
+      groupDomain != null &&
       groupDomain !== "group" &&
       DOMAINS_WITH_NEW_MORE_INFO.includes(groupDomain)
     );

src/dialogs/more-info/controls/more-info-group.ts

@@ -12,6 +12,7 @@ import { dynamicElement } from "../../../common/dom/dynamic-element-directive";
 import { computeGroupDomain, GroupEntity } from "../../../data/group";
 import "../../../state-summary/state-card-content";
 import { HomeAssistant } from "../../../types";
+import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
 import {
   domainMoreInfoType,
   importMoreInfoControl,
@@ -94,12 +95,15 @@ class MoreInfoGroup extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return css`
+    return [
-      state-card-content {
+      moreInfoControlStyle,
-        display: block;
+      css`
-        margin-top: 8px;
+        state-card-content {
-      }
+          display: block;
-    `;
+          margin-top: 8px;
+        }
+      `,
+    ];
   }
 }
 

src/dialogs/more-info/controls/more-info-light.ts

@@ -32,6 +32,7 @@ import {
   lightSupportsColorMode,
 } from "../../../data/light";
 import type { HomeAssistant } from "../../../types";
+import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
 import "../components/ha-more-info-state-header";
 import "../components/ha-more-info-toggle";
 import "../components/lights/ha-more-info-light-brightness";
@@ -85,12 +86,12 @@ class MoreInfoLight extends LitElement {
       : undefined;
 
     return html`
-      <div class="content">
+      <ha-more-info-state-header
-        <ha-more-info-state-header
+        .hass=${this.hass}
-          .hass=${this.hass}
+        .stateObj=${this.stateObj}
-          .stateObj=${this.stateObj}
+        .stateOverride=${stateOverride}
-          .stateOverride=${stateOverride}
+      ></ha-more-info-state-header>
-        ></ha-more-info-state-header>
+      <div class="controls">
         ${supportsBrightness
           ? html`
               <ha-more-info-light-brightness
@@ -184,12 +185,13 @@ class MoreInfoLight extends LitElement {
               </div>
             `
           : null}
-        <ha-attributes
-          .hass=${this.hass}
-          .stateObj=${this.stateObj}
-          extra-filters="brightness,color_temp,color_temp_kelvin,white_value,effect_list,effect,hs_color,rgb_color,rgbw_color,rgbww_color,xy_color,min_mireds,max_mireds,min_color_temp_kelvin,max_color_temp_kelvin,entity_id,supported_color_modes,color_mode"
-        ></ha-attributes>
       </div>
+
+      <ha-attributes
+        .hass=${this.hass}
+        .stateObj=${this.stateObj}
+        extra-filters="brightness,color_temp,color_temp_kelvin,white_value,effect_list,effect,hs_color,rgb_color,rgbw_color,rgbww_color,xy_color,min_mireds,max_mireds,min_color_temp_kelvin,max_color_temp_kelvin,entity_id,supported_color_modes,color_mode"
+      ></ha-attributes>
     `;
   }
 
@@ -230,41 +232,29 @@ class MoreInfoLight extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return css`
+    return [
-      .content {
+      moreInfoControlStyle,
-        display: flex;
+      css`
-        flex-direction: column;
+        .buttons {
-        align-items: center;
+          display: flex;
-      }
+          align-items: center;
+          justify-content: center;
+          margin-bottom: 12px;
+        }
+        .buttons > * {
+          margin: 4px;
+        }
 
-      .buttons {
+        md-outlined-icon-button-toggle,
-        display: flex;
+        md-outlined-icon-button {
-        align-items: center;
+          --ha-icon-display: block;
-        justify-content: center;
+          --md-sys-color-on-surface: var(--secondary-text-color);
-        margin-bottom: 12px;
+          --md-sys-color-on-surface-variant: var(--secondary-text-color);
-      }
+          --md-sys-color-on-surface-rgb: var(--rgb-secondary-text-color);
-      .buttons > * {
+          --md-sys-color-outline: var(--secondary-text-color);
-        margin: 4px;
+        }
-      }
+      `,
-
+    ];
-      ha-more-info-light-brightness,
-      ha-more-info-toggle {
-        margin-bottom: 24px;
-      }
-
-      ha-attributes {
-        width: 100%;
-      }
-
-      md-outlined-icon-button-toggle,
-      md-outlined-icon-button {
-        --ha-icon-display: block;
-        --md-sys-color-on-surface: var(--secondary-text-color);
-        --md-sys-color-on-surface-variant: var(--secondary-text-color);
-        --md-sys-color-on-surface-rgb: var(--rgb-secondary-text-color);
-        --md-sys-color-outline: var(--secondary-text-color);
-      }
-    `;
   }
 }
 

src/dialogs/more-info/controls/more-info-siren.ts

@@ -1,9 +1,10 @@
 import { mdiVolumeHigh, mdiVolumeOff } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../components/ha-attributes";
 import { LightEntity } from "../../../data/light";
 import type { HomeAssistant } from "../../../types";
+import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
 import "../components/ha-more-info-state-header";
 import "../components/ha-more-info-toggle";
 
@@ -19,41 +20,27 @@ class MoreInfoSiren extends LitElement {
     }
 
     return html`
-      <div class="content">
+      <ha-more-info-state-header
-        <ha-more-info-state-header
+        .hass=${this.hass}
-          .hass=${this.hass}
+        .stateObj=${this.stateObj}
-          .stateObj=${this.stateObj}
+      ></ha-more-info-state-header>
-        ></ha-more-info-state-header>
+      <div class="controls">
         <ha-more-info-toggle
           .stateObj=${this.stateObj}
           .hass=${this.hass}
           .iconPathOn=${mdiVolumeHigh}
           .iconPathOff=${mdiVolumeOff}
         ></ha-more-info-toggle>
-        <ha-attributes
-          .hass=${this.hass}
-          .stateObj=${this.stateObj}
-        ></ha-attributes>
       </div>
+      <ha-attributes
+        .hass=${this.hass}
+        .stateObj=${this.stateObj}
+      ></ha-attributes>
     `;
   }
 
   static get styles(): CSSResultGroup {
-    return css`
+    return moreInfoControlStyle;
-      .content {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-      }
-
-      ha-more-info-toggle {
-        margin-bottom: 24px;
-      }
-
-      ha-attributes {
-        width: 100%;
-      }
-    `;
   }
 }
 

src/dialogs/more-info/controls/more-info-switch.ts

@@ -1,9 +1,10 @@
 import { mdiPower, mdiPowerOff } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../components/ha-attributes";
 import { LightEntity } from "../../../data/light";
 import type { HomeAssistant } from "../../../types";
+import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
 import "../components/ha-more-info-state-header";
 import "../components/ha-more-info-toggle";
 
@@ -19,41 +20,27 @@ class MoreInfoSwitch extends LitElement {
     }
 
     return html`
-      <div class="content">
+      <ha-more-info-state-header
-        <ha-more-info-state-header
+        .hass=${this.hass}
-          .hass=${this.hass}
+        .stateObj=${this.stateObj}
-          .stateObj=${this.stateObj}
+      ></ha-more-info-state-header>
-        ></ha-more-info-state-header>
+      <div class="controls">
         <ha-more-info-toggle
           .stateObj=${this.stateObj}
           .hass=${this.hass}
           .iconPathOn=${mdiPower}
           .iconPathOff=${mdiPowerOff}
         ></ha-more-info-toggle>
-        <ha-attributes
-          .hass=${this.hass}
-          .stateObj=${this.stateObj}
-        ></ha-attributes>
       </div>
+      <ha-attributes
+        .hass=${this.hass}
+        .stateObj=${this.stateObj}
+      ></ha-attributes>
     `;
   }
 
   static get styles(): CSSResultGroup {
-    return css`
+    return moreInfoControlStyle;
-      .content {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-      }
-
-      ha-more-info-toggle {
-        margin-bottom: 24px;
-      }
-
-      ha-attributes {
-        width: 100%;
-      }
-    `;
   }
 }
 

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -203,13 +203,7 @@ export class MoreInfoDialog extends LitElement {
     const isInfoView = this._currView === "info" && !this._childView;
 
     return html`
-      <ha-dialog
+      <ha-dialog open @closed=${this.closeDialog} .heading=${title} hideActions>
-        open
-        @closed=${this.closeDialog}
-        .heading=${title}
-        hideActions
-        data-domain=${domain}
-      >
         <div slot="heading" class="heading">
           <ha-header-bar>
             ${isInfoView
@@ -335,10 +329,14 @@ export class MoreInfoDialog extends LitElement {
           @show-child-view=${this._showChildView}
         >
           ${this._childView
-            ? dynamicElement(this._childView.viewTag, {
+            ? html`
-                hass: this.hass,
+                <div class="child-view">
-                params: this._childView.viewParams,
+                  ${dynamicElement(this._childView.viewTag, {
-              })
+                    hass: this.hass,
+                    params: this._childView.viewParams,
+                  })}
+                </div>
+              `
             : cache(
                 this._currView === "info"
                   ? html`
@@ -385,12 +383,8 @@ export class MoreInfoDialog extends LitElement {
   protected updated(changedProps: PropertyValues) {
     super.updated(changedProps);
     if (changedProps.has("_currView")) {
-      this.setAttribute("view", this._currView);
       this._childView = undefined;
     }
-    if (changedProps.has("_childView")) {
-      this.toggleAttribute("has-child-view", !!this._childView);
-    }
   }
 
   private _enlarge() {
@@ -407,7 +401,6 @@ export class MoreInfoDialog extends LitElement {
           --dialog-content-position: static;
           --vertical-align-dialog: flex-start;
           --dialog-content-padding: 0;
-          --content-padding: 24px;
         }
 
         ha-header-bar {
@@ -417,6 +410,7 @@ export class MoreInfoDialog extends LitElement {
           display: block;
           border-bottom: none;
         }
+
         .content {
           outline: none;
         }
@@ -426,22 +420,16 @@ export class MoreInfoDialog extends LitElement {
             var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
         }
 
-        :host([view="settings"]) ha-dialog {
+        ha-related-items,
-          --content-padding: 0;
+        ha-more-info-history-and-logbook {
+          padding: 24px;
+          display: block;
         }
 
-        :host([view="info"]) ha-dialog[data-domain="camera"] {
+        @media all and (max-width: 450px) {
-          --content-padding: 0;
+          .child-view > * {
-          /* max height of the video is full screen, minus the height of the header of the dialog and the padding of the dialog (mdc-dialog-max-height: calc(100% - 72px)) */
+            min-height: calc(100vh - 56px);
-          --video-max-height: calc(100vh - 65px - 72px);
+          }
-        }
-
-        :host([has-child-view]) ha-dialog {
-          --content-padding: 0;
-        }
-
-        .content {
-          padding: var(--content-padding);
         }
 
         .main-title {

src/dialogs/more-info/ha-more-info-info.ts

@@ -16,6 +16,7 @@ import {
 } from "./const";
 import "./ha-more-info-history";
 import "./ha-more-info-logbook";
+import "./more-info-content";
 
 @customElement("ha-more-info-info")
 export class MoreInfoInfo extends LitElement {
@@ -29,52 +30,59 @@ export class MoreInfoInfo extends LitElement {
     const entityId = this.entityId;
     const stateObj = this.hass.states[entityId];
     const domain = computeDomain(entityId);
+    const newMoreInfo = computeShowNewMoreInfo(stateObj);
 
     return html`
-      ${!stateObj
+      <div class="container" data-domain=${domain}>
-        ? html`<ha-alert alert-type="warning">
+        ${!stateObj
-            ${this.hass.localize(
+          ? html`<ha-alert alert-type="warning">
-              "ui.dialogs.entity_registry.editor.unavailable"
+              ${this.hass.localize(
-            )}
+                "ui.dialogs.entity_registry.editor.unavailable"
-          </ha-alert>`
+              )}
-        : ""}
+            </ha-alert>`
-      ${stateObj?.attributes.restored && this._entityEntry
+          : ""}
-        ? html`<ha-alert alert-type="warning">
+        ${stateObj?.attributes.restored && this._entityEntry
-            ${this.hass.localize(
+          ? html`<ha-alert alert-type="warning">
-              "ui.dialogs.more_info_control.restored.no_longer_provided",
+              ${this.hass.localize(
-              {
+                "ui.dialogs.more_info_control.restored.no_longer_provided",
-                integration: this._entityEntry.platform,
+                {
-              }
+                  integration: this._entityEntry.platform,
-            )}
+                }
-          </ha-alert>`
+              )}
-        : ""}
+            </ha-alert>`
-      ${DOMAINS_NO_INFO.includes(domain) || computeShowNewMoreInfo(stateObj)
+          : ""}
-        ? ""
+        <div class="content">
-        : html`
+          ${DOMAINS_NO_INFO.includes(domain) || computeShowNewMoreInfo(stateObj)
-            <state-card-content
+            ? ""
-              in-dialog
+            : html`
-              .stateObj=${stateObj}
+                <state-card-content
-              .hass=${this.hass}
+                  in-dialog
-            ></state-card-content>
+                  .stateObj=${stateObj}
-          `}
+                  .hass=${this.hass}
-      ${DOMAINS_WITH_MORE_INFO.includes(domain) ||
+                ></state-card-content>
-      !computeShowHistoryComponent(this.hass, entityId)
+              `}
-        ? ""
+          ${DOMAINS_WITH_MORE_INFO.includes(domain) ||
-        : html`<ha-more-info-history
+          !computeShowHistoryComponent(this.hass, entityId)
+            ? ""
+            : html`<ha-more-info-history
+                .hass=${this.hass}
+                .entityId=${this.entityId}
+              ></ha-more-info-history>`}
+          ${DOMAINS_WITH_MORE_INFO.includes(domain) ||
+          !computeShowLogBookComponent(this.hass, entityId)
+            ? ""
+            : html`<ha-more-info-logbook
+                .hass=${this.hass}
+                .entityId=${this.entityId}
+              ></ha-more-info-logbook>`}
+          <more-info-content
+            ?full-height=${newMoreInfo}
+            .stateObj=${stateObj}
             .hass=${this.hass}
-            .entityId=${this.entityId}
+          ></more-info-content>
-          ></ha-more-info-history>`}
+          <div class="toto"></div>
-      ${DOMAINS_WITH_MORE_INFO.includes(domain) ||
+        </div>
-      !computeShowLogBookComponent(this.hass, entityId)
+      </div>
-        ? ""
-        : html`<ha-more-info-logbook
-            .hass=${this.hass}
-            .entityId=${this.entityId}
-          ></ha-more-info-logbook>`}
-      <more-info-content
-        .stateObj=${stateObj}
-        .hass=${this.hass}
-      ></more-info-content>
     `;
   }
 
@@ -91,6 +99,40 @@ export class MoreInfoInfo extends LitElement {
 
   static get styles() {
     return css`
+      .container {
+        display: flex;
+        flex-direction: column;
+      }
+
+      @media all and (max-width: 450px) {
+        .container {
+          min-height: calc(100vh - 56px);
+        }
+      }
+
+      .content {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        padding: 24px;
+        padding-bottom: max(env(safe-area-inset-bottom), 24px);
+      }
+
+      [data-domain="camera"] .content {
+        padding: 0;
+        /* max height of the video is full screen, minus the height of the header of the dialog and the padding of the dialog (mdc-dialog-max-height: calc(100% - 72px)) */
+        --video-max-height: calc(100vh - 65px - 72px);
+      }
+
+      more-info-content {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+      }
+      more-info-content[full-height] {
+        flex: 1;
+      }
+
       state-card-content,
       ha-more-info-history,
       ha-more-info-logbook:not(:last-child) {
@@ -100,9 +142,6 @@ export class MoreInfoInfo extends LitElement {
 
       ha-alert {
         display: block;
-        margin: calc(-1 * var(--content-padding, 24px))
-          calc(-1 * var(--content-padding, 24px)) 16px
-          calc(-1 * var(--content-padding, 24px));
       }
     `;
   }