Improve buttons layout (#1038)

piitaya · Feb 27, 2023 · 97a9ac4 · 97a9ac4
1 parent f3e6828
commit 97a9ac4
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/src/cards/climate-card/climate-card.ts b/src/cards/climate-card/climate-card.ts
@@ -251,15 +251,16 @@ export class ClimateCard extends MushroomBaseCard implements LovelaceCard {
     }
 
     private renderActiveControl(entity: ClimateEntity): TemplateResult | null {
-        const hvac_modes = this._config?.hvac_modes ?? [];
+        const hvac_modes = this._config!.hvac_modes ?? [];
+        const appearance = computeAppearance(this._config!);
 
         switch (this._activeControl) {
             case "temperature_control":
                 return html`
                     <mushroom-climate-temperature-control
                         .hass=${this.hass}
                         .entity=${entity}
-                        .fill=${true}
+                        .fill=${appearance.layout !== "horizontal"}
                     ></mushroom-climate-temperature-control>
                 `;
             case "hvac_mode_control":
@@ -268,7 +269,7 @@ export class ClimateCard extends MushroomBaseCard implements LovelaceCard {
                         .hass=${this.hass}
                         .entity=${entity}
                         .modes=${hvac_modes}
-                        .fill=${true}
+                        .fill=${appearance.layout !== "horizontal"}
                     ></mushroom-climate-hvac-modes-control>
                 `;
             default:

diff --git a/src/cards/update-card/update-card.ts b/src/cards/update-card/update-card.ts
@@ -121,7 +121,7 @@ export class UpdateCard extends MushroomBaseCard implements LovelaceCard {
                                       .hass=${this.hass}
                                       .entity=${entity}
                                       .fill=${appearance.layout !== "horizontal"}
-                                  />
+                                  ></mushroom-update-buttons-control>
                               </div>
                           `
                         : null}

diff --git a/src/shared/button-group.ts b/src/shared/button-group.ts
@@ -41,9 +41,14 @@ export class MushroomButtonGroup extends LitElement {
                 margin-right: initial;
                 margin-left: var(--spacing);
             }
-            .container.fill > ::slotted(*) {
-                flex: 1;
+            .container > ::slotted(*) {
                 width: 0;
+                flex-grow: 0;
+                flex-shrink: 1;
+                flex-basis: calc(var(--control-height) * var(--control-button-ratio));
+            }
+            .container.fill > ::slotted(*) {
+                flex-grow: 1;
             }
         `;
     }