Fix overlay in collapsible panels (#2543)

* add specific margins to the collapsible panels when collapsed * update changelog
OpenFn · Oct 2, 2024 · 2d6ba79 · 2d6ba79
1 parent 534c6f5
commit 2d6ba79
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 38 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -21,6 +21,9 @@ and this project adheres to
 
 ### Fixed
 
+- Fix panel icons overlays on top title when collapsed
+  [#2537](https://github.com/OpenFn/lightning/issues/2537)
+
 ## [v2.9.7] - 2024-10-02
 
 ### Added

diff --git a/assets/css/app.css b/assets/css/app.css
@@ -271,8 +271,16 @@ div[id^='tippy-'] {
   display: block !important;
 }
 
+.manual-job-panel.collapsed .close-button {
+  @apply min-h-20;
+}
+
+.job-editor-panel.collapsed .close-button {
+  @apply min-h-16;
+}
+
 #output-logs.collapsed .close-button {
-  @apply !block mb-24;
+  @apply !block mb-20;
 }
 
 .collapsible-panel.collapsed .panel-collapse-icon {

diff --git a/lib/lightning_web/live/workflow_live/components.ex b/lib/lightning_web/live/workflow_live/components.ex
@@ -581,44 +581,42 @@ defmodule LightningWeb.WorkflowLive.Components do
         @class
       ]}
     >
-      <div class="flex-0 m-0">
+      <div
+        id={"#{@id}-panel-header"}
+        class="flex justify-between items-center p-2 px-4 panel-header"
+      >
         <div
-          id={"#{@id}-panel-header"}
-          class="flex justify-between items-center p-2 px-4 panel-header"
+          id={"#{@id}-panel-header-title"}
+          class="text-center font-semibold text-secondary-700 panel-header-title text-xs"
         >
-          <div
-            id={"#{@id}-panel-header-title"}
-            class="text-center font-semibold text-secondary-700 panel-header-title text-xs"
+          <%= for tabs <- @tabs do %>
+            <%= render_slot(tabs) %>
+          <% end %>
+          <div><%= @panel_title %></div>
+        </div>
+        <div class="close-button">
+          <a
+            id={"#{@id}-panel-collapse-icon"}
+            class="panel-collapse-icon"
+            href="#"
+            phx-click={JS.dispatch("collapse", to: "##{@id}")}
           >
-            <%= for tabs <- @tabs do %>
-              <%= render_slot(tabs) %>
-            <% end %>
-            <%= @panel_title %>
-          </div>
-          <div class="close-button">
-            <a
-              id={"#{@id}-panel-collapse-icon"}
-              class="panel-collapse-icon"
-              href="#"
-              phx-click={JS.dispatch("collapse", to: "##{@id}")}
-            >
-              <.icon
-                name="hero-minus-circle"
-                class="w-5 h-5 hover:bg-slate-400 text-slate-500"
-              />
-            </a>
-            <a
-              id={"#{@id}-panel-expand-icon"}
-              href="#"
-              class="hidden panel-expand-icon"
-              phx-click={JS.dispatch("expand-panel", to: "##{@id}")}
-            >
-              <.icon
-                name="hero-plus-circle"
-                class="w-5 h-5 hover:bg-slate-400 text-slate-500"
-              />
-            </a>
-          </div>
+            <.icon
+              name="hero-minus-circle"
+              class="w-5 h-5 hover:bg-slate-400 text-slate-500"
+            />
+          </a>
+          <a
+            id={"#{@id}-panel-expand-icon"}
+            href="#"
+            class="hidden panel-expand-icon"
+            phx-click={JS.dispatch("expand-panel", to: "##{@id}")}
+          >
+            <.icon
+              name="hero-plus-circle"
+              class="w-5 h-5 hover:bg-slate-400 text-slate-500"
+            />
+          </a>
         </div>
       </div>
       <div

diff --git a/lib/lightning_web/live/workflow_live/edit.ex b/lib/lightning_web/live/workflow_live/edit.ex
@@ -186,7 +186,7 @@ defmodule LightningWeb.WorkflowLive.Edit do
             >
               <.collapsible_panel
                 id={"manual-job-#{@selected_job.id}"}
-                class="h-full border border-l-0"
+                class="h-full border border-l-0 manual-job-panel"
               >
                 <:tabs>
                   <LightningWeb.Components.Tabbed.tabs

diff --git a/lib/lightning_web/live/workflow_live/job_view.ex b/lib/lightning_web/live/workflow_live/job_view.ex
@@ -154,7 +154,7 @@ defmodule LightningWeb.WorkflowLive.JobView do
       <%= render_slot(@inner_block) %>
       <.collapsible_panel
         id="job-editor-panel"
-        class="h-full border border-l-0"
+        class="h-full border border-l-0 job-editor-panel"
         panel_title={@editor_panel_title}
       >
         <.live_component