From a8fa834d240e8cf08912624f65a171b4f7df1c1a Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Thu, 6 Nov 2025 15:00:36 +0000
Subject: [PATCH] Fix critical truncation bug preventing data readability on
 touch devices (related to #643)

Removed CSS truncate from key identifier columns (container names, service names,
guest names, host names, image names) that were making data inaccessible on mobile/
touch devices where title tooltips don't work.

Users can now read full identifiers via horizontal scroll (already implemented via
ScrollableTable component). Data should always be readable without requiring additional
UI affordances.

Changed files:
- DockerUnifiedTable: Remove truncate from container/service names and images
- GuestRow: Remove truncate from guest names
- HostsOverview: Remove truncate from host display names and hostnames

Column resizing remains on backlog as optional enhancement; users should not need
a drag handle just to read the contents.
---
 frontend-modern/src/components/Dashboard/GuestRow.tsx     | 2 +-
 .../src/components/Docker/DockerUnifiedTable.tsx          | 8 ++++----
 frontend-modern/src/components/Hosts/HostsOverview.tsx    | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend-modern/src/components/Dashboard/GuestRow.tsx b/frontend-modern/src/components/Dashboard/GuestRow.tsx
index d957339..3c76626 100644
--- a/frontend-modern/src/components/Dashboard/GuestRow.tsx
+++ b/frontend-modern/src/components/Dashboard/GuestRow.tsx
@@ -425,7 +425,7 @@ export function GuestRow(props: GuestRowProps) {
             fallback={
               <div class="flex items-center gap-1.5 flex-1 min-w-0">
                 <span
-                  class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate cursor-text select-none"
+                  class="text-sm font-medium text-gray-900 dark:text-gray-100 cursor-text select-none"
                   style="cursor: text;"
                   title={`${props.guest.name}${customUrl() ? ' - Click to edit URL' : ' - Click to add URL'}`}
                   onClick={startEditingUrl}
diff --git a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
index b41d528..eb910f4 100644
--- a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
+++ b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
@@ -887,7 +887,7 @@ const DockerContainerRow: Component<{
               fallback={
                 <div class="flex items-center gap-1.5 flex-1 min-w-0">
                   <span
-                    class="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate cursor-text select-none"
+                    class="text-sm font-semibold text-gray-900 dark:text-gray-100 cursor-text select-none"
                     style="cursor: text;"
                     title={`${containerTitle()}${customUrl() ? ' - Click to edit URL' : ' - Click to add URL'}`}
                     onClick={startEditingUrl}
@@ -998,7 +998,7 @@ const DockerContainerRow: Component<{
           </span>
         </td>
         <td class="px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300">
-          <span class="truncate" title={container.image}>
+          <span title={container.image}>
             {container.image || '—'}
           </span>
         </td>
@@ -1626,7 +1626,7 @@ const DockerServiceRow: Component<{
               fallback={
                 <div class="flex items-center gap-1.5 flex-1 min-w-0">
                   <span
-                    class="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate cursor-text select-none"
+                    class="text-sm font-semibold text-gray-900 dark:text-gray-100 cursor-text select-none"
                     style="cursor: text;"
                     title={`${serviceTitle()}${customUrl() ? ' - Click to edit URL' : ' - Click to add URL'}`}
                     onClick={startEditingUrl}
@@ -1723,7 +1723,7 @@ const DockerServiceRow: Component<{
           </span>
         </td>
         <td class="px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300">
-          <span class="truncate" title={service.image}>
+          <span title={service.image}>
             {service.image || '—'}
           </span>
         </td>
diff --git a/frontend-modern/src/components/Hosts/HostsOverview.tsx b/frontend-modern/src/components/Hosts/HostsOverview.tsx
index ee18ee2..5736151 100644
--- a/frontend-modern/src/components/Hosts/HostsOverview.tsx
+++ b/frontend-modern/src/components/Hosts/HostsOverview.tsx
@@ -269,12 +269,12 @@ export const HostsOverview: Component<HostsOverviewProps> = (props) => {
                                         <div>
                                           <div class="flex items-center gap-2">
                                             {renderStatusIndicator(host.status)}
-                                            <p class="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate">
+                                            <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">
                                               {host.displayName || host.hostname || host.id}
                                             </p>
                                           </div>
                                           <Show when={host.displayName && host.displayName !== host.hostname}>
-                                            <p class="text-xs text-gray-500 dark:text-gray-400 truncate mt-0.5">
+                                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                                               {host.hostname}
                                             </p>
                                           </Show>