Fix: align base card close button to the right always (#11861)

Author: Kerry

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%;
+}

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 {

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}

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

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"