From fc6b83c786c41fb9fd49a5dcb24b283e7f28c7c0 Mon Sep 17 00:00:00 2001 From: Johannes Marbach Date: Fri, 6 Jan 2023 17:24:13 +0100 Subject: [PATCH 1/3] Make create poll dialog scale better Fixes: vector-im/element-web#21855 --- res/css/views/dialogs/_CompoundDialog.pcss | 27 +++++++++++++------ .../views/dialogs/ScrollableBaseModal.tsx | 2 +- 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/res/css/views/dialogs/_CompoundDialog.pcss b/res/css/views/dialogs/_CompoundDialog.pcss index b20c17cd2af..dc0e61b65ef 100644 --- a/res/css/views/dialogs/_CompoundDialog.pcss +++ b/res/css/views/dialogs/_CompoundDialog.pcss @@ -27,6 +27,11 @@ limitations under the License. } .mx_CompoundDialog { + .mx_Dialog { + display: flex; + flex-direction: column; + } + .mx_CompoundDialog_header { padding: 32px 32px 16px 32px; @@ -49,6 +54,13 @@ limitations under the License. } } + .mx_CompoundDialog_form { + display: flex; + flex-direction: column; + min-height: 0; + max-height: 100%; + } + .mx_CompoundDialog_content { overflow: auto; padding: 8px 32px; @@ -57,10 +69,6 @@ limitations under the License. .mx_CompoundDialog_footer { padding: 20px 32px; text-align: right; - position: absolute; - bottom: 0; - left: 0; - right: 0; .mx_AccessibleButton { margin-left: 24px; @@ -69,14 +77,17 @@ limitations under the License. } .mx_ScrollableBaseDialog { + display: flex; + flex-direction: column; + width: 544px; /* fixed */ height: 516px; /* fixed */ - - .mx_CompoundDialog_content { - height: 349px; /* dialogHeight - header - footer */ - } + max-width: 100%; + min-height: 0; + max-height: 80%; .mx_CompoundDialog_footer { box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.05); /* hardcoded colour for both themes */ + z-index: 1; } } diff --git a/src/components/views/dialogs/ScrollableBaseModal.tsx b/src/components/views/dialogs/ScrollableBaseModal.tsx index 32975c6833a..97ddbda2c98 100644 --- a/src/components/views/dialogs/ScrollableBaseModal.tsx +++ b/src/components/views/dialogs/ScrollableBaseModal.tsx @@ -96,7 +96,7 @@ export default abstract class ScrollableBaseModal< aria-label={_t("Close dialog")} /> -
+
{this.renderContent()}
From 214fa13d7d5040929be4a8e97495e25299adc694 Mon Sep 17 00:00:00 2001 From: Johannes Marbach Date: Fri, 6 Jan 2023 17:44:36 +0100 Subject: [PATCH 2/3] Update snapshots --- .../elements/__snapshots__/PollCreateDialog-test.tsx.snap | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/test/components/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap b/test/components/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap index 1bcf17dcd42..7e60d633599 100644 --- a/test/components/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap +++ b/test/components/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`PollCreateDialog renders a blank poll 1`] = `"
"`; +exports[`PollCreateDialog renders a blank poll 1`] = `"
"`; -exports[`PollCreateDialog renders a question and some options 1`] = `"
"`; +exports[`PollCreateDialog renders a question and some options 1`] = `"
"`; -exports[`PollCreateDialog renders info from a previous event 1`] = `"
"`; +exports[`PollCreateDialog renders info from a previous event 1`] = `"
"`; From f97cef80aed8ee6011543f08bee8b1745a33a7db Mon Sep 17 00:00:00 2001 From: Johannes Marbach Date: Tue, 10 Jan 2023 12:14:25 +0100 Subject: [PATCH 3/3] Add comment explaining z-index --- res/css/views/dialogs/_CompoundDialog.pcss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/dialogs/_CompoundDialog.pcss b/res/css/views/dialogs/_CompoundDialog.pcss index dc0e61b65ef..15df4f39511 100644 --- a/res/css/views/dialogs/_CompoundDialog.pcss +++ b/res/css/views/dialogs/_CompoundDialog.pcss @@ -88,6 +88,6 @@ limitations under the License. .mx_CompoundDialog_footer { box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.05); /* hardcoded colour for both themes */ - z-index: 1; + z-index: 1; /* needed to make footer & shadow appear above dialog content */ } }