Prevent text in forecast row from overflowing

pkissling · Oct 18, 2022 · 65e5e13 · 65e5e13
1 parent b6ce45c
commit 65e5e13
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/src/clock-weather-card.ts b/src/clock-weather-card.ts
@@ -154,7 +154,7 @@ export class ClockWeatherCard extends LitElement {
       .map((f) => f.temperature);
     const minTemp = Math.round(min(minTemps));
     const maxTemp = Math.round(max(maxTemps));
-    const temperatueUnit = weather.attributes.temperature_unit
+    const temperatueUnit = weather.attributes.temperature_unit;
     const gradientRange = this.gradientRange(minTemp, maxTemp, temperatueUnit);
     return weather.attributes.forecast
       .slice(0, days)
@@ -181,9 +181,9 @@ export class ClockWeatherCard extends LitElement {
 
   private renderText(text: string, textAlign: 'left' | 'center' | 'right' = 'left'): TemplateResult {
     return html`
-      <div style="text-align: ${textAlign}">
+      <forecast-text style="--text-align: ${textAlign};">
         ${text}
-      </div>
+      </forecast-text>
     `;
   }
 

diff --git a/src/styles.ts b/src/styles.ts
@@ -60,11 +60,18 @@ export default css`
 
   clock-weather-card-forecast-row {
     display: grid;
-    grid-template-columns: 2rem 2rem 2rem auto 2rem;
+    grid-template-columns: 2rem 2rem 2.1rem auto 2.1rem;
     align-items: center;
     grid-gap: 0.5rem;
   }
 
+  forecast-text {
+    text-align: var(--text-align);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: clip;
+  }
+
   forecast-icon {
     display: flex;
     align-items: center;