styling small changes

frontend/src/layouts/default/AppBar.vue

@@ -1,6 +1,7 @@
 <template>
   <v-app-bar :elevation="5">
     <v-icon v-if="isMobile" icon="mdi-menu" @click="$emit('toggleDrawer')" />
+    <span v-else style="width: 24px"></span>
     <v-app-bar-title :text="$t(<string>$router.currentRoute.value.name)" class="align-center text-center " />
     <v-btn prepend-icon="mdi-content-save" v-if="stateChange" :text="$t('actions.save')" @click="saveChanges"></v-btn>
     <v-icon icon="mdi-theme-light-dark" @click="toggleTheme()" style="margin: 0 10px;"></v-icon>

frontend/src/layouts/default/Default.vue

@@ -25,3 +25,10 @@ const isMobile = computed( ():boolean =>{
   return smAndDown.value
 })
 </script>
+
+<style>
+.v-card-subtitle {
+  text-align: center;
+  border-bottom: 1px solid gray;
+}
+</style>

frontend/src/views/Basics.vue

@@ -337,10 +337,3 @@ const enableClashApi = computed({
   }
 })
 </script>
-
-<style>
-.v-card-subtitle {
-  text-align: center;
-  border-bottom: 1px solid gray;
-}
-</style>

frontend/src/views/Clients.vue

@@ -24,7 +24,7 @@
     @close="closeStats"
   />
   <v-row>
-    <v-col cols="12">
+    <v-col cols="12" justify="center" align="center">
       <v-btn color="primary" @click="showModal(-1)">{{ $t('actions.add') }}</v-btn>
     </v-col>
   </v-row>

frontend/src/views/Inbounds.vue

@@ -16,7 +16,7 @@
     @close="closeStats"
   />
   <v-row>
-    <v-col cols="12">
+    <v-col cols="12" justify="center" align="center">
       <v-btn color="primary" @click="showModal(-1)">{{ $t('actions.add') }}</v-btn>
     </v-col>
   </v-row>