Stop using absolute property to place beta pill on RoomPreviewCard (#…

…8872)
matrix-org · Jun 19, 2022 · cfbe1cb · cfbe1cb
1 parent b1e07e8
commit cfbe1cb
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 8 deletions.
diff --git a/res/css/views/rooms/_RoomPreviewCard.scss b/res/css/views/rooms/_RoomPreviewCard.scss
@@ -71,6 +71,11 @@ limitations under the License.
                 color: $secondary-content;
             }
         }
+
+        // XXX Remove this when video rooms leave beta
+        .mx_BetaCard_betaPill {
+            align-self: start;
+        }
     }
 
     .mx_RoomPreviewCard_avatar {
@@ -105,13 +110,6 @@ limitations under the License.
                 mask-image: url('$(res)/img/element-icons/call/video-call.svg');
             }
         }
-
-        // XXX Remove this when video rooms leave beta
-        .mx_BetaCard_betaPill {
-            position: absolute;
-            right: $spacing-24;
-            top: $spacing-32;
-        }
     }
 
     h1.mx_RoomPreviewCard_name {

diff --git a/src/components/views/rooms/RoomPreviewCard.tsx b/src/components/views/rooms/RoomPreviewCard.tsx
@@ -102,6 +102,7 @@ const RoomPreviewCard: FC<IProps> = ({ room, onJoinButtonClicked, onRejectButton
                         { inviteSender }
                     </div> : null }
                 </div>
+                <BetaPill onClick={viewLabs} tooltipTitle={_t("Video rooms are a beta feature")} />
             </div>;
         }
 
@@ -152,7 +153,6 @@ const RoomPreviewCard: FC<IProps> = ({ room, onJoinButtonClicked, onRejectButton
         avatarRow = <>
             <RoomAvatar room={room} height={50} width={50} viewAvatarOnClick />
             <div className="mx_RoomPreviewCard_video" />
-            <BetaPill onClick={viewLabs} tooltipTitle={_t("Video rooms are a beta feature")} />
         </>;
     } else if (room.isSpaceRoom()) {
         avatarRow = <RoomAvatar room={room} height={80} width={80} viewAvatarOnClick />;