Table margins

src/components/dialogs/WorldDialog/WorldDialog.vue

@@ -352,7 +352,7 @@
                         <template
                             v-if="isAgeGatedInstancesVisible || !(room.ageGate || room.location?.includes('~ageGate'))">
                             <div style="margin: 5px 0">
-                                <div class="flex-align-center">
+                                <div class="flex items-center">
                                     <LocationWorld
                                         class="text-sm"
                                         :locationobject="room.$location"
@@ -1390,10 +1390,3 @@
         }
     );
 </script>
-
-<style scoped>
-    .flex-align-center {
-        display: flex;
-        align-items: center;
-    }
-</style>

src/views/FriendList/FriendList.vue

@@ -12,7 +12,7 @@
                 :on-page-size-change="handlePageSizeChange"
                 :on-row-click="handleRowClick">
                 <template #toolbar>
-                    <div class="flex items-center justify-between">
+                    <div class="mb-2 flex items-center justify-between">
                         <div class="flex flex-none mr-2 items-center">
                             <TooltipWrapper side="bottom" :content="t('view.friend_list.favorites_only_tooltip')">
                                 <span class="inline-flex">

src/views/Moderation/Moderation.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="x-container" ref="moderationRef">
-        <div class="tool-slot">
+        <div class="mb-4 flex items-center">
             <Select
                 multiple
                 :model-value="
@@ -23,7 +23,7 @@
             <InputGroupField
                 v-model="playerModerationTable.filters[1].value"
                 :placeholder="t('view.moderation.search_placeholder')"
-                class="filter-input" />
+                class="filter-input flex-[0.4]" />
             <TooltipWrapper side="bottom" :content="t('view.moderation.refresh_tooltip')">
                 <Button
                     class="rounded-full"
@@ -200,11 +200,6 @@
 </script>
 
 <style scoped>
-    .tool-slot {
-        margin: 0 0 10px;
-        display: flex;
-        align-items: center;
-    }
     .filter-input {
         width: 150px;
         margin: 0 10px;

src/views/Notifications/Notification.vue

@@ -8,7 +8,7 @@
             :total-items="totalItems"
             :on-page-size-change="handlePageSizeChange">
             <template #toolbar>
-                <div style="margin: 0 0 10px; display: flex; align-items: center">
+                <div class="mb-2 flex items-center">
                     <Select
                         multiple
                         :model-value="