Make pills expandable

TelosLabs · Dec 20, 2024 · 078f27f · 078f27f
1 parent c1ed035
commit 078f27f
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -215,4 +215,15 @@ input.admin-panel-population:disabled + label {
     width: 100%;
   }
 
+}
+
+// Expandable panel on hover
+#tabs-wrapper:hover #search-pills-panel {
+  max-height: 1000px;
+}
+
+#search-pills-panel {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease-in-out;
 }
diff --git a/app/components/search_pills/component.html.slim b/app/components/search_pills/component.html.slim
@@ -1,4 +1,4 @@
-div class="w-full bg-gray-9"
+div class="w-full bg-gray-9" id="tabs-wrapper"
   div data-controller="tabs" data-tabs-active-tab=("border-b-4 border-blue-medium") data-tabs-inactive-tab="underline-on-hover"
     div class="flex"
       / Clear-Counter button
@@ -19,7 +19,7 @@ div class="w-full bg-gray-9"
             span class="hidden relative mb-2 ml-1 w-2 h-2 rounded-full bg-salmon" id="appliedIcon"
 
     / Panels
-    div class="bg-white"
+    div class="bg-white" id="search-pills-panel"
       / Causes
       div class="flex hidden overflow-y-auto flex-wrap gap-x-2 gap-y-3 px-6 py-4 max-h-28 border-r border-b border-l" data-tabs-target="panel"
         - @causes.each do |cause|