Bug: Fix assigns not scrollable (#294)

* make assigns scrollable on desktop view

* pass class to live_render

Author: GuzekAlan

lib/live_debugger/live_views/channel_dashboard_live.ex

@@ -65,24 +65,24 @@ defmodule LiveDebugger.LiveViews.ChannelDashboardLive do
         <div class="flex overflow-hidden">
           <SidebarLive.live_render
             id="sidebar"
+            class="h-full"
             socket={@socket}
             lv_process={lv_process}
             url={@url}
             node_id={@node_id || lv_process.pid}
           />
 
           <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 scrollbar-main">
-            <div class="xl:w-1/2">
-              <StateLive.live_render
-                id="node-state-lv"
-                socket={@socket}
-                lv_process={lv_process}
-                node_id={@node_id || lv_process.pid}
-              />
-            </div>
+            <StateLive.live_render
+              id="node-state-lv"
+              class="flex xl:w-1/2"
+              socket={@socket}
+              lv_process={lv_process}
+              node_id={@node_id || lv_process.pid}
+            />
             <TracesLive.live_render
               id="traces-list"
-              class="xl:w-1/2"
+              class="flex max-xl:grow xl:w-1/2"
               socket={@socket}
               lv_process={lv_process}
               node_id={@node_id || lv_process.pid}

lib/live_debugger/live_views/sidebar_live.ex

@@ -24,6 +24,7 @@ defmodule LiveDebugger.LiveViews.SidebarLive do
   attr(:lv_process, :map, required: true)
   attr(:node_id, :string, required: true)
   attr(:url, :string, required: true)
+  attr(:class, :string, default: "", doc: "CSS class for the container")
 
   def live_render(assigns) do
     session = %{
@@ -39,7 +40,7 @@ defmodule LiveDebugger.LiveViews.SidebarLive do
     <%= live_render(@socket, __MODULE__,
       id: @id,
       session: @session,
-      container: {:aside, class: "h-full"}
+      container: {:aside, class: @class}
     ) %>
     """
   end

lib/live_debugger/live_views/state_live.ex

@@ -18,6 +18,7 @@ defmodule LiveDebugger.LiveViews.StateLive do
   attr(:id, :string, required: true)
   attr(:lv_process, :map, required: true)
   attr(:node_id, :string, required: true)
+  attr(:class, :string, default: "", doc: "CSS class for the container")
 
   def live_render(assigns) do
     session = %{
@@ -29,7 +30,11 @@ defmodule LiveDebugger.LiveViews.StateLive do
     assigns = assign(assigns, session: session)
 
     ~H"""
-    <%= live_render(@socket, __MODULE__, id: @id, session: @session) %>
+    <%= live_render(@socket, __MODULE__,
+      id: @id,
+      session: @session,
+      container: {:div, class: @class}
+    ) %>
     """
   end
 
@@ -59,7 +64,7 @@ defmodule LiveDebugger.LiveViews.StateLive do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="flex flex-col gap-4 xl:items-end">
+    <div class="flex-1 max-w-full flex flex-col gap-4">
       <.async_result :let={node} assign={@node}>
         <:loading>
           <div class="w-full flex items-center justify-center">

lib/live_debugger/live_views/traces_live.ex

@@ -25,7 +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)
+  attr(:class, :string, default: "", doc: "CSS class for the container")
 
   def live_render(assigns) do
     session = %{
@@ -42,7 +42,7 @@ defmodule LiveDebugger.LiveViews.TracesLive do
     <%= live_render(@socket, __MODULE__,
       id: @id,
       session: @session,
-      container: {:div, class: "flex #{@class}"}
+      container: {:div, class: @class}
     ) %>
     """
   end