Responsive BetaCard on Labs (#8154)

matrix-org · Mar 28, 2022 · f557ac9 · f557ac9
1 parent a7a0c55
commit f557ac9
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 23 deletions.
diff --git a/res/css/views/beta/_BetaCard.scss b/res/css/views/beta/_BetaCard.scss
@@ -23,56 +23,74 @@ limitations under the License.
 
     .mx_BetaCard_columns {
         display: flex;
+        flex-flow: wrap;
+        gap: 20px;
+        justify-content: center;
+
+        .mx_BetaCard_columns_description {
+            flex: 1;
 
-        > div {
             .mx_BetaCard_title {
                 font-weight: $font-semi-bold;
                 font-size: $font-18px;
                 line-height: $font-22px;
                 color: $primary-content;
                 margin: 4px 0 14px;
 
-                .mx_BetaCard_betaPill {
-                    margin-left: 12px;
-                }
+                display: flex;
+                align-items: center;
+                column-gap: 12px;
             }
 
             .mx_BetaCard_caption {
                 font-size: $font-15px;
                 line-height: $font-20px;
                 color: $secondary-content;
-                margin-bottom: 20px;
             }
 
-            .mx_BetaCard_buttons .mx_AccessibleButton {
-                display: block;
-                margin: 12px 0;
-                padding: 7px 40px;
-                width: auto;
+            .mx_BetaCard_buttons {
+                display: flex;
+                flex-wrap: wrap-reverse;
+                gap: 12px;
+                margin: 20px auto;
+
+                .mx_AccessibleButton {
+                    padding: 7px 40px;
+                    width: auto;
+                    flex: 1;
+                    white-space: nowrap; // text might overflow
+
+                    &:nth-child(1) {
+                        order: 2; // Place feedback button top and right
+                    }
+                }
             }
 
             .mx_BetaCard_disclaimer {
                 font-size: $font-12px;
                 line-height: $font-15px;
                 color: $secondary-content;
-                margin-top: 20px;
 
                 > h4 {
-                    margin: 0;
+                    margin: 12px 0 0;
                 }
 
                 > p {
-                    margin-top: 0;
+                    margin: 0;
                 }
             }
         }
 
-        > img {
-            margin: auto 0 auto 20px;
-            width: 300px;
-            object-fit: contain;
-            height: 100%;
-            border-radius: 4px;
+        .mx_BetaCard_columns_image_wrapper {
+            margin: auto 0;
+
+            .mx_BetaCard_columns_image {
+                width: 100%;
+                max-width: 300px;
+                object-fit: contain;
+                height: 100%;
+                border-radius: 4px;
+            }
         }
     }
 

diff --git a/src/components/views/beta/BetaCard.tsx b/src/components/views/beta/BetaCard.tsx
@@ -101,12 +101,12 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
 
     return <div className="mx_BetaCard">
         <div className="mx_BetaCard_columns">
-            <div>
+            <div className="mx_BetaCard_columns_description">
                 <h3 className="mx_BetaCard_title">
-                    { titleOverride || _t(title) }
+                    <span>{ titleOverride || _t(title) }</span>
                     <BetaPill />
                 </h3>
-                <span className="mx_BetaCard_caption">{ caption() }</span>
+                <div className="mx_BetaCard_caption">{ caption() }</div>
                 <div className="mx_BetaCard_buttons">
                     { feedbackButton }
                     <AccessibleButton
@@ -132,7 +132,9 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
                     { disclaimer(value) }
                 </div> }
             </div>
-            <img src={image} alt="" />
+            <div className="mx_BetaCard_columns_image_wrapper">
+                <img className="mx_BetaCard_columns_image" src={image} alt="" />
+            </div>
         </div>
         { extraSettings && value && <div className="mx_BetaCard_relatedSettings">
             { extraSettings.map(key => (