From c43068720f5f63b4dd433443d7ad9840beef8791 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Fri, 27 Jan 2023 16:26:32 -0500
Subject: [PATCH] FIX: Better UX for timezones selector in date modal (#20047)

When expanding the "Advanced mode" of the date modal, the Timezones
picker was at the bottom of the modal, and expanding it would often
overflow the viewport. This PR moves the elment higher up, therefore
avoiding the overflow.

There's a small width change as well, for better consistency.
---
 .../discourse-local-dates-create-form.hbs     | 32 ++++++++-----------
 .../common/discourse-local-dates.scss         |  4 +--
 2 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs b/plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs
index 2f849ee6ea..21c3f9a319 100644
--- a/plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs
+++ b/plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs
@@ -133,6 +133,19 @@
           </div>
         {{/unless}}
 
+        <div class="control-group timezones">
+          <label>{{i18n
+            "discourse_local_dates.create.form.timezones_title"
+            }}</label>
+          <p>{{i18n
+            "discourse_local_dates.create.form.timezones_description"
+            }}</p>
+          <div class="controls">
+            <MultiSelect @valueProperty={{null}} @nameProperty={{null}} @class="timezones-input" @content={{this.allTimezones}}
+              @value={{this.timezones}} @options={{hash allowAny=false maximum=5}} />
+          </div>
+        </div>
+
         <div class="control-group format">
           <label>{{i18n
               "discourse_local_dates.create.form.format_title"
@@ -169,25 +182,6 @@
             {{/each}}
           </ul>
         </div>
-
-        <div class="control-group timezones">
-          <label>{{i18n
-              "discourse_local_dates.create.form.timezones_title"
-            }}</label>
-          <p>{{i18n
-              "discourse_local_dates.create.form.timezones_description"
-            }}</p>
-          <div class="controls">
-            <MultiSelect
-              @valueProperty={{null}}
-              @nameProperty={{null}}
-              @class="timezones-input"
-              @content={{this.allTimezones}}
-              @value={{this.timezones}}
-              @options={{hash allowAny=false maximum=5}}
-            />
-          </div>
-        </div>
       </div>
     {{/if}}
   </div>
diff --git a/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss b/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss
index 34fd4dabdc..3f200f5ef8 100644
--- a/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss
+++ b/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss
@@ -265,7 +265,7 @@ div[data-tippy-root] {
 
     .recurrence {
       .recurrence-input {
-        width: 300px;
+        width: 350px;
       }
     }
   }
@@ -298,7 +298,7 @@ div[data-tippy-root] {
   }
 
   .timezones-input {
-    width: 99%;
+    width: 350px;
   }
 }