From 1800220fa21f4ceb3fbc5e9801b9f98a5a19e5f3 Mon Sep 17 00:00:00 2001
From: Alan Guzek <alan.guzek@swmansion.com>
Date: Thu, 17 Apr 2025 10:40:31 +0200
Subject: [PATCH 1/4] active live views layout adjusted

---
 lib/live_debugger/live_views/live_views_dashboard_live.ex | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/live_debugger/live_views/live_views_dashboard_live.ex b/lib/live_debugger/live_views/live_views_dashboard_live.ex
index 1c5732259..a157f32bd 100644
--- a/lib/live_debugger/live_views/live_views_dashboard_live.ex
+++ b/lib/live_debugger/live_views/live_views_dashboard_live.ex
@@ -20,10 +20,10 @@ defmodule LiveDebugger.LiveViews.LiveViewsDashboardLive do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="w-full h-full min-w-[25rem] flex flex-col items-center">
+    <div class="flex-1 min-w-[25rem] grid grid-rows-[auto_1fr]">
       <.navbar return_link?={false} />
-      <div class="max-xl:p-8 pt-8 w-full xl:max-w-[40rem] h-full">
-        <div class="flex gap-4 items-center justify-between">
+      <div class="flex-1 max-lg:p-8 pt-8 lg:w-[60rem] lg:m-auto">
+        <div class="flex items-center justify-between">
           <.h1>Active LiveViews</.h1>
           <.button phx-click="refresh">
             <div class="flex items-center gap-2">

From 3868022e416737edbdeca97aa0f492f44751c326 Mon Sep 17 00:00:00 2001
From: Alan Guzek <alan.guzek@swmansion.com>
Date: Fri, 18 Apr 2025 11:28:52 +0200
Subject: [PATCH 2/4] use grid, use proper html tags

---
 lib/live_debugger/components.ex                        | 4 ++--
 lib/live_debugger/live_views/channel_dashboard_live.ex | 6 +++---
 lib/live_debugger/live_views/sidebar_live.ex           | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/lib/live_debugger/components.ex b/lib/live_debugger/components.ex
index cc040c269..bddb6604c 100644
--- a/lib/live_debugger/components.ex
+++ b/lib/live_debugger/components.ex
@@ -546,7 +546,7 @@ defmodule LiveDebugger.Components do
 
   def navbar(assigns) do
     ~H"""
-    <div class="w-full h-12 shrink-0 py-auto px-4 flex items-center gap-2 bg-navbar-bg text-navbar-logo border-b border-navbar-border">
+    <navbar class="w-full h-12 shrink-0 py-auto px-4 flex items-center gap-2 bg-navbar-bg text-navbar-logo border-b border-navbar-border">
       <.link :if={@return_link?} patch={Routes.live_views_dashboard()}>
         <.nav_icon icon="icon-arrow-left" />
       </.link>
@@ -573,7 +573,7 @@ defmodule LiveDebugger.Components do
           <%= @inner_block && render_slot(@inner_block) %>
         </div>
       </div>
-    </div>
+    </navbar>
     """
   end
 
diff --git a/lib/live_debugger/live_views/channel_dashboard_live.ex b/lib/live_debugger/live_views/channel_dashboard_live.ex
index d27226c4b..48882dfd3 100644
--- a/lib/live_debugger/live_views/channel_dashboard_live.ex
+++ b/lib/live_debugger/live_views/channel_dashboard_live.ex
@@ -39,7 +39,7 @@ defmodule LiveDebugger.LiveViews.ChannelDashboardLive do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="w-screen h-screen flex flex-col">
+    <div class="w-screen h-screen grid grid-rows-[auto_1fr]">
       <.navbar return_link?={true}>
         <div class="grow flex items-center justify-end">
           <.nav_icon
@@ -52,7 +52,7 @@ defmodule LiveDebugger.LiveViews.ChannelDashboardLive do
       </.navbar>
       <.async_result :let={lv_process} assign={@lv_process}>
         <:loading>
-          <div class="h-full flex items-center justify-center">
+          <div class="m-auto flex items-center justify-center">
             <.spinner size="xl" />
           </div>
         </:loading>
@@ -62,7 +62,7 @@ defmodule LiveDebugger.LiveViews.ChannelDashboardLive do
           <Error.unexpected_error_component :if={reason not in [:not_found, :session_limit]} />
         </:failed>
 
-        <div class="flex flex-1 overflow-hidden">
+        <div class="flex overflow-hidden">
           <SidebarLive.live_render
             id="sidebar"
             socket={@socket}
