Improve moderation tabs on mobile

lib/who_need_help_web/live/moderation_live.ex

@@ -490,6 +490,7 @@ defmodule WhoNeedHelpWeb.ModerationLive do
           active={@active_queue == :proposals}
           patch={~p"/moderation?queue=proposals"}
           icon="hero-tag"
+          compact_label={gettext("Categories")}
         >
           {gettext("Category proposals")}
         </.queue_link>
@@ -578,6 +579,7 @@ defmodule WhoNeedHelpWeb.ModerationLive do
   attr :active, :boolean, required: true
   attr :patch, :string, required: true
   attr :icon, :string, required: true
+  attr :compact_label, :string, default: nil
   slot :inner_block, required: true
 
   defp queue_link(assigns) do
@@ -591,7 +593,11 @@ defmodule WhoNeedHelpWeb.ModerationLive do
       ]}
     >
       <.icon name={@icon} class="hidden size-4 shrink-0 sm:block" />
-      <span class="truncate">{render_slot(@inner_block)}</span>
+      <span :if={@compact_label} class="sm:hidden">{@compact_label}</span>
+      <span :if={@compact_label} class="hidden truncate sm:inline">
+        {render_slot(@inner_block)}
+      </span>
+      <span :if={!@compact_label} class="truncate">{render_slot(@inner_block)}</span>
     </.link>
     """
   end

test/who_need_help_web/live/mutual_aid_live_test.exs

@@ -1567,6 +1567,13 @@ defmodule WhoNeedHelpWeb.MutualAidLiveTest do
     assert html =~ "Reports"
     assert html =~ "Abuse signals"
     assert html =~ "Category proposals"
+
+    assert has_element?(
+             view,
+             "nav[aria-label='Trust and safety queues'] .sm\\:hidden",
+             "Categories"
+           )
+
     refute html =~ "Users & roles"
     assert html =~ "Please review the matched conversation."
     refute has_element?(view, "#moderation-user-status-#{user.id}")