From 714f173a46174adae5fdfeec86db540e0b5addbc Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Wed, 23 Apr 2025 19:43:10 +0800
Subject: [PATCH] update

---
 packages/frontend/src/components/DockerManager.vue  | 8 +++++++-
 packages/frontend/src/components/LayoutRenderer.vue | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/DockerManager.vue b/packages/frontend/src/components/DockerManager.vue
index 633e3ab..a3c6c51 100644
--- a/packages/frontend/src/components/DockerManager.vue
+++ b/packages/frontend/src/components/DockerManager.vue
@@ -383,7 +383,7 @@ onUnmounted(() => {
         <small class="text-xs max-w-[80%]">{{ error }}</small>
      </div>
      <!-- Case 8: Active session, SSH connected, Docker available, show list -->
-    <div v-else class="flex-grow overflow-auto p-4">
+    <div v-else class="docker-content-area flex-grow overflow-auto">
       <div v-if="containers.length === 0 && !isLoading" class="flex flex-col justify-center items-center text-center flex-grow text-text-secondary h-full">
         {{ t('dockerManager.noContainers') }}
       </div>
@@ -537,6 +537,12 @@ onUnmounted(() => {
 
 /* Styles for Card View when container is narrow */
 @container docker-manager-pane (max-width: 600px) { /* Use container query, adjust breakpoint if needed */
+  /* +++ Add padding to content area in card view +++ */
+  .docker-content-area {
+    padding: 1rem; /* Equivalent to p-4 */
+  }
+  /* +++ End padding rule +++ */
+
   .responsive-thead.responsive-thead { /* Increased specificity */
     display: none; /* Hide table header */
   }
diff --git a/packages/frontend/src/components/LayoutRenderer.vue b/packages/frontend/src/components/LayoutRenderer.vue
index b939729..db09405 100644
--- a/packages/frontend/src/components/LayoutRenderer.vue
+++ b/packages/frontend/src/components/LayoutRenderer.vue
@@ -231,7 +231,7 @@ const componentProps = computed(() => {
    case 'dockerManager':
      // DockerManager 可能不需要 session 信息，但需要转发事件
      return {
-       class: 'pane-content',
+       class: 'flex-grow h-full overflow-hidden', // <-- 修改：添加 flex-grow 和 h-full，并保留 overflow-hidden
        // 假设 DockerManager 会发出 'docker-command' 事件
        // onDockerCommand: (payload: { containerId: string; command: 'up' | 'down' | 'restart' | 'stop' }) => emit('dockerCommand', payload),
        // 暂时不添加事件转发，等组件实现后再确定