Refactor: UI layout styling and accessibility (#287)

* use grid for layout

* use proper html tags

* sidebar properly shrinking

* add accessibility for buttons

Author: GuzekAlan

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)
@@ -546,7 +553,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 +580,7 @@ defmodule LiveDebugger.Components do
           <%= @inner_block && render_slot(@inner_block) %>
         </div>
       </div>
-    </div>
+    </navbar>
     """
   end
 
@@ -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

lib/live_debugger/components/tree.ex

@@ -31,7 +31,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 %>

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}

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">

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
@@ -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}
@@ -228,6 +226,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