fix: replace fixed height based styling with flex for invite and dev …

…dialogs
matrix-org · May 19, 2022 · 1a5464c · 1a5464c
1 parent 82169ab
commit 1a5464c
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 26 deletions.
diff --git a/res/css/views/dialogs/_DevtoolsDialog.scss b/res/css/views/dialogs/_DevtoolsDialog.scss
@@ -20,14 +20,19 @@ limitations under the License.
     }
 
     .mx_Dialog_fixedWidth {
-        overflow-y: hidden;
-        height: 100%;
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        max-height: 100%;
+
+        .mx_Dialog_buttons button {
+            margin-bottom: 0;
+        }
     }
 }
 
 .mx_DevTools_content {
     overflow-y: auto;
-    height: calc(100% - 124px); // 58px for buttons + 50px for header + 8px margin around
 }
 
 .mx_DevTools_RoomStateExplorer_query {

diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss
@@ -130,6 +130,7 @@ limitations under the License.
 
     .mx_CopyableText {
         width: unset; // full width
+        margin-bottom: 0;
 
         > a {
             text-decoration: none;
@@ -270,44 +271,54 @@ limitations under the License.
 
 .mx_InviteDialog_other {
     // Prevent the dialog from jumping around randomly when elements change.
-    height: 600px;
+    display: flex;
+    flex-direction: column;
+    max-height: 600px;
+    overflow: hidden;
 
     .mx_InviteDialog_addressBar {
         margin-right: 0;
     }
 
     .mx_InviteDialog_userSections {
-        height: calc(100% - 115px); // mx_InviteDialog's height minus some for the upper and lower elements
         padding-right: 0;
 
         .mx_InviteDialog_section {
             padding-bottom: 0;
             margin-top: 12px;
         }
     }
-
-    .mx_InviteDialog_hasFooter {
-        .mx_InviteDialog_userSections {
-            height: calc(100% - 175px); // For displaying an invite link on the footer of the dialog
-        }
-    }
 }
 
 .mx_InviteDialog_content {
-    height: calc(100% - 36px); // full height minus the size of the header
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 1;
     overflow: hidden;
 }
 
 .mx_InviteDialog_transfer {
-    width: 496px;
-    height: 466px;
-    flex-direction: column;
+    width: auto;
 
     .mx_InviteDialog_content {
-        flex-direction: column;
+        width: 496px;
+        height: 430px;
 
         .mx_TabbedView {
-            height: calc(100% - 60px);
+            display: flex;
+            flex-direction: column;
+            flex-shrink: 1;
+            flex-grow: 1;
+            min-height: 0;
+
+            .mx_TabbedView_tabPanel {
+                flex-direction: column;
+
+                .mx_TabbedView_tabPanelContent {
+                    display: flex;
+                    flex-direction: column;
+                }
+            }
         }
         overflow: visible;
     }
@@ -327,10 +338,6 @@ limitations under the License.
     padding: 0 45px 4px 0;
 }
 
-.mx_InviteDialog_hasFooter .mx_InviteDialog_userSections {
-    height: calc(100% - 175px);
-}
-
 .mx_InviteDialog_helpText {
     margin: 0;
 }
@@ -380,14 +387,13 @@ limitations under the License.
 
 .mx_InviteDialog_transferConsultConnect {
     padding-top: 16px;
-    /* This wants a drop shadow the full width of the dialog, so relative-position it
-     * and make it wider, then compensate with padding
+    /* This wants a drop shadow the full width of the dialog, so use negative margin to make it full width,
+     * then compensate with padding
      */
-    position: relative;
-    width: 496px;
-    left: -24px;
     padding-left: 24px;
     padding-right: 24px;
+    margin-left: -24px;
+    margin-right: -24px;
     border-top: 1px solid $quinary-content;
 
     display: flex;