Bug: Fix collapsible section closing on desktop view (#179)

* don't use collapsible on desktop in collapsible_section
software-mansion · Mar 10, 2025 · aed2594 · aed2594
1 parent b6866b1
commit aed2594
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 14 deletions.
diff --git a/lib/live_debugger/components.ex b/lib/live_debugger/components.ex
@@ -112,7 +112,6 @@ defmodule LiveDebugger.Components do
   attr(:id, :string, required: true)
   attr(:class, :any, default: nil, doc: "CSS class for parent container")
   attr(:label_class, :any, default: nil, doc: "CSS class for the label")
-  attr(:label_style, :any, default: nil, doc: "CSS style for the label")
   attr(:chevron_class, :any, default: nil, doc: "CSS class for the chevron icon")
   attr(:open, :boolean, default: false, doc: "Whether the collapsible is open by default")
 
@@ -140,7 +139,6 @@ defmodule LiveDebugger.Components do
         class={[
           "block flex items-center cursor-pointer" | List.wrap(@label_class)
         ]}
-        style={@label_style}
         {@rest}
       >
         <.icon name={@icon} class={["rotate-icon shrink-0" | List.wrap(@chevron_class)]} />
@@ -170,22 +168,29 @@ defmodule LiveDebugger.Components do
         id={@id}
         title={@title}
         open={@open}
-        class="bg-white rounded-sm w-full"
-        label_class="h-12 p-2 lg:pl-4 lg:pointer-events-none pointer-events-auto border-b border-secondary-100"
-        chevron_class="lg:hidden flex text-primary-900"
+        class="bg-white rounded-sm w-full lg:hidden"
+        label_class="h-12 p-2 border-b border-secondary-100"
+        chevron_class="text-primary-900"
       >
         <:label>
-          <div class="flex justify-between items-center w-full">
-            <div class="font-medium text-sm"><%= @title %></div>
-            <div class="w-max !pointer-events-auto">
-              <%= render_slot(@right_panel) %>
-            </div>
-          </div>
+          <.collapsible_section_label title={@title}>
+            <%= render_slot(@right_panel) %>
+          </.collapsible_section_label>
         </:label>
-        <div class={["w-full flex overflow-auto rounded-sm bg-white p-2" | List.wrap(@inner_class)]}>
+        <.collapsible_section_content class={@inner_class}>
           <%= render_slot(@inner_block) %>
-        </div>
+        </.collapsible_section_content>
       </.collapsible>
+      <div class="hidden lg:flex flex-col w-full bg-white rounded-sm">
+        <div class="pl-4 flex items-center h-12 p-2 border-b border-secondary-100">
+          <.collapsible_section_label title={@title}>
+            <%= render_slot(@right_panel) %>
+          </.collapsible_section_label>
+        </div>
+        <.collapsible_section_content class={@inner_class}>
+          <%= render_slot(@inner_block) %>
+        </.collapsible_section_content>
+      </div>
     </div>
     """
   end
@@ -566,6 +571,33 @@ defmodule LiveDebugger.Components do
     """
   end
 
+  attr(:title, :string, required: true)
+
+  slot(:inner_block)
+
+  defp collapsible_section_label(assigns) do
+    ~H"""
+    <div class="flex justify-between items-center w-full">
+      <div class="font-medium text-sm"><%= @title %></div>
+      <div class="w-max">
+        <%= render_slot(@inner_block) %>
+      </div>
+    </div>
+    """
+  end
+
+  attr(:class, :any, default: nil)
+
+  slot(:inner_block, required: true)
+
+  defp collapsible_section_content(assigns) do
+    ~H"""
+    <div class={["w-full flex overflow-auto rounded-sm bg-white p-2" | List.wrap(@class)]}>
+      <%= render_slot(@inner_block) %>
+    </div>
+    """
+  end
+
   attr(:variant, :string, required: true, values: ["danger", "success", "warning", "info"])
 
   defp alert_icon(assigns) do

diff --git a/lib/live_debugger/components/tree.ex b/lib/live_debugger/components/tree.ex
@@ -90,7 +90,7 @@ defmodule LiveDebugger.Components.Tree do
           chevron_class="text-primary-900 h-5 w-5"
           open={@open}
           label_class="w-full rounded-md py-1 hover:bg-secondary-100"
-          label_style={style_for_padding(@level, @collapsible?)}
+          style={style_for_padding(@level, @collapsible?)}
         >
           <:label>
             <.label