fix styles

src/components/dialogs/AvatarDialog/SetAvatarStylesDialog.vue

@@ -67,7 +67,7 @@
         </template>
 
         <template #footer>
-            <Button variant="secondary" @click="closeSetAvatarStylesDialog">{{
+            <Button variant="secondary" class="mr-2" @click="closeSetAvatarStylesDialog">{{
                 t('dialog.set_avatar_styles.cancel')
             }}</Button>
             <Button @click="saveSetAvatarStylesDialog">

src/components/dialogs/AvatarDialog/SetAvatarTagsDialog.vue

@@ -90,7 +90,7 @@
             </div>
         </template>
         <template #footer>
-            <Button variant="secondary" @click="closeSetAvatarTagsDialog">{{
+            <Button variant="secondary" class="mr-2" @click="closeSetAvatarTagsDialog">{{
                 t('dialog.set_avatar_tags.cancel')
             }}</Button>
             <Button @click="saveSetAvatarTagsDialog">{{ t('dialog.set_avatar_tags.save') }}</Button>

src/components/dialogs/CustomNavDialog.vue

@@ -199,7 +199,7 @@
                     {{ t('nav_menu.custom_nav.delete_folder') }}
                 </Button>
                 <div class="folder-editor__footer-spacer"></div>
-                <Button variant="secondary" @click="closeFolderEditor">
+                <Button variant="secondary" class="mr-2" @click="closeFolderEditor">
                     {{ t('nav_menu.custom_nav.cancel') }}
                 </Button>
                 <Button :disabled="folderEditorSaveDisabled" @click="handleFolderEditorSave">

src/components/dialogs/GroupDialog/GroupMemberModerationDialog.vue

@@ -790,73 +790,85 @@
             <br />
             <span class="name">{{ t('dialog.group_member_moderation.actions') }}</span>
             <br />
-            <Button
+            <div class="flex gap-2">
-                variant="outline"
+                <Button
-                :disabled="
+                    variant="outline"
-                    Boolean(
+                    :disabled="
-                        !selectedRoles.length ||
+                        Boolean(
-                        progressCurrent ||
+                            !selectedRoles.length ||
-                        !hasGroupPermission(groupMemberModeration.groupRef, 'group-roles-assign')
+                            progressCurrent ||
-                    )
+                            !hasGroupPermission(groupMemberModeration.groupRef, 'group-roles-assign')
-                "
+                        )
-                @click="groupMembersAddRoles"
+                    "
-                >{{ t('dialog.group_member_moderation.add_roles') }}</Button
+                    @click="groupMembersAddRoles"
-            >
+                    >{{ t('dialog.group_member_moderation.add_roles') }}</Button
-            <Button
+                >
-                variant="secondary"
+                <Button
-                :disabled="
+                    variant="secondary"
-                    Boolean(
+                    :disabled="
-                        !selectedRoles.length ||
+                        Boolean(
-                        progressCurrent ||
+                            !selectedRoles.length ||
-                        !hasGroupPermission(groupMemberModeration.groupRef, 'group-roles-assign')
+                            progressCurrent ||
-                    )
+                            !hasGroupPermission(groupMemberModeration.groupRef, 'group-roles-assign')
-                "
+                        )
-                @click="groupMembersRemoveRoles"
+                    "
-                >{{ t('dialog.group_member_moderation.remove_roles') }}</Button
+                    @click="groupMembersRemoveRoles"
-            >
+                    >{{ t('dialog.group_member_moderation.remove_roles') }}</Button
-            <Button
+                >
-                variant="outline"
+                <Button
-                :disabled="
+                    variant="outline"
-                    Boolean(
+                    :disabled="
-                        progressCurrent || !hasGroupPermission(groupMemberModeration.groupRef, 'group-members-manage')
+                        Boolean(
-                    )
+                            progressCurrent ||
-                "
+                            !hasGroupPermission(groupMemberModeration.groupRef, 'group-members-manage')
-                @click="groupMembersSaveNote"
+                        )
-                >{{ t('dialog.group_member_moderation.save_note') }}</Button
+                    "
-            >
+                    @click="groupMembersSaveNote"
-            <Button
+                    >{{ t('dialog.group_member_moderation.save_note') }}</Button
-                variant="outline"
+                >
-                :disabled="
+                <Button
-                    Boolean(
+                    variant="outline"
-                        progressCurrent || !hasGroupPermission(groupMemberModeration.groupRef, 'group-members-remove')
+                    :disabled="
-                    )
+                        Boolean(
-                "
+                            progressCurrent ||
-                @click="groupMembersKick"
+                            !hasGroupPermission(groupMemberModeration.groupRef, 'group-members-remove')
-                >{{ t('dialog.group_member_moderation.kick') }}</Button
+                        )
-            >
+                    "
-            <Button
+                    @click="groupMembersKick"
-                variant="outline"
+                    >{{ t('dialog.group_member_moderation.kick') }}</Button
-                :disabled="
+                >
-                    Boolean(progressCurrent || !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage'))
+                <Button
-                "
+                    variant="outline"
-                @click="groupMembersBan"
+                    :disabled="
-                >{{ t('dialog.group_member_moderation.ban') }}</Button
+                        Boolean(
-            >
+                            progressCurrent || !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
-            <Button
+                        )
-                variant="outline"
+                    "
-                :disabled="
+                    @click="groupMembersBan"
-                    Boolean(progressCurrent || !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage'))
+                    >{{ t('dialog.group_member_moderation.ban') }}</Button
-                "
+                >
-                @click="groupMembersUnban"
+                <Button
-                >{{ t('dialog.group_member_moderation.unban') }}</Button
+                    variant="outline"
-            >
+                    :disabled="
-            <span v-if="progressCurrent" style="margin-top: 10px">
+                        Boolean(
-                <el-icon class="is-loading" style="margin-left: 5px; margin-right: 5px"><Loading /></el-icon>
+                            progressCurrent || !hasGroupPermission(groupMemberModeration.groupRef, 'group-bans-manage')
-                {{ t('dialog.group_member_moderation.progress') }} {{ progressCurrent }}/{{ progressTotal }}
+                        )
-            </span>
+                    "
-            <Button variant="secondary" v-if="progressCurrent" style="margin-left: 5px" @click="progressTotal = 0">{{
+                    @click="groupMembersUnban"
-                t('dialog.group_member_moderation.cancel')
+                    >{{ t('dialog.group_member_moderation.unban') }}</Button
-            }}</Button>
+                >
+                <span v-if="progressCurrent" style="margin-top: 10px">
+                    <el-icon class="is-loading" style="margin-left: 5px; margin-right: 5px"><Loading /></el-icon>
+                    {{ t('dialog.group_member_moderation.progress') }} {{ progressCurrent }}/{{ progressTotal }}
+                </span>
+                <Button
+                    variant="secondary"
+                    v-if="progressCurrent"
+                    style="margin-left: 5px"
+                    @click="progressTotal = 0"
+                    >{{ t('dialog.group_member_moderation.cancel') }}</Button
+                >
+            </div>
         </div>
         <group-member-moderation-export-dialog
             v-model:isGroupLogsExportDialogVisible="isGroupLogsExportDialogVisible"

src/components/dialogs/GroupDialog/GroupPostEditDialog.vue

@@ -89,15 +89,17 @@
             </el-form>
         </div>
         <template #footer>
-            <Button variant="secondary" @click="groupPostEditDialog.visible = false">
+            <div class="flex gap-2">
-                {{ t('dialog.group_post_edit.cancel') }}
+                <Button variant="secondary" @click="groupPostEditDialog.visible = false">
-            </Button>
+                    {{ t('dialog.group_post_edit.cancel') }}
-            <Button v-if="groupPostEditDialog.postId" @click="editGroupPost">
+                </Button>
-                {{ t('dialog.group_post_edit.edit_post') }}
+                <Button v-if="groupPostEditDialog.postId" @click="editGroupPost">
-            </Button>
+                    {{ t('dialog.group_post_edit.edit_post') }}
-            <Button v-else @click="createGroupPost">
+                </Button>
-                {{ t('dialog.group_post_edit.create_post') }}
+                <Button v-else @click="createGroupPost">
-            </Button>
+                    {{ t('dialog.group_post_edit.create_post') }}
+                </Button>
+            </div>
         </template>
         <GallerySelectDialog
             :gallery-select-dialog="gallerySelectDialog"
@@ -107,9 +109,9 @@
 </template>
 
 <script setup>
+    import { InputGroupField, InputGroupTextareaField } from '@/components/ui/input-group';
     import { computed, ref } from 'vue';
     import { Button } from '@/components/ui/button';
-    import { InputGroupField, InputGroupTextareaField } from '@/components/ui/input-group';
     import { Checkbox } from '@/components/ui/checkbox';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';

src/components/dialogs/UserDialog/BioDialog.vue

@@ -18,7 +18,7 @@
                 v-for="(link, index) in bioDialog.bioLinks"
                 :key="index"
                 v-model="bioDialog.bioLinks[index]"
-                maxlength="64"
+                :maxlength="64"
                 show-count
                 size="sm"
                 style="margin-top: 5px">
@@ -26,7 +26,9 @@
                     <img :src="getFaviconUrl(link)" style="width: 16px; height: 16px; vertical-align: middle" />
                 </template>
                 <template #actions>
-                    <Button variant="outline" @click="bioDialog.bioLinks.splice(index, 1)" />
+                    <Button variant="ghost" size="icon-sm" @click="bioDialog.bioLinks.splice(index, 1)"
+                        ><Trash2 class="size-4"
+                    /></Button>
                 </template>
             </InputGroupAction>
 
@@ -49,8 +51,9 @@
 </template>
 
 <script setup>
-    import { Button } from '@/components/ui/button';
     import { InputGroupAction, InputGroupTextareaField } from '@/components/ui/input-group';
+    import { Button } from '@/components/ui/button';
+    import { Trash2 } from 'lucide-vue-next';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 

src/components/dialogs/UserDialog/EditNoteAndMemoDialog.vue

@@ -9,7 +9,7 @@
         append-to-body
         @close="cancel">
         <template v-if="!hideUserNotes || (hideUserNotes && hideUserMemos)">
-            <span class="name">{{ t('dialog.user.info.note') }}</span>
+            <span class="name my-2">{{ t('dialog.user.info.note') }}</span>
             <br />
             <InputGroupTextareaField
                 v-model="note"
@@ -18,22 +18,22 @@
                 :rows="6"
                 :placeholder="t('dialog.user.info.note_placeholder')"
                 input-class="extra resize-none"
+                class="my-2"
                 show-count />
         </template>
         <template v-if="!hideUserMemos || (hideUserNotes && hideUserMemos)">
             <span class="name">{{ t('dialog.user.info.memo') }}</span>
-            <br />
             <InputGroupTextareaField
                 v-model="memo"
-                class="extra"
+                class="extra mt-2"
                 :rows="6"
                 :placeholder="t('dialog.user.info.memo_placeholder')"
                 input-class="resize-none min-h-0" />
         </template>
         <template #footer>
             <div class="dialog-footer">
-                <Button variant="secondary" @click="cancel">Cancel</Button>
+                <Button variant="secondary" @click="cancel" class="mr-2">Cancel</Button>
-                <Button @click="saveChanges"> Confirm </Button>
+                <Button @click="saveChanges">Confirm</Button>
             </div>
         </template>
     </el-dialog>

src/components/dialogs/WorldDialog/SetWorldTagsDialog.vue

@@ -89,7 +89,7 @@
             <span>{{ t('dialog.new_instance.content_third_person') }}</span>
         </label>
         <template #footer>
-            <div style="display: flex">
+            <div class="flex gap-2">
                 <Button variant="secondary" @click="isVisible = false">
                     {{ t('dialog.set_world_tags.cancel') }}
                 </Button>
@@ -104,8 +104,8 @@
 <script setup>
     import { computed, ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
-    import { InputGroupTextareaField } from '@/components/ui/input-group';
     import { Checkbox } from '@/components/ui/checkbox';
+    import { InputGroupTextareaField } from '@/components/ui/input-group';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 

src/components/dialogs/WorldDialog/WorldAllowedDomainsDialog.vue

@@ -13,7 +13,7 @@
                 size="sm"
                 style="margin-top: 5px">
                 <template #actions>
-                    <Button variant="outline" @click="urlList.splice(index, 1)"></Button>
+                    <Button variant="ghost" @click="urlList.splice(index, 1)"><Trash2 /></Button>
                 </template>
             </InputGroupAction>
             <Button size="sm" variant="outline" style="margin-top: 5px" @click="urlList.push('')">
@@ -32,6 +32,7 @@
     import { computed, ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
     import { InputGroupAction } from '@/components/ui/input-group';
+    import { Trash2 } from 'lucide-vue-next';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 

src/components/ui/input-group/InputGroupTextareaField.vue

@@ -68,7 +68,7 @@
         const lineHeight = parseFloat(computedStyle.lineHeight) || 16;
         const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
         const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;
-        const minRows = autosizeConfig.value.minRows ?? Number(attrs.rows) || 1;
+        const minRows = autosizeConfig.value.minRows ?? (Number(attrs.rows) || 1);
         const maxRows = autosizeConfig.value.maxRows ?? Number.POSITIVE_INFINITY;
         const minHeight = lineHeight * minRows + paddingTop + paddingBottom;
         const maxHeight = lineHeight * maxRows + paddingTop + paddingBottom;

src/views/PlayerList/PlayerList.vue

@@ -275,7 +275,10 @@
         })
     );
 
-    const playerListDisplayData = computed(() => currentInstanceUsersData.value ?? []);
+    const playerListDisplayData = computed(() => {
+        const data = currentInstanceUsersData.value;
+        return Array.isArray(data) ? data.slice() : [];
+    });
 
     const { table: playerListTable } = useVrcxVueTable({
         persistKey: 'playerList',

src/views/Search/Search.vue

@@ -9,7 +9,7 @@
                 @input="updateSearchText"
                 @keyup.enter="search" />
             <TooltipWrapper side="bottom" :content="t('view.search.clear_results_tooltip')">
-                <Button class="rounded-full mr-2" size="icon-sm" variant="ghost" @click="handleClearSearch"
+                <Button class="rounded-full ml-2" size="icon" variant="ghost" @click="handleClearSearch"
                     ><Trash2
                 /></Button>
             </TooltipWrapper>

src/views/Settings/components/Tabs/PicturesTab.vue

@@ -23,7 +23,7 @@
             :value="screenshotHelperCopyToClipboard"
             @change="setScreenshotHelperCopyToClipboard()"
             :long-label="true" />
-        <Button size="sm" variant="outline" @click="askDeleteAllScreenshotMetadata()">{{
+        <Button size="sm" variant="outline" class="mt-2" @click="askDeleteAllScreenshotMetadata()">{{
             t('view.settings.advanced.advanced.delete_all_screenshot_metadata.button')
         }}</Button>
     </div>
@@ -46,15 +46,18 @@
                 t('view.settings.advanced.advanced.user_generated_content.description')
             }}</span>
         </div>
-        <Button size="sm" variant="outline" @click="openUGCFolder()">{{
+        <div class="flex gap-2 mt-2">
-            t('view.settings.advanced.advanced.user_generated_content.folder')
+            <Button size="sm" variant="outline" @click="openUGCFolder()">{{
-        }}</Button>
+                t('view.settings.advanced.advanced.user_generated_content.folder')
-        <Button size="sm" variant="outline" @click="openUGCFolderSelector()">{{
+            }}</Button>
-            t('view.settings.advanced.advanced.user_generated_content.set_folder')
+            <Button size="sm" variant="outline" @click="openUGCFolderSelector()">{{
-        }}</Button>
+                t('view.settings.advanced.advanced.user_generated_content.set_folder')
-        <Button size="sm" variant="outline" @click="resetUGCFolder()" v-if="ugcFolderPath">{{
+            }}</Button>
-            t('view.settings.advanced.advanced.user_generated_content.reset_override')
+            <Button size="sm" variant="outline" @click="resetUGCFolder()" v-if="ugcFolderPath">{{
-        }}</Button>
+                t('view.settings.advanced.advanced.user_generated_content.reset_override')
+            }}</Button>
+        </div>
+
         <br />
         <br />
         <br />

src/views/Tools/Gallery.vue

@@ -554,10 +554,10 @@
     import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
     import { Maximize2, Trash2 } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
-    import { InputGroupTextareaField } from '@/components/ui/input-group';
     import { ButtonGroup } from '@/components/ui/button-group';
     import { Checkbox } from '@/components/ui/checkbox';
     import { ElMessageBox } from 'element-plus';
+    import { InputGroupTextareaField } from '@/components/ui/input-group';
     import { VirtualCombobox } from '@/components/ui/virtual-combobox';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
@@ -1159,8 +1159,4 @@
     .gallery-meta--small {
         font-size: 11px;
     }
-
-    .gallery-page__back {
-        padding-left: 0;
-    }
 </style>