fix(option): Fixes an issue with the scrollbar on firefox causing tex…

…t to be cut short unintentionally.

libs/barista-components/autocomplete/src/autocomplete.scss

@@ -22,6 +22,13 @@ $dt-autocomplete-panel-min-width: 112px !default;
   -webkit-overflow-scrolling: touch; // for momentum scroll on mobile
 }
 
+@supports (-moz-appearance: none) {
+  .dt-autocomplete-panel {
+    width: calc(100% + 20px);
+    flex-shrink: 0; // to not shrink on FF if there is a scroll bar
+  }
+}
+
 .dt-autocomplete-hidden {
   display: none;
 }

libs/barista-components/core/src/option/option.html

@@ -0,0 +1,3 @@
+<span class="dt-option-label">
+  <ng-content></ng-content>
+</span>

libs/barista-components/core/src/option/option.scss

@@ -3,16 +3,17 @@
 
 :host {
   @include dt-main-font();
-  display: block;
+  position: relative;
+  cursor: pointer;
+  outline: none;
+  display: flex;
+  flex-direction: row;
+  max-width: 100%;
+  box-sizing: border-box;
+  align-items: center;
   padding: 0 12px;
   font-size: 14px;
   line-height: 28px;
-  cursor: default;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  outline: none;
-  font-variant: tabular-nums;
 
   &:not(.dt-option-disabled).dt-option-active {
     background-color: $turquoise-100;
@@ -27,3 +28,11 @@
     color: $disabledcolor;
   }
 }
+
+.dt-option-label {
+  display: inline-block;
+  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

libs/barista-components/core/src/option/option.ts

@@ -67,7 +67,7 @@ export class DtOptionSelectionChange<T> {
     class: 'dt-option',
   },
   styleUrls: ['option.scss'],
-  template: '<ng-content></ng-content>',
+  templateUrl: 'option.html',
   encapsulation: ViewEncapsulation.Emulated,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })