gitea-mirror/Pulse
1
0
Fork 0
mirror of https://github.com/rcourtman/Pulse.git synced 2026-02-18 00:17:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix critical truncation bug preventing data readability on touch devices (related to #643)

Browse Source 
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.
This commit is contained in:
rcourtman
2025-11-06 15:00:36 +00:00
parent 57e2f9428e
commit a8fa834d24
3 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend-modern/src/components/Dashboard/GuestRow.tsx
View File

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

8
frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
View File

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

4
frontend-modern/src/components/Hosts/HostsOverview.tsx
View File

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