Rearrange daterange presets to allow for additional item

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/DaterangeSelect.vue

@@ -11,7 +11,7 @@
                             <template v-for="preset of presets">
                                 <a class="daterange__preset" href="#"
                                    @click.prevent="selectPreset(preset)">
-                                    <i class="fa fa-calendar"></i> {{ preset.label }}
+                                    <i class="fa fa-calendar"></i> <span>{{ preset.label }}</span>
                                 </a>
                             </template>
                         </div>

web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/_searchbar.scss

@@ -88,10 +88,6 @@
                       }
                     }
                 }
-                &.daterange a {
-                    width: 80%;
-                    margin: 0 auto;
-                }
                 a{
                     color:$colorBlack;
                 }

web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/remix/_datepicker.scss

@@ -3,6 +3,11 @@
 }
 
 .daterange__panel {
+  padding: 8px 0;
+
+  .flatpickr-calendar {
+    margin: 0 auto;
+  }
 }
 
 .daterange__headline,
@@ -12,12 +17,16 @@
 
 .daterange__presets {
   display: flex;
-  padding: 8px 0;
+  justify-content: space-between;
 }
 
 .daterange__preset {
-  flex: 1;
+  display: block;
   color: $color-font-base;
+
+  .fa {
+    display: block;
+  }
 }
 
 .daterange__buttons {