From 7d3c77008d04a291d6cd40ea05f063fca6f3b1ec Mon Sep 17 00:00:00 2001
From: Wendelin <12148533+wendevlin@users.noreply.github.com>
Date: Thu, 12 Dec 2024 17:02:51 +0100
Subject: [PATCH] Mobile styles for backup summary (#23276)

* Add mobile backup summary styles

* revert padding
---
 .../backup/components/ha-backup-summary-card.ts   | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/panels/config/backup/components/ha-backup-summary-card.ts b/src/panels/config/backup/components/ha-backup-summary-card.ts
index 0efef8c3b5..1054f0b061 100644
--- a/src/panels/config/backup/components/ha-backup-summary-card.ts
+++ b/src/panels/config/backup/components/ha-backup-summary-card.ts
@@ -68,7 +68,8 @@ class HaBackupSummaryCard extends LitElement {
     .summary {
       display: flex;
       flex-direction: row;
-      gap: 16px;
+      column-gap: 16px;
+      row-gap: 8px;
       align-items: center;
       padding: 20px;
       width: 100%;
@@ -139,6 +140,18 @@ class HaBackupSummaryCard extends LitElement {
       overflow: hidden;
       white-space: nowrap;
     }
+
+    @media all and (max-width: 550px) {
+      .summary {
+        flex-wrap: wrap;
+        padding: 8px;
+      }
+      .action {
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+      }
+    }
   `;
 }