From b9f88de73eb406066cbc30e8cc9992abdf466ef7 Mon Sep 17 00:00:00 2001
From: Siyana Todorova <siyana.todorova@sap.com>
Date: Mon, 17 Aug 2026 17:13:42 +0300
Subject: [PATCH 1/3] fux(ui5-card): Header counter is properly aligned

fixes: #13922
---
 packages/main/src/CardHeaderTemplate.tsx | 37 ++++++++++++------------
 packages/main/src/themes/CardHeader.css  | 16 +++-------
 2 files changed, 22 insertions(+), 31 deletions(-)

diff --git a/packages/main/src/CardHeaderTemplate.tsx b/packages/main/src/CardHeaderTemplate.tsx
index 072a338033c07..0d5eadf82e882 100644
--- a/packages/main/src/CardHeaderTemplate.tsx
+++ b/packages/main/src/CardHeaderTemplate.tsx
@@ -31,23 +31,15 @@ export default function CardHeaderTemplate(this: CardHeader) {
 				}
 
 				<div class="ui5-card-header-text">
-					<div class="ui5-card-header-first-line">
-						{this.titleText &&
-							<div
-								id={`${this._id}-title`}
-								class="ui5-card-header-title"
-								part="title"
-								role="heading"
-								aria-level={3}
-							>{this.titleText}</div>
-						}
-
-						{this.additionalText &&
-							<div class="ui5-card-header-additionalText">
-								<span id={`${this._id}-additionalText`} part="additional-text" dir="auto">{this.additionalText}</span>
-							</div>
-						}
-					</div>
+					{this.titleText &&
+						<div
+							id={`${this._id}-title`}
+							class="ui5-card-header-title"
+							part="title"
+							role="heading"
+							aria-level={3}
+						>{this.titleText}</div>
+					}
 
 					{this.subtitleText &&
 						<div id={`${this._id}-subtitle`} class="ui5-card-header-subtitle" part="subtitle">{this.subtitleText}</div>
@@ -55,13 +47,20 @@ export default function CardHeaderTemplate(this: CardHeader) {
 				</div>
 			</div>
 
-			{this.hasAction &&
+			{(this.hasAction || this.additionalText) &&
 				<div
 					class="ui5-card-header-action"
 					onFocusIn={this._actionsFocusin}
 					onFocusOut={this._actionsFocusout}
 				>
-					<slot name="action"></slot>
+					{this.hasAction &&
+						<slot name="action"></slot>
+					}
+					{this.additionalText &&
+						<div class="ui5-card-header-additionalText">
+							<span id={`${this._id}-additionalText`} part="additional-text" dir="auto">{this.additionalText}</span>
+						</div>
+					}
 				</div>
 			}
 		</div>
diff --git a/packages/main/src/themes/CardHeader.css b/packages/main/src/themes/CardHeader.css
index 733633976aa16..c179915e591ce 100644
--- a/packages/main/src/themes/CardHeader.css
+++ b/packages/main/src/themes/CardHeader.css
@@ -74,15 +74,6 @@
 	pointer-events: none;
 }
 
-.ui5-card-header-first-line {
-	display: flex;
-	flex-flow: row;
-	justify-content: space-between;
-}
-
-.ui5-card-header-additionalText {
-	flex: none;
-}
 
 .ui5-card-header .ui5-card-header-avatar {
 	height: 3rem;
@@ -112,13 +103,11 @@
 	font-family: var(--sapFontFamily);
 	font-size: var(--sapFontSmallSize);
 	color: var(--sapTile_TextColor);
-	text-align: left;
+	text-align: end;
 	text-overflow: ellipsis;
 	overflow: hidden;
 	white-space: nowrap;
 	vertical-align: middle;
-	margin-inline-start: 1rem;
-	margin-block-start: 0.125rem;
 }
 
 .ui5-card-header .ui5-card-header-text .ui5-card-header-title {
@@ -157,6 +146,9 @@
 
 .ui5-card-header-action {
 	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	gap: 0.25rem;
 	padding-inline-start: 1rem;
 	align-self: flex-start;
 }
\ No newline at end of file

From 85831228a91f76e49dba314efc90b4a0269bef7a Mon Sep 17 00:00:00 2001
From: Siyana Todorova <siyana.todorova@sap.com>
Date: Fri, 4 Sep 2026 14:54:58 +0300
Subject: [PATCH 2/3] fix(ui5-card): address comments

---
 packages/main/src/CardHeaderTemplate.tsx |  2 +-
 packages/main/src/themes/CardHeader.css  | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/main/src/CardHeaderTemplate.tsx b/packages/main/src/CardHeaderTemplate.tsx
index 0d5eadf82e882..956b21a55f347 100644
--- a/packages/main/src/CardHeaderTemplate.tsx
+++ b/packages/main/src/CardHeaderTemplate.tsx
@@ -49,7 +49,7 @@ export default function CardHeaderTemplate(this: CardHeader) {
 
 			{(this.hasAction || this.additionalText) &&
 				<div
-					class="ui5-card-header-action"
+					class="ui5-card-header-action-and-additional-text"
 					onFocusIn={this._actionsFocusin}
 					onFocusOut={this._actionsFocusout}
 				>
diff --git a/packages/main/src/themes/CardHeader.css b/packages/main/src/themes/CardHeader.css
index c179915e591ce..edd59bcddca25 100644
--- a/packages/main/src/themes/CardHeader.css
+++ b/packages/main/src/themes/CardHeader.css
@@ -4,6 +4,7 @@
 	position: relative;
 	display: flex;
 	align-items: center;
+	gap: 1rem;
 	padding: var(--_ui5_card_header_padding);
 	outline: none;
 }
@@ -144,11 +145,16 @@
 	-webkit-line-clamp: 3;
 }
 
-.ui5-card-header-action {
+.ui5-card-header-action-and-additional-text {
 	display: flex;
 	flex-direction: column;
 	align-items: flex-end;
 	gap: 0.25rem;
-	padding-inline-start: 1rem;
 	align-self: flex-start;
+}
+
+.ui5-card-header-action-and-additional-text ::slotted([slot="action"]) {
+	position: relative;
+	top: -8px;
+	inset-inline-end: -8px;
 }
\ No newline at end of file

From c325bb6b3fa33b8947049930e5e9f3b51ff016b3 Mon Sep 17 00:00:00 2001
From: Siyana Todorova <siyana.todorova@sap.com>
Date: Fri, 4 Sep 2026 16:26:25 +0300
Subject: [PATCH 3/3] chore: change px to rem

---
 packages/main/src/themes/CardHeader.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/main/src/themes/CardHeader.css b/packages/main/src/themes/CardHeader.css
index edd59bcddca25..e2b0abd7c84c7 100644
--- a/packages/main/src/themes/CardHeader.css
+++ b/packages/main/src/themes/CardHeader.css
@@ -155,6 +155,6 @@
 
 .ui5-card-header-action-and-additional-text ::slotted([slot="action"]) {
 	position: relative;
-	top: -8px;
-	inset-inline-end: -8px;
+	top: -0.5rem;
+	inset-inline-end: -0.5rem;
 }
\ No newline at end of file