fix change id to be unique

Author: marle3003

webui/src/components/dashboard/ConfigCard.vue

@@ -79,26 +79,28 @@ function formatProvider(config: ConfigRef) {
   <section class="card" aria-labelledby="configs" v-if="useCard">
       <div class="card-body">
           <h2 v-if="!hideTitle" id="configs" class="card-title text-center">{{ title }}</h2>
-          <table class="table dataTable selectable" style="table-layout: fixed;" aria-labelledby="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 class="table-responsive-sm">
+            <table class="table dataTable selectable" aria-labelledby="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>
       </div>
   </section>
 

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

@@ -39,7 +39,7 @@ if (serviceName){
               <button id="mailboxes-tab" data-bs-toggle="tab" data-bs-target="#mailboxes" type="button" role="tab" aria-controls="mailboxes" aria-selected="false">Mailboxes</button>
               <button v-if="service.rules && service.rules.length > 0" id="rules-tab" data-bs-toggle="tab" data-bs-target="#rules" type="button" role="tab" aria-controls="rules" aria-selected="false">Rules</button>
               <button id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
-              <button id="configs-tab" data-bs-toggle="tab" data-bs-target="#configs" type="button" role="tab" aria-controls="configs" aria-selected="false">Configs</button>
+              <button id="configs-tab" data-bs-toggle="tab" data-bs-target="#configs-panel" type="button" role="tab" aria-controls="configs-panel" aria-selected="false">Configs</button>
             </div>
             <div class="tab-content">
               <div class="tab-pane fade show active" id="servers" role="tabpanel" aria-labelledby="servers-tab">
@@ -62,7 +62,7 @@ if (serviceName){
               </div>
             </div>
             <div class="tab-content">
-              <div class="tab-pane fade" id="configs" role="tabpanel" aria-labelledby="configs-tab">
+              <div class="tab-pane fade" id="configs-panel" role="tabpanel" aria-labelledby="configs-tab">
                 <config-card :configs="service.configs" :use-card="false" />
               </div>
             </div>