From a74b9a70836b97b5a05a18c8e7ed2d7dcd9d8b7e Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski Date: Thu, 2 Jun 2022 15:59:40 +0200 Subject: [PATCH] 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 | 14 +++-- res/css/views/dialogs/_InviteDialog.scss | 59 +++++++++++++--------- src/RoomInvite.tsx | 4 +- src/utils/DialogOpener.ts | 9 ++-- 4 files changed, 53 insertions(+), 33 deletions(-) diff --git a/res/css/views/dialogs/_DevtoolsDialog.scss b/res/css/views/dialogs/_DevtoolsDialog.scss index b1fed0d29b..967d7c2fb9 100644 --- a/res/css/views/dialogs/_DevtoolsDialog.scss +++ b/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; - 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 index 35fedd7cf2..6420cf6179 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/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; - 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 +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 - * 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; diff --git a/src/RoomInvite.tsx b/src/RoomInvite.tsx index e9204996ed..f7cad38254 100644 --- a/src/RoomInvite.tsx +++ b/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, ); } diff --git a/src/utils/DialogOpener.ts b/src/utils/DialogOpener.ts index 8c5c9c374b..8bd6c13734 100644 --- a/src/utils/DialogOpener.ts +++ b/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,9 +91,10 @@ export class DialogOpener { kind: payload.kind, call: payload.call, roomId: payload.roomId, - }, payload.className, false, true).finished.then((results) => { - payload.onFinishedCallback?.(results); - }); + }, classnames("mx_InviteDialog_flexWrapper", payload.className), false, true).finished + .then((results) => { + payload.onFinishedCallback?.(results); + }); break; case Action.OpenAddToExistingSpaceDialog: { const space = payload.space;