From a8ab10f6e71ef5e4c8eee74a52295fdf62df69af Mon Sep 17 00:00:00 2001
From: Alan Guzek <alan.guzek@swmansion.com>
Date: Wed, 23 Apr 2025 16:44:41 +0200
Subject: [PATCH 1/3] make assigns scrollable on desktop view

---
 .../live_views/channel_dashboard_live.ex          | 15 ++++++---------
 lib/live_debugger/live_views/state_live.ex        |  8 ++++++--
 lib/live_debugger/live_views/traces_live.ex       |  3 +--
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/lib/live_debugger/live_views/channel_dashboard_live.ex b/lib/live_debugger/live_views/channel_dashboard_live.ex
index ee9094974..26f3299bc 100644
--- a/lib/live_debugger/live_views/channel_dashboard_live.ex
+++ b/lib/live_debugger/live_views/channel_dashboard_live.ex
@@ -72,17 +72,14 @@ 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 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"
+              socket={@socket}
+              lv_process={lv_process}
+              node_id={@node_id || lv_process.pid}
+            />
             <TracesLive.live_render
               id="traces-list"
-              class="xl:w-1/2"
               socket={@socket}
               lv_process={lv_process}
               node_id={@node_id || lv_process.pid}
diff --git a/lib/live_debugger/live_views/state_live.ex b/lib/live_debugger/live_views/state_live.ex
index b40be917c..f319119af 100644
--- a/lib/live_debugger/live_views/state_live.ex
+++ b/lib/live_debugger/live_views/state_live.ex
@@ -29,7 +29,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: "flex xl:w-1/2"}
+    ) %>
     """
   end
 
@@ -59,7 +63,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="shrink max-w-full flex flex-col gap-4">
       <.async_result :let={node} assign={@node}>
         <:loading>
           <div class="w-full flex items-center justify-center">
diff --git a/lib/live_debugger/live_views/traces_live.ex b/lib/live_debugger/live_views/traces_live.ex
index 01de66b34..cec4cd139 100644
--- a/lib/live_debugger/live_views/traces_live.ex
+++ b/lib/live_debugger/live_views/traces_live.ex
@@ -25,7 +25,6 @@ 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 = %{
@@ -42,7 +41,7 @@ defmodule LiveDebugger.LiveViews.TracesLive do
     <%= live_render(@socket, __MODULE__,
       id: @id,
       session: @session,
-      container: {:div, class: "flex #{@class}"}
+      container: {:div, class: "flex xl:w-1/2"}
     ) %>
     """
   end

From e6d6f0d69bae95bb0d7eb98674e0920d66e9e1f2 Mon Sep 17 00:00:00 2001
From: Alan Guzek <alan.guzek@swmansion.com>
Date: Wed, 23 Apr 2025 16:56:04 +0200
Subject: [PATCH 2/3] take full space on smaller contents

---
 lib/live_debugger/live_views/state_live.ex  | 2 +-
 lib/live_debugger/live_views/traces_live.ex | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/live_debugger/live_views/state_live.ex b/lib/live_debugger/live_views/state_live.ex
index f319119af..4a0bbaf85 100644
--- a/lib/live_debugger/live_views/state_live.ex
+++ b/lib/live_debugger/live_views/state_live.ex
@@ -63,7 +63,7 @@ defmodule LiveDebugger.LiveViews.StateLive do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="shrink max-w-full flex flex-col gap-4">
+    <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">
diff --git a/lib/live_debugger/live_views/traces_live.ex b/lib/live_debugger/live_views/traces_live.ex
index cec4cd139..497163463 100644
--- a/lib/live_debugger/live_views/traces_live.ex
+++ b/lib/live_debugger/live_views/traces_live.ex
@@ -41,7 +41,7 @@ defmodule LiveDebugger.LiveViews.TracesLive do
     <%= live_render(@socket, __MODULE__,
       id: @id,
       session: @session,
-      container: {:div, class: "flex xl:w-1/2"}
+      container: {:div, class: "flex max-xl:grow xl:w-1/2"}
     ) %>
     """
   end

From 2e7088679aa982c6083ef522eae9acdb042fd3fa Mon Sep 17 00:00:00 2001
From: Alan Guzek <alan.guzek@swmansion.com>
Date: Thu, 24 Apr 2025 11:14:22 +0200
Subject: [PATCH 3/3] pass class to live_render

---
 lib/live_debugger/live_views/channel_dashboard_live.ex | 3 +++
 lib/live_debugger/live_views/sidebar_live.ex           | 3 ++-
 lib/live_debugger/live_views/state_live.ex             | 3 ++-
 lib/live_debugger/live_views/traces_live.ex            | 3 ++-
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/lib/live_debugger/live_views/channel_dashboard_live.ex b/lib/live_debugger/live_views/channel_dashboard_live.ex
index 26f3299bc..93694fd5f 100644
--- a/lib/live_debugger/live_views/channel_dashboard_live.ex
+++ b/lib/live_debugger/live_views/channel_dashboard_live.ex
@@ -65,6 +65,7 @@ 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}
@@ -74,12 +75,14 @@ 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 scrollbar-main">
             <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="flex max-xl:grow xl:w-1/2"
               socket={@socket}
               lv_process={lv_process}
               node_id={@node_id || lv_process.pid}
diff --git a/lib/live_debugger/live_views/sidebar_live.ex b/lib/live_debugger/live_views/sidebar_live.ex
index e9e3d215b..b772affbe 100644
--- a/lib/live_debugger/live_views/sidebar_live.ex
+++ b/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
diff --git a/lib/live_debugger/live_views/state_live.ex b/lib/live_debugger/live_views/state_live.ex
index 4a0bbaf85..c8742625d 100644
--- a/lib/live_debugger/live_views/state_live.ex
+++ b/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 = %{
@@ -32,7 +33,7 @@ defmodule LiveDebugger.LiveViews.StateLive do
     <%= live_render(@socket, __MODULE__,
       id: @id,
       session: @session,
-      container: {:div, class: "flex xl:w-1/2"}
+      container: {:div, class: @class}
     ) %>
     """
   end
diff --git a/lib/live_debugger/live_views/traces_live.ex b/lib/live_debugger/live_views/traces_live.ex
index 497163463..777374f2b 100644
--- a/lib/live_debugger/live_views/traces_live.ex
+++ b/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, default: "", doc: "CSS class for the container")
 
   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 max-xl:grow xl:w-1/2"}
+      container: {:div, class: @class}
     ) %>
     """
   end