diff --git a/packages/frontend/src/components/DockerManager.vue b/packages/frontend/src/components/DockerManager.vue index 7bc61c4..9677132 100644 --- a/packages/frontend/src/components/DockerManager.vue +++ b/packages/frontend/src/components/DockerManager.vue @@ -584,13 +584,29 @@ onUnmounted(() => { .docker-table th, .docker-table td { padding: 0.6rem 0.8rem; text-align: left; + vertical-align: top; /* Align content to the top */ border-bottom: 1px solid var(--border-color-light, #eee); - white-space: nowrap; + white-space: nowrap; /* Default to nowrap */ } .docker-table td:first-child, .docker-table th:first-child { /* white-space: normal; */ /* Let specific columns handle wrapping */ } +/* Allow specific columns to wrap */ +.docker-table td:nth-child(2), /* Name */ +.docker-table td:nth-child(3), /* Image */ +.docker-table td:nth-child(5) { /* Ports */ + white-space: normal; + word-break: break-all; /* Break long words if necessary */ +} + +/* Style for Status column: truncate with ellipsis */ +.docker-table td:nth-child(4) { + max-width: 180px; /* Adjust as needed */ + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; /* Ensure ellipsis works */ +} .docker-table th { background-color: var(--header-bg-color); @@ -716,7 +732,7 @@ onUnmounted(() => { /* --- Responsive Table Styles using Container Query --- */ -@container (max-width: 768px) { +@container (max-width: 500px) { /* Lowered breakpoint */ .responsive-table { border: none; /* Remove table border */ } @@ -767,7 +783,7 @@ onUnmounted(() => { } /* 表格模式下的展开按钮列样式 */ - @container (min-width: 769px) { + @container (min-width: 601px) { /* Adjusted corresponding min-width */ .responsive-table .col-expand { width: 30px; padding: 0.6rem 0.4rem !important; @@ -777,7 +793,7 @@ onUnmounted(() => { } /* 卡片模式下隐藏原始的展开按钮列,改用底部长条按钮 */ - @container (max-width: 768px) { + @container (max-width: 600px) { /* Lowered breakpoint */ .responsive-table .col-expand { display: none !important; /* Force hide in card view */ } @@ -930,4 +946,4 @@ onUnmounted(() => { /* --- End Collapse Button Styles --- */ - \ No newline at end of file +