diff --git a/lib/live_debugger/live_views/sidebar_live.ex b/lib/live_debugger/live_views/sidebar_live.ex
index 90b88b6de..27c250935 100644
--- a/lib/live_debugger/live_views/sidebar_live.ex
+++ b/lib/live_debugger/live_views/sidebar_live.ex
@@ -39,7 +39,7 @@ defmodule LiveDebugger.LiveViews.SidebarLive do
     <%= live_render(@socket, __MODULE__,
       id: @id,
       session: @session,
-      container: {:div, class: "h-full"}
+      container: {:aside, class: "h-full"}
     ) %>
     """
   end

From 0d153ae56f07b977907e4e7bb969ae42a7a9cea4 Mon Sep 17 00:00:00 2001
From: Alan Guzek <alan.guzek@swmansion.com>
Date: Fri, 18 Apr 2025 11:36:48 +0200
Subject: [PATCH 3/4] sidebar properly shrinking

---
 lib/live_debugger/components/tree.ex         | 2 +-
 lib/live_debugger/live_views/sidebar_live.ex | 5 ++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/lib/live_debugger/components/tree.ex b/lib/live_debugger/components/tree.ex
index 22b73b2e3..80ceab8f0 100644
--- a/lib/live_debugger/components/tree.ex
+++ b/lib/live_debugger/components/tree.ex
@@ -30,7 +30,7 @@ defmodule LiveDebugger.Components.Tree do
 
   def tree(assigns) do
     ~H"""
-    <div class={["w-full overflow-y-auto flex flex-col", @class]}>
+    <div class={["min-h-20 w-full overflow-y-auto flex flex-col", @class]}>
       <div class="flex items-center justify-between">
         <div class="shrink-0 font-medium text-secondary-text px-6 py-3"><%= @title %></div>
         <%= if LiveDebugger.Feature.enabled?(:highlighting) do %>
diff --git a/lib/live_debugger/live_views/sidebar_live.ex b/lib/live_debugger/live_views/sidebar_live.ex
index 27c250935..4ef668ccf 100644
--- a/lib/live_debugger/live_views/sidebar_live.ex
+++ b/lib/live_debugger/live_views/sidebar_live.ex
@@ -93,7 +93,6 @@ defmodule LiveDebugger.LiveViews.SidebarLive do
           highlight?={@highlight?}
           parent_lv_process={@parent_lv_process}
         />
-        <.report_issue class="border-t border-default-border" />
       </div>
       <.sidebar_slide_over :if={not @hidden?}>
         <.sidebar_content
@@ -105,7 +104,6 @@ defmodule LiveDebugger.LiveViews.SidebarLive do
           highlight?={@highlight?}
           parent_lv_process={@parent_lv_process}
         />
-        <.report_issue class="border-t border-default-border" />
       </.sidebar_slide_over>
     </div>
     """
@@ -210,7 +208,7 @@ defmodule LiveDebugger.LiveViews.SidebarLive do
 
   defp sidebar_content(assigns) do
     ~H"""
-    <div class="flex flex-col max-h-full h-max">
+    <div class="grid grid-rows-[auto_auto_1fr_auto] h-full">
       <.basic_info
         pid={@lv_process.pid}
         socket_id={@lv_process.socket_id}
@@ -227,6 +225,7 @@ defmodule LiveDebugger.LiveViews.SidebarLive do
         max_opened_node_level={@max_opened_node_level}
         highlight?={@highlight?}
       />
+      <.report_issue class="border-t border-default-border" />
     </div>
     """
   end

From e64f5581bf33eb15293bde68d55e3f6bd7ad4cd7 Mon Sep 17 00:00:00 2001
From: Alan Guzek <alan.guzek@swmansion.com>
Date: Wed, 23 Apr 2025 10:49:28 +0200
Subject: [PATCH 4/4] add accessibility for buttons

---
 lib/live_debugger/components.ex | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/lib/live_debugger/components.ex b/lib/live_debugger/components.ex
index bddb6604c..578d972a2 100644
--- a/lib/live_debugger/components.ex
+++ b/lib/live_debugger/components.ex
@@ -317,9 +317,15 @@ defmodule LiveDebugger.Components do
       assigns
       |> assign(:button_class, button_class)
       |> assign(:icon_class, icon_class)
+      |> assign(:aria_label, assigns[:"aria-label"] || icon_label(assigns.icon))
 
     ~H"""
-    <.button class={[@button_class | List.wrap(@class)]} variant={@variant} {@rest}>
+    <.button
+      aria-label={@aria_label}
+      class={[@button_class | List.wrap(@class)]}
+      variant={@variant}
+      {@rest}
+    >
       <.icon name={@icon} class={@icon_class} />
     </.button>
     """
@@ -333,6 +339,7 @@ defmodule LiveDebugger.Components do
   def nav_icon(assigns) do
     ~H"""
     <button
+      aria-label={icon_label(@icon)}
       class={[
         "w-8! h-8! px-[0.25rem] py-[0.25rem] w-max h-max rounded text-xs font-semibold text-navbar-icon hover:text-navbar-icon-hover hover:bg-navbar-icon-bg-hover"
         | List.wrap(@class)
@@ -651,4 +658,10 @@ defmodule LiveDebugger.Components do
 
   defp button_size_classes("md"), do: "py-2 px-3"
   defp button_size_classes("sm"), do: "py-1.5 px-2"
+
+  defp icon_label("icon-" <> icon_name) do
+    icon_name
+    |> String.capitalize()
+    |> String.replace("-", " ")
+  end
 end