config+devtools: add safe-area content insets and layout adjustments (config dashboard, section padding, devtools action paddings)

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

@@ -246,11 +246,7 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
           </ha-list-item>
         </ha-button-menu>
 
-        <ha-config-section
-          .narrow=${this.narrow}
-          .isWide=${this.isWide}
-          full-width
-        >
+        <div class="content">
           ${repairsIssues.length || canInstallUpdates.length
             ? html`<ha-card outlined>
                 ${repairsIssues.length
@@ -321,7 +317,7 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
             ></ha-config-navigation>
           </ha-card>
           <ha-tip .hass=${this.hass}>${this._tip}</ha-tip>
-        </ha-config-section>
+        </div>
       </ha-top-app-bar-fixed>
     `;
   }
@@ -392,10 +388,19 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
         :host(:not([narrow])) ha-card:last-child {
           margin-bottom: max(24px, var(--safe-area-inset-bottom));
         }
-        ha-config-section {
-          margin: auto;
-          margin-top: -32px;
+        .content {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 24px;
+          margin-top: 24px;
+          margin-left: var(--safe-area-content-inset-left);
+          margin-right: var(--safe-area-content-inset-right);
+        }
+        .content > * {
           max-width: 600px;
+          width: 100%;
+          display: block;
         }
         ha-card {
           overflow: hidden;
@@ -419,8 +424,10 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
             border-radius: 0;
             box-shadow: unset;
           }
-          ha-config-section {
-            margin-top: -42px;
+          .content {
+            margin-top: -1px;
+            margin-left: 0;
+            margin-right: 0;
           }
         }
 

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

@@ -39,7 +39,8 @@ export class HaConfigSection extends LitElement {
       display: block;
     }
     .content {
-      padding: 28px 20px 0;
+      padding: 28px max(20px, var(--safe-area-content-inset-right)) 0
+        max(20px, var(--safe-area-content-inset-left));
       max-width: 1040px;
       margin: 0 auto;
     }

src/panels/developer-tools/action/developer-tools-action.ts

@@ -612,7 +612,7 @@ class HaPanelDevAction extends LitElement {
           padding: max(16px, var(--safe-area-inset-top))
             max(16px, var(--safe-area-inset-right))
             max(16px, var(--safe-area-inset-bottom))
-            max(16px, var(--safe-area-inset-left));
+            max(16px, var(--safe-area-content-inset-left));
           max-width: 1200px;
           margin: auto;
         }
@@ -621,7 +621,7 @@ class HaPanelDevAction extends LitElement {
           padding: max(8px, var(--safe-area-inset-top))
             max(16px, var(--safe-area-inset-right))
             max(8px, var(--safe-area-inset-bottom))
-            max(16px, var(--safe-area-inset-left));
+            max(16px, var(--safe-area-content-inset-left));
           border-top: 1px solid var(--divider-color);
           border-bottom: 1px solid var(--divider-color);
           background: var(--card-background-color);