Allow overflow of select option content

TrestleAdmin · Apr 17, 2024 · 0c47443 · 0c47443
1 parent c3a569a
commit 0c47443
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/app/assets/bundle/trestle/bundle.css b/app/assets/bundle/trestle/bundle.css
diff --git a/frontend/css/components/_select.scss b/frontend/css/components/_select.scss
@@ -15,6 +15,14 @@
     }
   }
 
+  .select2-selection--single {
+    .select2-selection__rendered {
+      height: 100%;
+      overflow: visible;
+      padding-right: 1.25em;
+    }
+  }
+
   .select2-selection--multiple {
     padding: $s2bs5-padding-y $s2bs5-padding-y;
 
@@ -47,12 +55,14 @@
     &.select2-container--below {
       .select2-selection {
         clip-path: inset($inset $inset 0 $inset);
+        border-bottom-width: 1px;
       }
     }
 
     &.select2-container--above {
       .select2-selection {
         clip-path: inset(0 $inset $inset $inset);
+        border-top-width: 1px;
       }
     }
 

diff --git a/frontend/css/variables/_bootstrap.scss b/frontend/css/variables/_bootstrap.scss
@@ -163,6 +163,9 @@ $form-check-padding-start: $form-check-input-width + 0.6em;
 $form-switch-width: 2.25em;
 $form-switch-focus-color: #aaaaaa;
 
+$form-select-padding-x-sm: 0.62rem;
+$form-select-padding-x-lg: 0.75rem;
+
 
 // Dropdowns