From 928ff1dc7dcfe8098f7e8c26427c1d54d6855238 Mon Sep 17 00:00:00 2001
From: rowa-audil <rowa.audil@dynatrace.com>
Date: Wed, 7 Oct 2020 06:12:33 +0000
Subject: [PATCH] fix(option): Fixes an issue with the scrollbar on firefox
 causing text to be cut short unintentionally.

---
 .../autocomplete/src/autocomplete.scss        |  7 ++++++
 .../core/src/option/option.html               |  3 +++
 .../core/src/option/option.scss               | 23 +++++++++++++------
 .../core/src/option/option.ts                 |  2 +-
 4 files changed, 27 insertions(+), 8 deletions(-)
 create mode 100644 libs/barista-components/core/src/option/option.html

diff --git a/libs/barista-components/autocomplete/src/autocomplete.scss b/libs/barista-components/autocomplete/src/autocomplete.scss
index 186f865a24..a52f9e8d7c 100644
--- a/libs/barista-components/autocomplete/src/autocomplete.scss
+++ b/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;
 }
diff --git a/libs/barista-components/core/src/option/option.html b/libs/barista-components/core/src/option/option.html
new file mode 100644
index 0000000000..c11adab4e3
--- /dev/null
+++ b/libs/barista-components/core/src/option/option.html
@@ -0,0 +1,3 @@
+<span class="dt-option-label">
+  <ng-content></ng-content>
+</span>
diff --git a/libs/barista-components/core/src/option/option.scss b/libs/barista-components/core/src/option/option.scss
index f9166d4f35..cb2d5b1da9 100644
--- a/libs/barista-components/core/src/option/option.scss
+++ b/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;
+}
diff --git a/libs/barista-components/core/src/option/option.ts b/libs/barista-components/core/src/option/option.ts
index eaf2ebe4dd..a0623f80b8 100644
--- a/libs/barista-components/core/src/option/option.ts
+++ b/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,
 })