graham/prop
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(status): mobile layout — tables no longer truncate column headers

Browse source 
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.
This commit is contained in:
Graham McIntire 2026-04-24 15:44:57 -05:00
parent b81b482119
commit 13fad936a3
No known key found for this signature in database
GPG key ID: F4ABF488E6029E59
1 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
lib/microwaveprop_web/live/status_live.ex
View file

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