[TASK] fix scale with grid stacks

Author: KartoffelToby

README.md

@@ -1,4 +1,4 @@
-[![Version - 2.1.0](https://img.shields.io/badge/Version-2.1.0-009688?style=for-the-badge)](https://github.com/KartoffelToby/better-thermostat-ui-card)
+[![Version - 2.1.1](https://img.shields.io/badge/Version-2.1.1-009688?style=for-the-badge)](https://github.com/KartoffelToby/better-thermostat-ui-card)
 [![Discord](https://img.shields.io/discord/925725316540923914.svg?style=for-the-badge)](https://discord.gg/9BUegWTG3K)
 [![hacs_badge](https://img.shields.io/badge/HACS-Default-41BDF5.svg?style=for-the-badge)](https://github.com/hacs/integration)
 

dist/better-thermostat-ui-card.js

@@ -1,6 +1,6 @@
 {
   "name": "better-thermostat-ui-card",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Lovelace better-thermostat-ui",
   "keywords": [
     "home-assistant",

package.json

@@ -223,6 +223,12 @@ export class BetterThermostatUi extends LitElement implements LovelaceCard {
         padding-top: 1.5em;
         box-sizing: border-box;
         position: relative;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        align-content: center;
+        justify-content: center;
+        align-items: center;
       }
 
       bt-ha-outlined-icon-button {
@@ -496,17 +502,19 @@ export class BetterThermostatUi extends LitElement implements LovelaceCard {
         --mode-color: var(--energy-non-fossil-color) !important;
       }
 
+      @container bt-card (max-width: 280px) {
+        .content {
+          top: calc(50% - 10px);
+        }
+      }
+
       @container bt-card (max-width: 255px) {
         #modes {
           margin-top: -2em;
         }
         ha-card {
           padding-top: 2em;
         }
-        .content {
-          width: calc(90% - 40px);
-          top: calc(50% - 20px);
-        }
       }
   `;
 
@@ -708,7 +716,9 @@ export class BetterThermostatUi extends LitElement implements LovelaceCard {
         tabindex="0"
       ></ha-icon-button>
       `}
-      <div class="name">${this._config?.name}</div>
+      ${this?._config?.name?.length || 0 > 0 ? html`
+        <div class="name">${this._config?.name}</div>
+        ` : html`<div class="name">&nbsp;</div>`}
       ${this.lowBattery !== null ? html`
         <div class="low_battery">
           <ha-icon-button class="alert" .path=${mdiBatteryAlert}>

src/better-thermostat-ui.ts

@@ -1 +1 @@
-export const CARD_VERSION = '2.1.0';
+export const CARD_VERSION = '2.1.1';