diff --git a/frontend-modern/src/components/Dashboard/GuestRow.tsx b/frontend-modern/src/components/Dashboard/GuestRow.tsx
index fbef9e6..6394b7f 100644
--- a/frontend-modern/src/components/Dashboard/GuestRow.tsx
+++ b/frontend-modern/src/components/Dashboard/GuestRow.tsx
@@ -12,7 +12,8 @@ import { logger } from '@/utils/logger';
 
 type Guest = VM | Container;
 
-const drawerState = new Map<string, boolean>();
+// Global state for currently expanded drawer (only one drawer open at a time)
+const [currentlyExpandedGuestId, setCurrentlyExpandedGuestId] = createSignal<string | null>(null);
 // Global editing state - use a signal so all components react
 const [currentlyEditingGuestId, setCurrentlyEditingGuestId] = createSignal<string | null>(null);
 // Store the editing value globally so it survives re-renders
@@ -67,7 +68,7 @@ export function GuestRow(props: GuestRowProps) {
 
   const [customUrl, setCustomUrl] = createSignal<string | undefined>(props.customUrl);
   const [shouldAnimateIcon, setShouldAnimateIcon] = createSignal(false);
-  const [drawerOpen, setDrawerOpen] = createSignal(drawerState.get(initialGuestId) ?? false);
+  const drawerOpen = createMemo(() => currentlyExpandedGuestId() === guestId());
   const editingUrlValue = createMemo(() => {
     editingValuesVersion(); // Subscribe to changes
     return editingValues.get(guestId()) || '';
@@ -148,23 +149,9 @@ export function GuestRow(props: GuestRowProps) {
   );
   const canShowDrawer = createMemo(() => hasDrawerContent() || hasFallbackContent());
 
-  createEffect(on(guestId, (id) => {
-    const stored = drawerState.get(id);
-    if (stored !== undefined) {
-      setDrawerOpen(stored);
-    } else {
-      setDrawerOpen(false);
-    }
-  }));
-
-  createEffect(() => {
-    drawerState.set(guestId(), drawerOpen());
-  });
-
   createEffect(() => {
     if (!canShowDrawer() && drawerOpen()) {
-      setDrawerOpen(false);
-      drawerState.set(guestId(), false);
+      setCurrentlyExpandedGuestId(null);
     }
   });
 
@@ -174,7 +161,8 @@ export function GuestRow(props: GuestRowProps) {
     if (target.closest('a, button, input, [data-prevent-toggle]')) {
       return;
     }
-    setDrawerOpen((prev) => !prev);
+    // Toggle: if this guest is currently expanded, close it; otherwise open it (closing any other)
+    setCurrentlyExpandedGuestId(prev => prev === guestId() ? null : guestId());
   };
 
   const startEditingUrl = (event: MouseEvent) => {
@@ -674,7 +662,7 @@ export function GuestRow(props: GuestRowProps) {
               <Show
                 when={hasDrawerContent()}
                 fallback={
-                  <div class="min-w-[220px] rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
+                  <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
                     <div class="text-[11px] font-medium text-gray-700 dark:text-gray-200">
                       Guest details unavailable
                     </div>
@@ -700,7 +688,7 @@ export function GuestRow(props: GuestRowProps) {
               >
                 <>
                   <Show when={hasOsInfo() || hasAgentInfo() || ipAddresses().length > 0}>
-                    <div class="min-w-[220px] rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
+                    <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
                       <div class="text-[11px] font-medium text-gray-700 dark:text-gray-200">Guest Overview</div>
                       <div class="mt-1 space-y-1">
                         <Show when={hasOsInfo()}>
@@ -730,7 +718,10 @@ export function GuestRow(props: GuestRowProps) {
                           <div class="flex flex-wrap gap-1">
                             <For each={ipAddresses()}>
                               {(ip) => (
-                                <span class="rounded bg-blue-100 px-1.5 py-0.5 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">
+                                <span
+                                  class="max-w-full truncate rounded bg-blue-100 px-1.5 py-0.5 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200"
+                                  title={ip}
+                                >
                                   {ip}
                                 </span>
                               )}
@@ -742,7 +733,7 @@ export function GuestRow(props: GuestRowProps) {
                   </Show>
 
                   <Show when={memoryExtraLines() && memoryExtraLines()!.length > 0}>
-                    <div class="min-w-[220px] rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
+                    <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
                       <div class="text-[11px] font-medium text-gray-700 dark:text-gray-200">Memory</div>
                       <div class="mt-1 space-y-1 text-gray-600 dark:text-gray-300">
                         <For each={memoryExtraLines()!}>{(line) => <div>{line}</div>}</For>
@@ -751,7 +742,7 @@ export function GuestRow(props: GuestRowProps) {
                   </Show>
 
                   <Show when={hasFilesystemDetails() && props.guest.disks && props.guest.disks.length > 0}>
-                    <div class="min-w-[220px] rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
+                    <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
                       <div class="text-[11px] font-medium text-gray-700 dark:text-gray-200">Filesystems</div>
                       <div class="mt-1 text-gray-600 dark:text-gray-300">
                         <DiskList
@@ -785,7 +776,10 @@ export function GuestRow(props: GuestRowProps) {
                                   <div class="flex flex-wrap gap-1">
                                     <For each={addresses}>
                                       {(ip) => (
-                                        <span class="rounded bg-blue-100 px-1.5 py-0.5 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">
+                                        <span
+                                          class="max-w-full truncate rounded bg-blue-100 px-1.5 py-0.5 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200"
+                                          title={ip}
+                                        >
                                           {ip}
                                         </span>
                                       )}
diff --git a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
index ced68f5..b41d528 100644
--- a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
+++ b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
@@ -77,7 +77,8 @@ interface DockerUnifiedTableProps {
   onCustomUrlUpdate?: (resourceId: string, url: string) => void;
 }
 
-const rowExpandState = new Map<string, boolean>();
+// Global state for currently expanded drawer (only one drawer open at a time)
+const [currentlyExpandedRowId, setCurrentlyExpandedRowId] = createSignal<string | null>(null);
 
 // Global editing state for Docker resource URLs
 const [currentlyEditingDockerResourceId, setCurrentlyEditingDockerResourceId] = createSignal<string | null>(null);
@@ -577,7 +578,7 @@ const DockerContainerRow: Component<{
 
   const [customUrl, setCustomUrl] = createSignal<string | undefined>(props.customUrl);
   const [shouldAnimateIcon, setShouldAnimateIcon] = createSignal(false);
-  const [expanded, setExpanded] = createSignal(rowExpandState.get(rowId) ?? false);
+  const expanded = createMemo(() => currentlyExpandedRowId() === rowId);
   const editingUrlValue = createMemo(() => {
     dockerEditingValuesVersion(); // Subscribe to changes
     return dockerEditingValues.get(resourceId()) || '';
@@ -684,11 +685,8 @@ const DockerContainerRow: Component<{
     if (!hasDrawerContent()) return;
     const target = event.target as HTMLElement;
     if (target.closest('a, button, input, [data-prevent-toggle]')) return;
-    setExpanded((prev) => {
-      const next = !prev;
-      rowExpandState.set(rowId, next);
-      return next;
-    });
+    // Toggle: if this row is currently expanded, close it; otherwise open it (closing any other)
+    setCurrentlyExpandedRowId(prev => prev === rowId ? null : rowId);
   };
 
   const startEditingUrl = (event: MouseEvent) => {
@@ -1062,7 +1060,7 @@ const DockerContainerRow: Component<{
         <tr class="bg-gray-50 dark:bg-gray-900/50">
           <td colSpan={props.columns} class="px-4 py-3">
             <div class="flex flex-wrap justify-start gap-3">
-              <div class="min-w-[220px] rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
+              <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
                 <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
                   Summary
                 </div>
@@ -1191,7 +1189,7 @@ const DockerContainerRow: Component<{
                 </Show>
               </div>
               <Show when={container.ports && container.ports.length > 0}>
-                <div class="min-w-[220px] rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
+                <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
                   <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
                     Ports
                   </div>
@@ -1211,7 +1209,7 @@ const DockerContainerRow: Component<{
               </Show>
 
               <Show when={container.networks && container.networks.length > 0}>
-                <div class="min-w-[220px] rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
+                <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
                   <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
                     Networks
                   </div>
@@ -1238,7 +1236,7 @@ const DockerContainerRow: Component<{
               </Show>
 
               <Show when={hasPodmanMetadata()}>
-                <div class="min-w-[220px] rounded border border-purple-200 bg-white/70 p-2 shadow-sm dark:border-purple-700/60 dark:bg-purple-950/20">
+                <div class="min-w-[220px] flex-1 rounded border border-purple-200 bg-white/70 p-2 shadow-sm dark:border-purple-700/60 dark:bg-purple-950/20">
                   <div class="text-[11px] font-medium uppercase tracking-wide text-purple-700 dark:text-purple-200">
                     Podman Metadata
                   </div>
@@ -1272,7 +1270,7 @@ const DockerContainerRow: Component<{
               </Show>
 
               <Show when={hasBlockIo()}>
-                <div class="min-w-[220px] rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
+                <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
                   <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
                     Block I/O
                   </div>
@@ -1379,12 +1377,18 @@ const DockerContainerRow: Component<{
                     Labels
                   </div>
                   <div class="mt-1 flex flex-wrap gap-1 text-[11px] text-gray-600 dark:text-gray-300">
-                    {Object.entries(container.labels!).map(([key, value]) => (
-                      <span class="rounded bg-gray-200 px-1.5 py-0.5 text-gray-700 dark:bg-gray-700/60 dark:text-gray-200">
-                        {key}
-                        <Show when={value}>: {value}</Show>
-                      </span>
-                    ))}
+                    {Object.entries(container.labels!).map(([key, value]) => {
+                      const fullLabel = value ? `${key}: ${value}` : key;
+                      return (
+                        <span
+                          class="max-w-full truncate rounded bg-gray-200 px-1.5 py-0.5 text-gray-700 dark:bg-gray-700/60 dark:text-gray-200"
+                          title={fullLabel}
+                        >
+                          {key}
+                          <Show when={value}>: {value}</Show>
+                        </span>
+                      );
+                    })}
                   </div>
                 </div>
               </Show>
@@ -1409,7 +1413,7 @@ const DockerServiceRow: Component<{
 
   const [customUrl, setCustomUrl] = createSignal<string | undefined>(props.customUrl);
   const [shouldAnimateIcon, setShouldAnimateIcon] = createSignal(false);
-  const [expanded, setExpanded] = createSignal(rowExpandState.get(rowId) ?? false);
+  const expanded = createMemo(() => currentlyExpandedRowId() === rowId);
   const editingUrlValue = createMemo(() => {
     dockerEditingValuesVersion(); // Subscribe to changes
     return dockerEditingValues.get(resourceId()) || '';
@@ -1446,11 +1450,8 @@ const DockerServiceRow: Component<{
     if (!hasTasks()) return;
     const target = event.target as HTMLElement;
     if (target.closest('a, button, input, [data-prevent-toggle]')) return;
-    setExpanded((prev) => {
-      const next = !prev;
-      rowExpandState.set(rowId, next);
-      return next;
-    });
+    // Toggle: if this row is currently expanded, close it; otherwise open it (closing any other)
+    setCurrentlyExpandedRowId(prev => prev === rowId ? null : rowId);
   };
 
   const startEditingUrl = (event: MouseEvent) => {