Fix the behavior of the date picker on narrow screens

See https://www.woltlab.com/community/thread/303036-delayed-publication-buttons-outside-the-area/

diff --git a/ts/WoltLabSuite/Core/Date/Picker.ts b/ts/WoltLabSuite/Core/Date/Picker.ts
index 2a2b293aa833c6287af81ee82d4d211d2b38408d..213ace06d892ddf1dca7bcc7ca4f46e2a337331e 100644 (file)
--- a/ts/WoltLabSuite/Core/Date/Picker.ts
+++ b/ts/WoltLabSuite/Core/Date/Picker.ts
@@ -791,7 +791,7 @@ const DatePicker = {
 
         // create input addon
         const container = document.createElement("div");
-        container.className = "inputAddon";
+        container.className = "inputAddon inputAddonDatePicker";
 
         const openButton = document.createElement("button");
         openButton.type = "button";

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js
index f36eaf956eb9e88a3e9b1635893779c75e91ccfd..caa9a0b78e732bf8557ee77a95fb76990b3ce3d4 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js
@@ -658,7 +658,7 @@ define(["require", "exports", "tslib", "../Core", "./Util", "../Event/Handler",
                 element.addEventListener("click", open);
                 // create input addon
                 const container = document.createElement("div");
-                container.className = "inputAddon";
+                container.className = "inputAddon inputAddonDatePicker";
                 const openButton = document.createElement("button");
                 openButton.type = "button";
                 openButton.className = "inputSuffix button jsTooltip";

diff --git a/wcfsetup/install/files/style/ui/datePicker.scss b/wcfsetup/install/files/style/ui/datePicker.scss
index 8724c99dec14a148e443db728f4d4a6bccecf69b..74a56a5f3dcc54782d873a1aff8cc6dc93399fcc 100644 (file)
--- a/wcfsetup/install/files/style/ui/datePicker.scss
+++ b/wcfsetup/install/files/style/ui/datePicker.scss
@@ -123,3 +123,11 @@
                text-align: center;
        }
 }
+
+@include screen-sm-down {
+       .inputAddon.inputAddonDatePicker .inputDatePicker {
+               flex: 1 auto;
+               min-width: auto;
+               width: auto;
+       }
+}