fix tests for mail configs

Author: marle3003

webui/e2e/dashboard-demo/mail.spec.ts

@@ -166,7 +166,10 @@ test('Visit Mail Server', async ({ page }) => {
     await test.step('Verify Configs', async () => {
 
         await page.getByRole('tab', { name: 'Configs' }).click();
-        const table = page.getByRole('table', { name: 'Configs' });
+        const panel = page.getByRole('tabpanel', { name: 'Configs' });
+        await panel.waitFor({ state: 'visible' });
+        
+        const table = panel.getByRole('table', { name: 'Configs' });
         await expect(await getCellByColumnName(table, 'URL')).toContainText('/mail.yaml');
         await expect(await getCellByColumnName(table, 'Provider')).toHaveText('File');
 

webui/src/components/dashboard/ConfigCard.vue

@@ -104,25 +104,27 @@ function formatProvider(config: ConfigRef) {
       </div>
   </section>
 
-  <table class="table dataTable selectable" style="table-layout: fixed;" aria-labelledby="configs" v-else>
-        <thead>
-            <tr>
-                <th scope="col" class="text-left col-6 col-md-9">URL</th>
-                <th scope="col" class="text-center col-2">Provider</th>
-                <th scope="col" class="text-center col-2">Last Update</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr scope="row" v-for="config in configs" :key="config.url" @mouseup.left="gotToConfig(config)" @mousedown.middle="gotToConfig(config, true)">
-                <td>
-                    <router-link @click.stop class="row-link" :to="{ name: getRouteName('config').value, params: { id: config.id } }">
-                        {{ config.url }}
-                    </router-link>
-                </td>
-                <td class="text-center">{{ formatProvider(config) }}</td>
-                <td class="text-center">{{ format(config.time) }}</td>
-            </tr>
-        </tbody>
+  <div v-else class="table-responsive-sm">
+    <table class="table dataTable selectable" aria-label="Configs">
+            <thead>
+                <tr>
+                    <th scope="col" class="text-left col-6 col-md-9">URL</th>
+                    <th scope="col" class="text-center col-2">Provider</th>
+                    <th scope="col" class="text-center col-2">Last Update</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr scope="row" v-for="config in configs" :key="config.url" @mouseup.left="gotToConfig(config)" @mousedown.middle="gotToConfig(config, true)">
+                    <td>
+                        <router-link @click.stop class="row-link" :to="{ name: getRouteName('config').value, params: { id: config.id } }">
+                            {{ config.url }}
+                        </router-link>
+                    </td>
+                    <td class="text-center">{{ formatProvider(config) }}</td>
+                    <td class="text-center">{{ format(config.time) }}</td>
+                </tr>
+            </tbody>
     </table>
+  </div>
 
 </template>

webui/src/components/dashboard/mail/Service.vue

@@ -45,23 +45,15 @@ if (serviceName){
               <div class="tab-pane fade show active" id="servers" role="tabpanel" aria-labelledby="servers-tab">
                 <servers :service="service" />
               </div>
-            </div>
-            <div class="tab-content">
               <div class="tab-pane fade" id="mailboxes" role="tabpanel" aria-labelledby="mailboxes-tab">
                 <mailboxes :service="service" />
               </div>
-            </div>
-            <div class="tab-content" v-if="service.rules && service.rules.length > 0">
-              <div class="tab-pane fade" id="rules" role="tabpanel" aria-labelledby="rules-tab">
+              <div v-if="service.rules && service.rules.length > 0" class="tab-pane fade" id="rules" role="tabpanel" aria-labelledby="rules-tab">
                 <rules :rules="service.rules" />
               </div>
-            </div>
-            <div class="tab-content">
               <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">
                 <settings :settings="service.settings" />
               </div>
-            </div>
-            <div class="tab-content">
               <div class="tab-pane fade" id="configs-panel" role="tabpanel" aria-labelledby="configs-tab">
                 <config-card :configs="service.configs" :use-card="false" />
               </div>