Bug: fixed responsive design of channel dashboard (#281)

* Added example of long assign

* Added width for channel dashboard sections

* Fixed fullscreen button

Author: kraleppa

dev/live_views/main.ex

@@ -11,6 +11,10 @@ defmodule LiveDebuggerDev.LiveViews.Main do
       |> assign(name: random_name())
       |> assign(single_element_list: [%Phoenix.LiveComponent.CID{cid: 1}])
       |> assign(list: [%Phoenix.LiveComponent.CID{cid: 1}, %Phoenix.LiveComponent.CID{cid: 2}])
+      |> assign(
+        long_assign:
+          "flex items-center gap-2 flex grow flex-col xl:flex-row flex items-center gap-2 flex grow flex-col xl:flex-row gap-4 xl:gap-8 p-8 overflow-y-auto xl:overflow-y-hidden max-w-screen-2xl mx-auto"
+      )
 
     {:ok, socket}
   end

lib/live_debugger/components/traces.ex

@@ -93,27 +93,30 @@ defmodule LiveDebugger.Components.Traces do
           </p>
         </div>
       </:label>
-      <div class="relative flex flex-col gap-4 overflow-x-auto max-w-full h-[30vh] max-h-max overflow-y-auto">
-        <.fullscreen_button
-          id={"trace-fullscreen-#{@id}"}
-          class="absolute right-2 top-2"
-          phx-click="open-trace"
-          phx-value-data={@trace.id}
-        />
-
-        <%= if @render_body? do %>
-          <%= for {args, index} <- Enum.with_index(@trace.args) do %>
-            <ElixirDisplay.term
-              id={@id <> "-#{index}"}
-              node={TermParser.term_to_display_tree(args)}
-              level={1}
-            />
+      <div class="relative">
+        <div class="absolute right-[17px] top-0 z-50">
+          <.fullscreen_button
+            id={"trace-fullscreen-#{@id}"}
+            class="m-2"
+            phx-click="open-trace"
+            phx-value-data={@trace.id}
+          />
+        </div>
+        <div class="flex flex-col gap-4 overflow-x-auto max-w-full h-[30vh] max-h-max overflow-y-auto p-4">
+          <%= if @render_body? do %>
+            <%= for {args, index} <- Enum.with_index(@trace.args) do %>
+              <ElixirDisplay.term
+                id={@id <> "-#{index}"}
+                node={TermParser.term_to_display_tree(args)}
+                level={1}
+              />
+            <% end %>
+          <% else %>
+            <div class="w-full flex items-center justify-center">
+              <.spinner size="sm" />
+            </div>
           <% end %>
-        <% else %>
-          <div class="w-full flex items-center justify-center">
-            <.spinner size="sm" />
-          </div>
-        <% end %>
+        </div>
       </div>
     </.collapsible>
     """

lib/live_debugger/live_views/channel_dashboard_live.ex

@@ -72,7 +72,7 @@ defmodule LiveDebugger.LiveViews.ChannelDashboardLive do
           />
 
           <div class="flex grow flex-col xl:flex-row gap-4 xl:gap-8 p-8 overflow-y-auto xl:overflow-y-hidden max-w-screen-2xl mx-auto">
-            <div class="xl:flex-1 shrink">
+            <div class="xl:w-1/2">
               <StateLive.live_render
                 id="node-state-lv"
                 socket={@socket}
@@ -82,6 +82,7 @@ defmodule LiveDebugger.LiveViews.ChannelDashboardLive do
             </div>
             <TracesLive.live_render
               id="traces-list"
+              class="xl:w-1/2"
               socket={@socket}
               lv_process={lv_process}
               node_id={@node_id || lv_process.pid}

lib/live_debugger/live_views/traces_live.ex

@@ -25,6 +25,7 @@ defmodule LiveDebugger.LiveViews.TracesLive do
   attr(:lv_process, :map, required: true)
   attr(:node_id, :string, required: true)
   attr(:root_pid, :any, required: true)
+  attr(:class, :string, required: true)
 
   def live_render(assigns) do
     session = %{
@@ -41,7 +42,7 @@ defmodule LiveDebugger.LiveViews.TracesLive do
     <%= live_render(@socket, __MODULE__,
       id: @id,
       session: @session,
-      container: {:div, class: "flex flex-1"}
+      container: {:div, class: "flex #{@class}"}
     ) %>
     """
   end