From 13fad936a34a774b0f04f23dd339a792dfea8128 Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Fri, 24 Apr 2026 15:44:57 -0500
Subject: [PATCH] =?UTF-8?q?fix(status):=20mobile=20layout=20=E2=80=94=20ta?=
 =?UTF-8?q?bles=20no=20longer=20truncate=20column=20headers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The three tables on /status (Job Queue, Rust Workers, Table Sizes)
were collapsing to fit the viewport on narrow phones, wrapping
header text ("Siz…") and splitting values like "160 GB" into two
lines ("160." / "GB"). The overflow-x-auto wrappers were already
present but column auto-sizing still squeezed width below content.

Adds `whitespace-nowrap` to each `<table>` so cells never wrap, and
`-mx-2 px-2` on the overflow wrapper so horizontal scroll extends
edge-to-edge of the mobile viewport instead of being inset by the
layout's outer padding. Tables now scroll horizontally as intended
on mobile; desktop layout unchanged.
---
 lib/microwaveprop_web/live/status_live.ex | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/lib/microwaveprop_web/live/status_live.ex b/lib/microwaveprop_web/live/status_live.ex
index 0d927c51..312887b0 100644
--- a/lib/microwaveprop_web/live/status_live.ex
+++ b/lib/microwaveprop_web/live/status_live.ex
@@ -501,8 +501,8 @@ defmodule MicrowavepropWeb.StatusLive do
       <%= if @stats.by_worker == [] do %>
         <p class="text-sm text-base-content/50 italic">No active jobs.</p>
       <% else %>
-        <div class="overflow-x-auto">
-          <table class="table table-sm table-zebra">
+        <div class="overflow-x-auto -mx-2 px-2">
+          <table class="table table-sm table-zebra whitespace-nowrap">
             <thead>
               <tr>
                 <th>Worker</th>
@@ -544,8 +544,8 @@ defmodule MicrowavepropWeb.StatusLive do
       <div class="divider" />
 
       <h2 class="text-base font-semibold mb-2">Rust Workers</h2>
-      <div id="grid-tasks-panel" class="overflow-x-auto mb-4">
-        <table class="table table-sm">
+      <div id="grid-tasks-panel" class="overflow-x-auto mb-4 -mx-2 px-2">
+        <table class="table table-sm whitespace-nowrap">
           <thead>
             <tr>
               <th>Worker</th>
@@ -657,8 +657,8 @@ defmodule MicrowavepropWeb.StatusLive do
       </div>
 
       <h2 class="text-base font-semibold mb-2">Table Sizes</h2>
-      <div class="overflow-x-auto mb-4">
-        <table class="table table-xs table-zebra">
+      <div class="overflow-x-auto mb-4 -mx-2 px-2">
+        <table class="table table-xs table-zebra whitespace-nowrap">
           <thead>
             <tr>
               <th>Table</th>