Merge pull request #129 from barrymun/bug/selector-text-overflow

Bug - Fix selector component text overflow

Author: technoph1le

src/styles/main.css

@@ -331,15 +331,22 @@ abbr {
   border-radius: var(--br-md);
   cursor: pointer;
 
-  display: grid;
-  grid-template-columns: 1fr auto;
+  display: flex;
   align-items: center;
+  justify-content: space-between;
 }
 
 .selector__value {
   display: flex;
   gap: 0.5em;
   align-items: center;
+  width: calc(100% - 30px); /* 30px accounts for the arrow */
+}
+
+.selector__value > span {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .selector__value img {
@@ -379,6 +386,7 @@ abbr {
   list-style: none;
 
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+  z-index: 1;
 }
 
 .selector__dropdown:focus-within {