Fix Docker expanded drawer cards being cut off

The expanded container/service drawer cards were overflowing
horizontally instead of wrapping when the table had overflow-x-auto.
Adding overflow-hidden to the drawer's outer container forces the
flex-wrap to work correctly.

Related to #789
This commit is contained in:
rcourtman
2025-12-01 15:06:49 +00:00
parent c7d832c8d9
commit 2078421da4

View File

@@ -1292,7 +1292,7 @@ const DockerContainerRow: Component<{
<Show when={expanded() && hasDrawerContent()}>
<tr>
<td colspan={DOCKER_COLUMNS.length} class="p-0">
<div class="bg-gray-50 dark:bg-gray-900/50 px-4 py-3">
<div class="bg-gray-50 dark:bg-gray-900/50 px-4 py-3 overflow-hidden">
<div class="flex flex-wrap justify-start gap-3">
<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">
@@ -1997,7 +1997,7 @@ const DockerServiceRow: Component<{
<Show when={expanded() && hasTasks()}>
<tr>
<td colspan={DOCKER_COLUMNS.length} class="p-0">
<div class="bg-gray-50 dark:bg-gray-900/60 px-4 py-3">
<div class="bg-gray-50 dark:bg-gray-900/60 px-4 py-3 overflow-hidden">
<div class="flex flex-wrap justify-start gap-3">
<div class="min-w-[320px] flex-1 rounded border border-gray-200 bg-white/70 p-3 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
<div class="flex items-center justify-between text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">