From 228e3d9ae3216995ab0add7be75b0dedf178fc15 Mon Sep 17 00:00:00 2001
From: trom <107225647+see-more@users.noreply.github.com>
Date: Tue, 3 Sep 2024 13:46:37 +0800
Subject: [PATCH] =?UTF-8?q?style:=E4=BC=98=E5=8C=96container=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E7=9A=84=E5=B8=83=E5=B1=80=20(#6348)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/container/container/index.vue   | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/frontend/src/views/container/container/index.vue b/frontend/src/views/container/container/index.vue
index 449af230064f..c8c55a6d09d3 100644
--- a/frontend/src/views/container/container/index.vue
+++ b/frontend/src/views/container/container/index.vue
@@ -22,15 +22,17 @@
                 </div>
             </template>
             <template #toolbar>
-                <el-row>
-                    <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
-                        <el-button type="primary" @click="onOpenDialog('create')">
-                            {{ $t('container.create') }}
-                        </el-button>
-                        <el-button type="primary" plain @click="onClean()">
-                            {{ $t('container.containerPrune') }}
-                        </el-button>
-                        <el-button-group class="ml-4">
+                <div class="flex w-full flex-col gap-4 md:justify-between md:flex-row">
+                    <div class="flex flex-wrap gap-4">
+                        <div>
+                            <el-button type="primary" @click="onOpenDialog('create')">
+                                {{ $t('container.create') }}
+                            </el-button>
+                            <el-button type="primary" plain @click="onClean()">
+                                {{ $t('container.containerPrune') }}
+                            </el-button>
+                        </div>
+                        <el-button-group>
                             <el-button :disabled="checkStatus('start', null)" @click="onOperate('start', null)">
                                 {{ $t('container.start') }}
                             </el-button>
@@ -53,12 +55,12 @@
                                 {{ $t('container.remove') }}
                             </el-button>
                         </el-button-group>
-                    </el-col>
-                    <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
+                    </div>
+                    <div class="flex flex-row gap-2 md:flex-col lg:flex-row">
                         <TableSetting title="container-refresh" @search="refresh()" />
                         <TableSearch @search="search()" v-model:searchName="searchName" />
-                    </el-col>
-                </el-row>
+                    </div>
+                </div>
             </template>
             <template #search>
                 <el-select v-model="searchState" @change="search()" clearable class="p-w-200">