Prevent Invite and DevTools dialogs from being cut off (#8646)

* fix: replace fixed height based styling with flex for invite and dev dialogs
* feat: create flex wrapper class for dialogs
* feat: make invite dialogs use flex layout
* feat: make devtools dialogs use flex layout

res/css/views/dialogs/_DevtoolsDialog.scss

@@ -16,18 +16,24 @@ limitations under the License.
 
 .mx_DevtoolsDialog_wrapper {
     .mx_Dialog {
-        height: 100%;
+        display: flex;
+        flex-direction: column;
     }
 
     .mx_Dialog_fixedWidth {
-        overflow-y: hidden;
+        display: flex;
-        height: 100%;
+        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 {

res/css/views/dialogs/_InviteDialog.scss

@@ -14,6 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_InviteDialog_flexWrapper .mx_Dialog {
+    display: flex;
+    flex-direction: column;
+}
+
 .mx_InviteDialog_transferWrapper .mx_Dialog {
     padding-bottom: 16px;
 }
@@ -128,8 +133,9 @@ limitations under the License.
         text-transform: uppercase;
     }
 
-    .mx_CopyableText {
+    .mx_CopyableText.mx_CopyableText_border {
         width: unset; // full width
+        margin-bottom: 0;
 
         > a {
             text-decoration: none;
@@ -270,14 +276,16 @@ 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 {
@@ -285,29 +293,37 @@ limitations under the License.
             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;
+    width: auto;
-    height: 466px;
-    flex-direction: column;
 
     .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 +343,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 +392,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
+    /* This wants a drop shadow the full width of the dialog, so use negative margin to make it full width,
-     * and make it wider, then compensate with padding
+     * 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;

src/RoomInvite.tsx

@@ -63,7 +63,7 @@ export function showStartChatInviteDialog(initialText = ""): void {
     // This dialog handles the room creation internally - we don't need to worry about it.
     Modal.createTrackedDialog(
         'Start DM', '', InviteDialog, { kind: KIND_DM, initialText },
-        /*className=*/null, /*isPriority=*/false, /*isStatic=*/true,
+        /*className=*/"mx_InviteDialog_flexWrapper", /*isPriority=*/false, /*isStatic=*/true,
     );
 }
 
@@ -75,7 +75,7 @@ export function showRoomInviteDialog(roomId: string, initialText = ""): void {
             initialText,
             roomId,
         },
-        /*className=*/null, /*isPriority=*/false, /*isStatic=*/true,
+        /*className=*/"mx_InviteDialog_flexWrapper", /*isPriority=*/false, /*isStatic=*/true,
     );
 }
 

src/utils/DialogOpener.ts

@@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import classnames from "classnames";
+
 import defaultDispatcher from "../dispatcher/dispatcher";
 import { ActionPayload } from "../dispatcher/payloads";
 import Modal from "../Modal";
@@ -89,7 +91,8 @@ export class DialogOpener {
                     kind: payload.kind,
                     call: payload.call,
                     roomId: payload.roomId,
-                }, payload.className, false, true).finished.then((results) => {
+                }, classnames("mx_InviteDialog_flexWrapper", payload.className), false, true).finished
+                    .then((results) => {
                         payload.onFinishedCallback?.(results);
                     });
                 break;