From ca4840b5128f8c1e9f7e38dd3cc3243766967828 Mon Sep 17 00:00:00 2001
From: Graham McIntie <graham@mcintire.me>
Date: Sun, 15 Feb 2026 15:10:02 -0600
Subject: [PATCH] Fix Preseem devices table for mobile

- 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
---
 .../live/org/preseem_devices_live.html.heex   | 33 ++++++++++++-------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/lib/towerops_web/live/org/preseem_devices_live.html.heex b/lib/towerops_web/live/org/preseem_devices_live.html.heex
index 70062dfe..6cae1099 100644
--- a/lib/towerops_web/live/org/preseem_devices_live.html.heex
+++ b/lib/towerops_web/live/org/preseem_devices_live.html.heex
@@ -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}"}