Merge pull request #51 from UrbanInstitute/patch-dropdown

Add text overflow ellipsis and right padding to BasicDropdown
UrbanInstitute · Apr 10, 2024 · e7428d8 · e7428d8
2 parents c6034e9 + 4c123c0
commit e7428d8
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## Next
 
+- Add right padding and ellipsis on text overflow to BasicDropdown
 - Add functionality to remove `placeholder` <option> in BasicDropdown component
 - Add LogoUrbanWide and create Logos story folder
 - Turn off interaction events `onDestroy` of DatawrapperIframe

diff --git a/src/lib/BasicDropdown/BasicDropdown.svelte b/src/lib/BasicDropdown/BasicDropdown.svelte
@@ -82,7 +82,7 @@
 
   .dropdown-select {
     color: var(--color-gray-shade-darker);
-    padding: var(--spacing-2) var(--spacing-3);
+    padding: var(--spacing-2) var(--spacing-8) var(--spacing-2) var(--spacing-3);
     font-size: var(--font-size-normal);
     font-family: Lato, helvetica, sans-serif;
     border: 1px solid var(--color-gray-shade-medium);
@@ -95,5 +95,6 @@
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
+    text-overflow: ellipsis;
   }
 </style>