fix select2 and dropdown width for quick-entry form (#3188)

assets/js/plugins/KimaiFormSelect.js

@@ -118,9 +118,13 @@ export default class KimaiFormSelect extends KimaiPlugin {
         options = {...options, ...{
             language: this.getConfiguration('locale').replace('_', '-'),
             theme: "bootstrap",
-            matcher: this.matcher
+            matcher: this.matcher,
+            dropdownAutoWidth: true,
+            width: "resolve"
         }};
 
+        const element = jQuery(node);
+
         if (node.dataset['renderer'] !== undefined && node.dataset['renderer'] === 'color') {
             const templateResultFunc = function (state) {
                 return jQuery('<span><span style="background-color:'+state.id+'; width: 20px; height: 20px; display: inline-block; margin-right: 10px;">&nbsp;</span>' + state.text + '</span>');
@@ -131,10 +135,20 @@ export default class KimaiFormSelect extends KimaiPlugin {
                 templateResult: templateResultFunc
             }};
 
-            jQuery(node).select2(colorOptions);
+            element.select2(colorOptions);
         } else {
-            jQuery(node).select2(options);
+            element.select2(options);
         }
+
+        // this is a bugfix for safari, which does render the dropdown only with correct width upon the second opening
+        // see https://github.com/select2/select2/issues/4678
+        element.on('select2:open', function (ev) {
+            if (element.data('performing-reopen') === undefined || element.data('performing-reopen') === null) {
+                element.data('performing-reopen', true);
+                element.select2('close');
+                element.select2('open');
+            }
+        });
     }
 
     activateSelectPicker(selector, container) {

assets/sass/forms.scss

@@ -52,4 +52,9 @@ form.form-narrow {
 .checkbox-menu li.active label:hover,
 .checkbox-menu li.active label:focus {
     background-color: #b8b8ff;
+}
+
+.duration-input {
+    min-width:50px;
+    padding: 6px;
 }

assets/sass/selectpicker.scss

@@ -20,4 +20,10 @@
 /* empty <option> were too small to be noticed as clickable element */
 .select2-container--bootstrap .select2-results__option {
     min-height: 30px;
-}
+}
+
+/* Fixes the size on quick-entry form */
+.select2-container--bootstrap {
+    display: table;
+    table-layout: fixed;
+}