fix(ui5-card-header): fix rtl support (#4536)

SAP · Dec 31, 2021 · 14a2a03 · 14a2a03
1 parent 02e3f3a
commit 14a2a03
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git a/packages/main/src/CardHeader.hbs b/packages/main/src/CardHeader.hbs
@@ -27,9 +27,16 @@
 		{{/if}}
 	</div>
 
-	{{#if hasAction}}
-		<slot name="action"></slot>
-	{{else}}
-		<span id="{{_id}}-status" part="status" class="ui5-card-header-status" dir="auto">{{status}}</span>
-	{{/if}}
+	<div class="ui5-card-header-action">
+		{{#if hasAction}}
+			<slot name="action"></slot>
+		{{else}}
+			<span
+				id="{{_id}}-status"
+				part="status"
+				class="ui5-card-header-status"
+				dir="auto"	
+			>{{status}}</span>
+		{{/if}}
+	</div>
 </div>
diff --git a/packages/main/src/themes/CardHeader.css b/packages/main/src/themes/CardHeader.css
@@ -72,7 +72,6 @@
 	color: var(--sapTile_TextColor);
 	text-align: left;
 	line-height: 1.125rem;
-	padding-left: 1rem;
 	margin-left: auto;
 	text-overflow: ellipsis;
 	overflow: hidden;
@@ -109,15 +108,20 @@
 	max-width: 100%;
 }
 
+
+.ui5-card-header-action {
+	display: flex;
+	padding-left: 1rem;
+}
+
 [dir="rtl"].ui5-card-header .ui5-card-header-avatar {
 	margin-left: .75rem;
 	margin-right: 0;
 }
 
-[dir="rtl"].ui5-card-header .ui5-card-header-status {
+[dir="rtl"].ui5-card-header .ui5-card-header-action {
 	padding-right: 1rem;
 	padding-left: 0rem;
-	margin-right: auto;
 }
 
 [dir="rtl"].ui5-card-header .ui5-card-header-text .ui5-card-header-title {