From ed378037ac3b36c2ee13ad1167969fb210112a74 Mon Sep 17 00:00:00 2001
From: Johannes Marbach <johannesm@element.io>
Date: Fri, 6 Jan 2023 17:24:13 +0100
Subject: [PATCH] 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 b20c17cd2af3..dc0e61b65ef3 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 32975c6833ab..97ddbda2c98a 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")}
                         />
                     </div>
-                    <form onSubmit={this.onSubmit}>
+                    <form onSubmit={this.onSubmit} className="mx_CompoundDialog_form">
                         <div className="mx_CompoundDialog_content">{this.renderContent()}</div>
                         <div className="mx_CompoundDialog_footer">
                             <AccessibleButton onClick={this.onCancel} kind="primary_outline">