Merge pull request #668 from danskernesdigitalebibliotek/feature/find…

…-on-shelf-changes Feature/find on shelf changes
danskernesdigitalebibliotek · Sep 9, 2024 · b737f92 · b737f92
2 parents 5250699 + c0fa584
commit b737f92
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/src/stories/Library/Lists/list-find-on-shelf/ListFindOnShelf.tsx b/src/stories/Library/Lists/list-find-on-shelf/ListFindOnShelf.tsx
@@ -17,7 +17,9 @@ const ListFindOnShelf: React.FC<ListFindOnShelfProps> = ({
     <ul className="find-on-shelf">
       <li className="find-on-shelf__header-row text-small-caption">
         <span className="find-on-shelf__material-header">Materiale</span>
-        <span>Find det på hylden</span>
+        <span className="find-on-shelf__location-header">
+          Find det på hylden
+        </span>
         <span className="find-on-shelf__item-count-header">Hjemme</span>
       </li>
       {numberArray.map((key) => {

diff --git a/src/stories/Library/Lists/list-find-on-shelf/list-find-on-shelf.scss b/src/stories/Library/Lists/list-find-on-shelf/list-find-on-shelf.scss
@@ -16,6 +16,11 @@
     width: 404px;
   }
 
+  &__location-header {
+    white-space: nowrap;
+    padding-right: $s-lg;
+  }
+
   &__item-count-header {
     @include media-query__small {
       margin-left: auto;
@@ -42,9 +47,7 @@
     max-width: 600px;
 
     @include media-query__small {
-      // Both width and min-width need to be here to prevent flex shrink & stretch.
       width: 404px;
-      min-width: 404px;
     }
   }
 

diff --git a/src/stories/Library/dropdown/Dropdown.tsx b/src/stories/Library/dropdown/Dropdown.tsx
@@ -59,7 +59,7 @@ const DropdownElement: React.FC<DropdownElementProps> = ({
         <select className={classes.select} aria-label={ariaLabel}>
           {list.map(({ title, disabled }, index) => (
             <option
-              key={index}
+              key={index + title}
               className={classes.option}
               value={title}
               disabled={disabled !== undefined ? disabled : false}