From a3f063303795b785e10b2b7efb2ce7b176cc7ef4 Mon Sep 17 00:00:00 2001
From: Kerry <kerrya@element.io>
Date: Tue, 14 Nov 2023 10:57:20 +1300
Subject: [PATCH] Fix: align base card close button to the right always
 (#11861)

---
 res/css/views/right_panel/_BaseCard.pcss      |  6 +++-
 .../views/right_panel/_RoomSummaryCard.pcss   |  4 ---
 src/components/views/right_panel/BaseCard.tsx |  2 +-
 .../__snapshots__/AppTile-test.tsx.snap       | 32 +++++++++++--------
 .../__snapshots__/UserInfo-test.tsx.snap      |  6 +++-
 5 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/res/css/views/right_panel/_BaseCard.pcss b/res/css/views/right_panel/_BaseCard.pcss
index 952efa159b..494c61c180 100644
--- a/res/css/views/right_panel/_BaseCard.pcss
+++ b/res/css/views/right_panel/_BaseCard.pcss
@@ -51,7 +51,6 @@ limitations under the License.
             display: flex;
             align-items: center;
             justify-content: space-between;
-            width: calc(100% - 38px);
             height: 24px;
             flex: 1;
 
@@ -157,6 +156,7 @@ limitations under the License.
 
 .mx_BaseCard_back,
 .mx_BaseCard_close {
+    flex-shrink: 0;
     position: relative;
     background-color: var(--cpd-color-bg-subtle-secondary);
     width: var(--BaseCard_header-button-size);
@@ -226,3 +226,7 @@ limitations under the License.
         }
     }
 }
+
+.mx_BaseCard_headerProp {
+    flex: 1 1 100%;
+}
diff --git a/res/css/views/right_panel/_RoomSummaryCard.pcss b/res/css/views/right_panel/_RoomSummaryCard.pcss
index d6da39365e..4e68f258d1 100644
--- a/res/css/views/right_panel/_RoomSummaryCard.pcss
+++ b/res/css/views/right_panel/_RoomSummaryCard.pcss
@@ -194,10 +194,6 @@ limitations under the License.
 
 .mx_RoomSummaryCard_header {
     padding: 15px 12px;
-
-    .mx_BaseCard_close {
-        flex-shrink: 0;
-    }
 }
 
 .mx_RoomSummaryCard_search input {
diff --git a/src/components/views/right_panel/BaseCard.tsx b/src/components/views/right_panel/BaseCard.tsx
index bb835a022f..580db4621a 100644
--- a/src/components/views/right_panel/BaseCard.tsx
+++ b/src/components/views/right_panel/BaseCard.tsx
@@ -90,7 +90,7 @@ const BaseCard: React.FC<IProps> = forwardRef<HTMLDivElement, IProps>(
                         <div className="mx_BaseCard_header">
                             {backButton}
                             {closeButton}
-                            {header}
+                            <div className="mx_BaseCard_headerProp">{header}</div>
                         </div>
                     )}
                     {children}
diff --git a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
index 1bd3fd04a7..b7d639e4f2 100644
--- a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
+++ b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
@@ -20,22 +20,26 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
           title="Close"
         />
         <div
-          class="mx_BaseCard_header_title"
+          class="mx_BaseCard_headerProp"
         >
-          <h4
-            class="mx_Heading_h4 mx_BaseCard_header_title_heading"
-          >
-            Example 1
-          </h4>
           <div
-            aria-expanded="false"
-            aria-haspopup="true"
-            aria-label="Options"
-            class="mx_AccessibleButton mx_BaseCard_header_title_button--option"
-            role="button"
-            tabindex="0"
-            title="Options"
-          />
+            class="mx_BaseCard_header_title"
+          >
+            <h4
+              class="mx_Heading_h4 mx_BaseCard_header_title_heading"
+            >
+              Example 1
+            </h4>
+            <div
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-label="Options"
+              class="mx_AccessibleButton mx_BaseCard_header_title_button--option"
+              role="button"
+              tabindex="0"
+              title="Options"
+            />
+          </div>
         </div>
       </div>
       <div
diff --git a/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap b/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
index 904e980093..45d97a74ce 100644
--- a/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
+++ b/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
@@ -84,7 +84,11 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
         tabindex="0"
         title="Close"
       />
-      <span />
+      <div
+        class="mx_BaseCard_headerProp"
+      >
+        <span />
+      </div>
     </div>
     <div
       class="mx_AutoHideScrollbar"