From 18abe74fd904462a6424298ad1ee6c63ef163ad3 Mon Sep 17 00:00:00 2001
From: dingausmwald <30699246+dingausmwald@users.noreply.github.com>
Date: Mon, 8 Sep 2025 11:02:00 +0200
Subject: [PATCH] Update tabbed-card.ts

Horizontal align icon with label

Lowercase label (can be uppercased by typing uppercase!?)
---
 src/tabbed-card.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/tabbed-card.ts b/src/tabbed-card.ts
index d998566..31fbae8 100644
--- a/src/tabbed-card.ts
+++ b/src/tabbed-card.ts
@@ -60,6 +60,7 @@ export class TabbedCard extends LitElement {
       "rgba(var(--rgb-primary-text-color), 0.8)", // Color of an unactivated tab label.
     "--mdc-tab-color-default": "rgba(var(--rgb-primary-text-color), 0.7)", // Color of an unactivated icon.
     "--mdc-typography-button-font-size": "14px",
+    "--mdc-typography-button-text-transform": "none", // Remove default uppercase transformation
   };
 
   private async loadCardHelpers() {
@@ -154,6 +155,16 @@ export class TabbedCard extends LitElement {
     }
 
     return html`
+      <style>
+        mwc-tab {
+          --mdc-tab-height: 48px;
+        }
+        mwc-tab ha-icon {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      </style>
       <mwc-tab-bar
         @MDCTabBar:activated=${(ev: mwcTabBarEvent) =>
         (this.selectedTabIndex = ev.detail.index)}