Fix OuiComboBoxPill not using all the width when OuiComboBox is compr…

…essed

Also:
* Make the OuiComboBoxOptionsList occupy the full width of its panel
* Fix the logic for calculation of OuiComboBoxPill's max-with

Signed-off-by: Miki <miki@amazon.com>

src/components/combo_box/_combo_box.scss

@@ -37,11 +37,12 @@
     @include ouiFormControlLayoutPadding(1); /* 2 */
 
     .ouiComboBoxPill {
-      $inputMinWidth: $ouiSize;
+      $inputMinWidth: 10px;
 
       // Ensure the input doesn't drop to the next line when the OuiBadge has a very long text
       // Overrides the default OuiBadge max-width that is 100%
-      max-width: calc(100% - #{$ouiSizeXS * .5} - #{$inputMinWidth});
+      // $inputMinWidth is really 10px and the text-field has 2 x $ouiSizeXS margins
+      max-width: calc(100% - #{$ouiSizeXS * 2} - #{$inputMinWidth});
     }
 
     .ouiComboBoxIcon {

src/components/combo_box/combo_box_input/_combo_box_pill.scss

@@ -45,6 +45,14 @@
     line-height: calc($ouiSizeL - 2px);
   }
 
+  // Ensure the input doesn't drop to the next line when the OuiBadge has a very long text
+  // Overrides the default OuiBadge max-width that is 100%
+  // $inputMinWidth is really 10px and the text-field has a $ouiSizeXS right margin
+  .ouiComboBox .ouiComboBox__inputWrap & {
+    $inputMinWidth: 10px;
+    max-width: calc(100% - #{$ouiSizeXS} - #{$inputMinWidth});
+  }
+
   // In a group, reduce top and left margins and increase right margin by 1px
   .ouiComboBox--compressed .ouiFormControlLayout--group &,
   .ouiComboBox--compressed .ouiFormControlLayout--group & + & /* 1 */ {

src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss

@@ -37,5 +37,8 @@
 
   > div { // Targets the element for FixedSizeList that doesn't have a selector
     @include ouiScrollBar;
+
+    // Match the min-width of the Panel
+    min-width: 100%;
   }
 }