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

Fix Preseem devices table for mobile

Browse source 
- Hide Preseem ID, Status, IP, and Linked Device columns on mobile
- Show Preseem ID and status badge inline under name on small screens
- Add overflow-x-auto to table container
This commit is contained in:
Graham McIntire 2026-02-15 15:10:02 -06:00
parent d63adddc5b
commit ca4840b512
1 changed files with 21 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
lib/towerops_web/live/org/preseem_devices_live.html.heex
View file

@ -114,7 +114,7 @@
</p>
</div>
<% else %>
<div class="overflow-hidden rounded-lg border border-gray-200 dark:border-white/10">
<div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-white/10">
<table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
<thead class="bg-gray-50 dark:bg-white/5">
<tr>
@ -126,25 +126,25 @@
</th>
<th
scope="col"
class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400"
class="hidden px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400 sm:table-cell"
>
{t("Preseem ID")}
</th>
<th
scope="col"
class="hidden px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400 sm:table-cell"
class="hidden px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400 md:table-cell"
>
{t("IP Address")}
</th>
<th
scope="col"
class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400"
class="hidden px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400 sm:table-cell"
>
{t("Status")}
</th>
<th
scope="col"
class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400"
class="hidden px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400 md:table-cell"
>
{t("Linked Device")}
</th>
@ -162,16 +162,25 @@
id={"ap-row-#{ap.id}"}
class="hover:bg-gray-50 dark:hover:bg-white/5"
>
<td class="whitespace-nowrap px-4 py-4 text-sm font-medium text-gray-900 dark:text-white">
{ap.name || "Unnamed"}
</td>
<td class="whitespace-nowrap px-4 py-4 text-sm text-gray-500 dark:text-gray-400">
{ap.preseem_id}
<td class="px-4 py-4 text-sm font-medium text-gray-900 dark:text-white">
<span class="break-all">{ap.name || "Unnamed"}</span>
<span class="block text-xs text-gray-400 dark:text-gray-500 sm:hidden">
{ap.preseem_id}
</span>
<span class={[
"mt-1 inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium sm:hidden",
match_confidence_classes(ap.match_confidence)
]}>
{humanize_confidence(ap.match_confidence)}
</span>
</td>
<td class="hidden whitespace-nowrap px-4 py-4 text-sm text-gray-500 dark:text-gray-400 sm:table-cell">
{ap.preseem_id}
</td>
<td class="hidden whitespace-nowrap px-4 py-4 text-sm text-gray-500 dark:text-gray-400 md:table-cell">
{ap.ip_address || "-"}
</td>
<td class="whitespace-nowrap px-4 py-4 text-sm">
<td class="hidden whitespace-nowrap px-4 py-4 text-sm sm:table-cell">
<span class={[
"inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
match_confidence_classes(ap.match_confidence)
@ -179,7 +188,7 @@
{humanize_confidence(ap.match_confidence)}
</span>
</td>
<td class="whitespace-nowrap px-4 py-4 text-sm text-gray-500 dark:text-gray-400">
<td class="hidden whitespace-nowrap px-4 py-4 text-sm text-gray-500 dark:text-gray-400 md:table-cell">
<%= if ap.device do %>
<.link
navigate={~p"/devices/#{ap.device.id}"}