Mobile view calendar improvements (#19218)

* Mobile view calendar improvements * Remove very narrow * Revert default choice
home-assistant · Feb 28, 2024 · ebdbab8 · ebdbab8
1 parent 155098b
commit ebdbab8
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/src/panels/calendar/ha-full-calendar.ts b/src/panels/calendar/ha-full-calendar.ts
@@ -188,7 +188,7 @@ export class HAFullCalendar extends LitElement {
                         </ha-icon-button-next>
                       </div>
                     </div>
-                    <div class="controls">
+                    <div class="controls buttons">
                       <mwc-button
                         outlined
                         class="today"
@@ -480,6 +480,16 @@ export class HAFullCalendar extends LitElement {
           width: 100%;
         }
 
+        .buttons {
+          display: flex;
+          flex-wrap: wrap;
+        }
+
+        .buttons > * {
+          margin-bottom: 5px;
+          box-sizing: border-box;
+        }
+
         .today {
           margin-right: 20px;
           margin-inline-end: 20px;

diff --git a/src/panels/lovelace/cards/hui-calendar-card.ts b/src/panels/lovelace/cards/hui-calendar-card.ts
@@ -69,8 +69,6 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
 
   @state() private _narrow = false;
 
-  @state() private _veryNarrow = false;
-
   @state() private _error?: string = undefined;
 
   private _startDate?: Date;
@@ -121,9 +119,11 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
       return nothing;
     }
 
-    const views: FullCalendarView[] = this._veryNarrow
-      ? ["listWeek"]
-      : ["dayGridMonth", "dayGridDay", "listWeek"];
+    const views: FullCalendarView[] = [
+      "dayGridMonth",
+      "dayGridDay",
+      "listWeek",
+    ];
 
     return html`
       <ha-card>
@@ -206,7 +206,6 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
       return;
     }
     this._narrow = card.offsetWidth < 870;
-    this._veryNarrow = card.offsetWidth < 350;
   }
 
   private async _attachObserver(): Promise<void> {