Fix: Date inputs between selector style issue

Author: dchyun

packages/components/src/components/hds/filter-bar/filter-group/date.hbs

@@ -33,7 +33,7 @@
             "hds.components.filter-bar.filter-group.date.between-value-inputs.start-placeholder"
             default="Start"
           }}
-          class="hds-filter-bar__filter-group__field"
+          class="hds-filter-bar__filter-group__field hds-filter-bar__filter-group__field--between"
           {{on "change" this.onBetweenValueStartChange}}
         />
         <Hds::Form::TextInput::Base
@@ -44,7 +44,7 @@
             "hds.components.filter-bar.filter-group.date.between-value-inputs.end-placeholder"
             default="End"
           }}
-          class="hds-filter-bar__filter-group__field"
+          class="hds-filter-bar__filter-group__field hds-filter-bar__filter-group__field--between"
           {{on "change" this.onBetweenValueEndChange}}
         />
       </Hds::Layout::Flex>

packages/components/src/styles/components/filter-bar.scss

@@ -153,6 +153,11 @@
   .hds-filter-bar__filter-group__field[type="time"] {
     width: 100%;
   }
+
+  .hds-filter-bar__filter-group__field--between[type="date"] {
+    // Due to a limitation with the native date input's min-width in Chrome, we need to explicitly set the width.
+    width: 130px;
+  }
 }
 
 .hds-filter-bar__filter-group__numerical,