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] 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