Fix some css and add troubleshooting card

Author: stvncode

home-assistant-connect-zwa-2/install-portable.html

@@ -47,6 +47,10 @@
         border-radius: 8px;
       }
 
+      warning-card::part(container) {
+        margin: -5px 20px 20px;
+      }
+
       install-esphome-firmware .min-h-screen {
         min-height: auto !important;
       }

home-assistant-connect-zwa-2/install.html

@@ -52,6 +52,10 @@
         min-height: auto !important;
       }
 
+      warning-card::part(container) {
+        margin: -5px 20px 20px;
+      }
+
       a {
         color: #03a9f4;
         text-decoration: none;

src/components/details.ts

@@ -127,7 +127,7 @@ export class DetailsPage extends LitElement {
 
     @media (max-width: 768px) {
       :host {
-        padding: 0px;
+        padding: 20px 0 0 0;
       }
 
       .hero[data-expanded='false'] ::slotted([slot='secondary-description']),

src/components/warning-card.ts

@@ -50,7 +50,7 @@ export class WarningCard extends LitElement {
 
   render() {
     return html`
-      <div class="warning-container">
+      <div class="warning-container" part="container">
         <div class="warning-card">
           <svg class="warning-icon" viewBox="0 0 24 24" fill="currentColor">
             <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />

src/pages/zwa2-install-poe.ts

@@ -12,6 +12,33 @@ export class Zwa2InstallPoEPage extends LitElement {
       display: block;
     }
 
+    .troubleshooting-container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 0 20px;
+    }
+
+    .troubleshooting-card {
+      background: var(--app-bg-card);
+      border-radius: 16px;
+      padding: 16px 20px;
+      box-shadow: 0 2px 8px var(--app-shadow);
+      margin: 20px 0 30px;
+    }
+
+    .troubleshooting-card h3 {
+      margin-top: 0;
+    }
+
+    .troubleshooting-card a {
+      color: var(--wa-color-brand-50);
+      text-decoration: none;
+    }
+
+    .troubleshooting-card a:hover {
+      text-decoration: underline;
+    }
+
     p[slot='subtitle'] {
       color: var(--wa-color-brand-50);
       font-size: 1.1rem;
@@ -322,7 +349,11 @@ export class Zwa2InstallPoEPage extends LitElement {
             </li>
             <li>Enjoy!</li>
           </ol>
+        </div>
+      </details-page>
 
+      <div class="troubleshooting-container">
+        <div class="troubleshooting-card">
           <h3>Troubleshooting</h3>
           <p>
             Make sure the Waveshare ESP32-PoE board is connected to the same
@@ -359,7 +390,7 @@ export class Zwa2InstallPoEPage extends LitElement {
             and connect the ZWA-2 directly to Home Assistant.
           </p>
         </div>
-      </details-page>
+      </div>
     `;
   }
 }

src/pages/zwa2-install-portable.ts

@@ -9,6 +9,33 @@ export class Zwa2InstallPortablePage extends LitElement {
       display: block;
     }
 
+    .troubleshooting-container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 0 20px;
+    }
+
+    .troubleshooting-card {
+      background: var(--app-bg-card);
+      border-radius: 16px;
+      padding: 16px 20px;
+      box-shadow: 0 2px 8px var(--app-shadow);
+      margin: 20px 0 30px;
+    }
+
+    .troubleshooting-card h3 {
+      margin-top: 0;
+    }
+
+    .troubleshooting-card a {
+      color: var(--wa-color-brand-50);
+      text-decoration: none;
+    }
+
+    .troubleshooting-card a:hover {
+      text-decoration: underline;
+    }
+
     p[slot='subtitle'] {
       color: var(--wa-color-brand-50);
       font-size: 1.1rem;
@@ -198,7 +225,11 @@ export class Zwa2InstallPortablePage extends LitElement {
               <i>rebuild network routes</i>.
             </li>
           </ol>
+        </div>
+      </details-page>
 
+      <div class="troubleshooting-container">
+        <div class="troubleshooting-card">
           <h3>Troubleshooting</h3>
           <p>
             Make sure the ZWA-2 is connected to the same network as Home
@@ -232,7 +263,7 @@ export class Zwa2InstallPortablePage extends LitElement {
             and connect it directly to Home Assistant.
           </p>
         </div>
-      </details-page>
+      </div>
     `;
   }