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

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

@@ -19,6 +19,9 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
           tabindex="0"
           title="Close"
         />
+        <div
+          class="mx_BaseCard_headerProp"
+        >
           <div
             class="mx_BaseCard_header_title"
           >
@@ -38,6 +41,7 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
             />
           </div>
         </div>
+      </div>
       <div
         class="mx_AppTileFullWidth"
         id="1"

test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap

@@ -84,8 +84,12 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
         tabindex="0"
         title="Close"
       />
+      <div
+        class="mx_BaseCard_headerProp"
+      >
         <span />
       </div>
+    </div>
     <div
       class="mx_AutoHideScrollbar"
       tabindex="-1"