chore: Update CSS styles for responsive layout and date input buttons

ngocjohn · Aug 3, 2024 · dfdade9 · dfdade9
1 parent a9da8bf
commit dfdade9
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/src/css/style.css b/src/css/style.css
@@ -29,9 +29,6 @@ ha-card {
 }
 
 @media screen and (max-width: 800px) {
-  ha-card {
-    font-size: 1.2vh !important;
-  }
   .moon-image {
     width: 100%;
     max-width: 100px !important;
@@ -222,8 +219,9 @@ section {
   width: 100%;
   position: relative;
   justify-content: space-around;
-  align-items: baseline;
+  align-items: normal;
   gap: 1rem;
+  text-wrap: nowrap;
 }
 .date-input-label {
   display: block;

diff --git a/src/lunar-phase-card.ts b/src/lunar-phase-card.ts
@@ -158,7 +158,8 @@ export class LunarPhaseCard extends LitElement {
     if (!this.hass || !this.config) {
       return html``;
     }
-    const isCalendar = this._activeCard === 'calendar';
+    const isCalendar = this._activeCard === 'calendar' || window.matchMedia('(max-width: 600px)').matches;
+
     return html`
       <ha-card class=${this._computeClasses()}>
         ${this.renderHeader()}
@@ -263,8 +264,8 @@ export class LunarPhaseCard extends LitElement {
     const dateInput = html`<div class="date-input-wrapper">
       <input type="date" class="date-input" .value=${this.selectedDate} @input=${this._handleDateChange} />
       <button @click=${() => this.updateDate('today')} class="date-input-btn click-shrink">Today</button>
-      <button @click=${() => this.updateDate('prev')} class="date-input-btn click-shrink">Previous day</button>
-      <button @click=${() => this.updateDate('next')} class="date-input-btn click-shrink">Next day</button>
+      <button @click=${() => this.updateDate('prev')} class="date-input-btn click-shrink"><</button>
+      <button @click=${() => this.updateDate('next')} class="date-input-btn click-shrink">></button>
     </div>`;
 
     return html`