From 2a31a1f9880a631693fb4c04f55b2be32fee7c92 Mon Sep 17 00:00:00 2001
From: Natsumi <cmcooper123@hotmail.com>
Date: Mon, 12 Jan 2026 09:25:21 +1300
Subject: [PATCH] Button alignments

---
 src/components/InstanceInfo.vue               |  7 +-
 src/components/Location.vue                   | 10 ++-
 src/components/LocationWorld.vue              |  4 ++
 .../dialogs/AvatarDialog/AvatarDialog.vue     |  1 -
 .../dialogs/GroupDialog/GroupDialog.vue       | 67 +++++++++----------
 .../dialogs/UserDialog/UserDialog.vue         |  7 +-
 .../dialogs/WorldDialog/WorldDialog.vue       |  3 +-
 src/localization/en.json                      |  8 +--
 src/views/Search/Search.vue                   | 47 +++++++------
 .../components/Tabs/AppearanceTab.vue         | 10 +--
 .../Settings/components/Tabs/GeneralTab.vue   |  4 +-
 .../Settings/components/Tabs/PicturesTab.vue  |  2 +-
 .../components/WristOverlaySettings.vue       |  4 +-
 13 files changed, 91 insertions(+), 83 deletions(-)

diff --git a/src/components/InstanceInfo.vue b/src/components/InstanceInfo.vue
index 1005fee0..eb118083 100644
--- a/src/components/InstanceInfo.vue
+++ b/src/components/InstanceInfo.vue
@@ -16,12 +16,13 @@
                         ><br /><br />
                     </template>
                     <span
-                        ><span style="color: var(--el-color-primary)">PC: </span
+                        ><span class="x-tag-platform-pc">PC: </span
                         >{{ props.instance.platforms.standalonewindows }}</span
                     ><br />
                     <span
-                        ><span style="color: var(--el-color-success)">Android: </span
-                        >{{ props.instance.platforms.android }}</span
+                        ><span class="x-tag-platform-quest">Android: </span>{{ props.instance.platforms.android }}</span
+                    ><br />
+                    <span><span>iOS: </span>{{ props.instance.platforms.ios }}</span
                     ><br />
                     <span>{{ t('dialog.user.info.instance_game_version') }} {{ props.instance.gameServerVersion }}</span
                     ><br />
diff --git a/src/components/Location.vue b/src/components/Location.vue
index b5838080..5b9c6125 100644
--- a/src/components/Location.vue
+++ b/src/components/Location.vue
@@ -210,10 +210,14 @@
         }
     }
 
-    function translateAccessType(accessTypeName) {
-        const key = accessTypeLocaleKeyMap[accessTypeName];
+    function translateAccessType(accessTypeNameRaw) {
+        const key = accessTypeLocaleKeyMap[accessTypeNameRaw];
         if (!key) {
-            return accessTypeName;
+            return accessTypeNameRaw;
+        }
+        if (accessTypeNameRaw === 'groupPublic' || accessTypeNameRaw === 'groupPlus') {
+            const groupKey = accessTypeLocaleKeyMap['group'];
+            return t(groupKey) + ' ' + t(key);
         }
         return t(key);
     }
diff --git a/src/components/LocationWorld.vue b/src/components/LocationWorld.vue
index a37ddf57..3996464a 100644
--- a/src/components/LocationWorld.vue
+++ b/src/components/LocationWorld.vue
@@ -103,6 +103,10 @@
         if (!key) {
             return accessTypeNameRaw;
         }
+        if (accessTypeNameRaw === 'groupPublic' || accessTypeNameRaw === 'groupPlus') {
+            const groupKey = accessTypeLocaleKeyMap['group'];
+            return t(groupKey) + ' ' + t(key);
+        }
         return t(key);
     }
 
diff --git a/src/components/dialogs/AvatarDialog/AvatarDialog.vue b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
index da4da2f9..d4b3c11c 100644
--- a/src/components/dialogs/AvatarDialog/AvatarDialog.vue
+++ b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
@@ -560,7 +560,6 @@
         openExternalLink,
         openFolderGeneric,
         replaceVrcPackageUrl,
-        textToHex,
         timeToText
     } from '../../../shared/utils';
     import {
diff --git a/src/components/dialogs/GroupDialog/GroupDialog.vue b/src/components/dialogs/GroupDialog/GroupDialog.vue
index 2a7e523b..5b6868d4 100644
--- a/src/components/dialogs/GroupDialog/GroupDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialog.vue
@@ -358,7 +358,7 @@
                                 <InviteYourself :location="room.tag" style="margin-left: 5px" />
                                 <TooltipWrapper side="top" content="Refresh player count">
                                     <Button
-                                        class="rounded-full w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
+                                        class="rounded-full ml-1 w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
                                         size="icon"
                                         variant="outline"
                                         @click="refreshInstancePlayerCount(room.tag)"
@@ -614,38 +614,38 @@
                                 <div v-else class="extra">-</div>
                             </div>
                         </div>
-                        <div class="x-friend-item" style="width: 350px; cursor: default">
-                            <div class="detail">
-                                <span class="name">{{ t('dialog.group.info.url') }}</span>
-                                <span class="extra"
-                                    >{{ groupDialog.ref.$url }}
-                                    <TooltipWrapper side="top" :content="t('dialog.group.info.url_tooltip')">
-                                        <Button
-                                            class="rounded-full text-xs"
-                                            size="icon-sm"
-                                            variant="outline"
-                                            style="margin-left: 5px"
-                                            @click="copyToClipboard(groupDialog.ref.$url)"
-                                            ><i class="ri-file-copy-line"></i
-                                        ></Button> </TooltipWrapper
-                                ></span>
+                        <div class="inline-flex justify-between w-full">
+                            <div class="x-friend-item" style="cursor: default; width: 50%">
+                                <div class="detail">
+                                    <span class="name">{{ t('dialog.group.info.url') }}</span>
+                                    <span class="extra"
+                                        >{{ groupDialog.ref.$url }}
+                                        <TooltipWrapper side="top" :content="t('dialog.group.info.url_tooltip')">
+                                            <Button
+                                                class="rounded-full ml-1 text-xs"
+                                                size="icon-sm"
+                                                variant="outline"
+                                                @click="copyToClipboard(groupDialog.ref.$url)"
+                                                ><i class="ri-file-copy-line"></i
+                                            ></Button> </TooltipWrapper
+                                    ></span>
+                                </div>
                             </div>
-                        </div>
-                        <div class="x-friend-item" style="width: 350px; cursor: default">
-                            <div class="detail">
-                                <span class="name">{{ t('dialog.group.info.id') }}</span>
-                                <span class="extra"
-                                    >{{ groupDialog.id }}
-                                    <TooltipWrapper side="top" :content="t('dialog.group.info.id_tooltip')">
-                                        <Button
-                                            class="rounded-full text-xs"
-                                            size="icon-sm"
-                                            variant="outline"
-                                            style="margin-left: 5px"
-                                            @click="copyToClipboard(groupDialog.id)"
-                                            ><i class="ri-file-copy-line"></i
-                                        ></Button> </TooltipWrapper
-                                ></span>
+                            <div class="x-friend-item w-1/2" style="cursor: default; width: 50%">
+                                <div class="detail">
+                                    <span class="name">{{ t('dialog.group.info.id') }}</span>
+                                    <span class="extra"
+                                        >{{ groupDialog.id }}
+                                        <TooltipWrapper side="top" :content="t('dialog.group.info.id_tooltip')">
+                                            <Button
+                                                class="rounded-full ml-1 text-xs"
+                                                size="icon-sm"
+                                                variant="outline"
+                                                @click="copyToClipboard(groupDialog.id)"
+                                                ><i class="ri-file-copy-line"></i
+                                            ></Button> </TooltipWrapper
+                                    ></span>
+                                </div>
                             </div>
                         </div>
                         <div
@@ -1171,7 +1171,6 @@
         openExternalLink,
         refreshInstancePlayerCount,
         removeFromArray,
-        textToHex,
         userImage,
         userStatusClass
     } from '../../../shared/utils';
@@ -1903,6 +1902,6 @@
         gap: 16px;
         overflow-y: auto;
         max-height: 360px;
-        padding: 10px 0;
+        padding: 9px 0;
     }
 </style>
diff --git a/src/components/dialogs/UserDialog/UserDialog.vue b/src/components/dialogs/UserDialog/UserDialog.vue
index b91d6b44..5f8bc1b6 100644
--- a/src/components/dialogs/UserDialog/UserDialog.vue
+++ b/src/components/dialogs/UserDialog/UserDialog.vue
@@ -38,7 +38,7 @@
                                             side="top"
                                             :content="t('dialog.user.info.refresh_instance_info')"
                                             ><Button
-                                                class="rounded-full w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
+                                                class="rounded-full ml-1 w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
                                                 size="icon"
                                                 variant="outline"
                                                 @click="refreshInstancePlayerCount(userDialog.$location.tag)"
@@ -503,10 +503,9 @@
                                 <span class="extra">
                                     <span v-text="userDialog.$homeLocationName"></span>
                                     <Button
-                                        class="rounded-full text-xs ml-1"
+                                        class="rounded-full ml-1 text-xs"
                                         size="icon-sm"
                                         variant="outline"
-                                        style="margin-left: 5px"
                                         @click.stop="resetHome()"
                                         ><i class="ri-delete-bin-line"></i>
                                     </Button>
@@ -522,7 +521,7 @@
                                         <DropdownMenu>
                                             <DropdownMenuTrigger as-child>
                                                 <Button
-                                                    class="rounded-full text-xs"
+                                                    class="rounded-full ml-1 text-xs"
                                                     size="icon-sm"
                                                     variant="outline"
                                                     @click.stop
diff --git a/src/components/dialogs/WorldDialog/WorldDialog.vue b/src/components/dialogs/WorldDialog/WorldDialog.vue
index 22808423..f9d9c063 100644
--- a/src/components/dialogs/WorldDialog/WorldDialog.vue
+++ b/src/components/dialogs/WorldDialog/WorldDialog.vue
@@ -351,7 +351,7 @@
                                         side="top"
                                         :content="t('dialog.world.instances.refresh_instance_info')">
                                         <Button
-                                            class="rounded-full w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
+                                            class="rounded-full ml-1 w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
                                             size="icon"
                                             variant="outline"
                                             @click="refreshInstancePlayerCount(room.tag)"
@@ -785,7 +785,6 @@
         openFolderGeneric,
         refreshInstancePlayerCount,
         replaceVrcPackageUrl,
-        textToHex,
         timeToText,
         userImage,
         userStatusClass
diff --git a/src/localization/en.json b/src/localization/en.json
index 9685b3a3..998b201c 100644
--- a/src/localization/en.json
+++ b/src/localization/en.json
@@ -566,11 +566,11 @@
                     "age_gated_instances": "Age Gated Instances",
                     "nicknames": "Memo Nicknames",
                     "sort_favorite_by": "Sort Favorites by",
-                    "sort_favorite_by_name": "name",
-                    "sort_favorite_by_date": "date",
+                    "sort_favorite_by_name": "Name",
+                    "sort_favorite_by_date": "Date",
                     "sort_instance_users_by": "Sort Instance Users by",
-                    "sort_instance_users_by_time": "time",
-                    "sort_instance_users_by_alphabet": "alphabetical",
+                    "sort_instance_users_by_time": "Time",
+                    "sort_instance_users_by_alphabet": "Alphabetical",
                     "table_max_size": "Table Max Size",
                     "table_page_sizes": "Table Page Sizes",
                     "table_page_sizes_error": "Page size must be a number between 1 and 1000",
diff --git a/src/views/Search/Search.vue b/src/views/Search/Search.vue
index 240377f3..beae225e 100644
--- a/src/views/Search/Search.vue
+++ b/src/views/Search/Search.vue
@@ -71,28 +71,30 @@
                 v-loading="isSearchWorldLoading"
                 :label="t('view.search.world.header')"
                 style="min-height: 60px">
-                <Select
-                    :model-value="searchWorldCategoryIndex"
-                    @update:modelValue="handleSearchWorldCategorySelect"
-                    style="margin-bottom: 15px">
-                    <SelectTrigger size="sm">
-                        <SelectValue :placeholder="t('view.search.world.category')" />
-                    </SelectTrigger>
-                    <SelectContent>
-                        <SelectGroup>
-                            <SelectItem
-                                v-for="row in cachedConfig.dynamicWorldRows"
-                                :key="row.index"
-                                :value="row.index">
-                                {{ row.name }}
-                            </SelectItem>
-                        </SelectGroup>
-                    </SelectContent>
-                </Select>
-                <label class="inline-flex items-center gap-2" style="margin-left: 10px">
-                    <Checkbox v-model="searchWorldLabs" />
-                    <span>{{ t('view.search.world.community_lab') }}</span>
-                </label>
+                <div class="inline-flex justify-between mb-4 w-full">
+                    <Select
+                        :model-value="searchWorldCategoryIndex"
+                        @update:modelValue="handleSearchWorldCategorySelect"
+                        style="margin-bottom: 15px">
+                        <SelectTrigger size="sm">
+                            <SelectValue :placeholder="t('view.search.world.category')" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectGroup>
+                                <SelectItem
+                                    v-for="row in cachedConfig.dynamicWorldRows"
+                                    :key="row.index"
+                                    :value="row.index">
+                                    {{ row.name }}
+                                </SelectItem>
+                            </SelectGroup>
+                        </SelectContent>
+                    </Select>
+                    <label class="inline-flex items-center gap-2" style="margin-left: 10px">
+                        <Checkbox v-model="searchWorldLabs" />
+                        <span>{{ t('view.search.world.community_lab') }}</span>
+                    </label>
+                </div>
                 <div class="x-friend-list" style="min-height: 500px">
                     <div
                         v-for="world in searchWorldResults"
@@ -161,6 +163,7 @@
                                 :loading="userDialog.isAvatarsLoading"
                                 size="small"
                                 :icon="Refresh"
+                                class="ml-1"
                                 circle
                                 @click="refreshUserDialogAvatars"></el-button>
                         </TooltipWrapper>
diff --git a/src/views/Settings/components/Tabs/AppearanceTab.vue b/src/views/Settings/components/Tabs/AppearanceTab.vue
index 639a1981..c1a5aead 100644
--- a/src/views/Settings/components/Tabs/AppearanceTab.vue
+++ b/src/views/Settings/components/Tabs/AppearanceTab.vue
@@ -80,7 +80,7 @@
                 <span class="name">{{ t('view.settings.appearance.appearance.sort_favorite_by') }}</span>
                 <RadioGroup
                     :model-value="sortFavorites ? 'true' : 'false'"
-                    class="gap-2"
+                    class="gap-2 flex"
                     style="margin-top: 8px"
                     @update:modelValue="handleSortFavoritesRadio">
                     <div class="flex items-center space-x-2">
@@ -101,7 +101,7 @@
                 <span class="name">{{ t('view.settings.appearance.appearance.sort_instance_users_by') }}</span>
                 <RadioGroup
                     :model-value="instanceUsersSortAlphabetical ? 'true' : 'false'"
-                    class="gap-2"
+                    class="gap-2 flex"
                     style="margin-top: 8px"
                     @update:modelValue="handleInstanceUsersSortAlphabeticalRadio">
                     <div class="flex items-center space-x-2">
@@ -182,7 +182,7 @@
                 <span class="name">{{ t('view.settings.appearance.timedate.time_format') }}</span>
                 <RadioGroup
                     :model-value="dtHour12 ? 'true' : 'false'"
-                    class="gap-2"
+                    class="gap-2 flex"
                     style="margin-top: 8px"
                     @update:modelValue="handleDtHour12Radio">
                     <div class="flex items-center space-x-2">
@@ -237,7 +237,7 @@
                         }}</SelectItem>
                     </SelectContent>
                 </Select>
-                <el-icon style="padding: 5px"><ArrowRight /></el-icon>
+                <el-icon style="margin: 5px"><ArrowRight /></el-icon>
                 <Select
                     :model-value="sidebarSortMethod2"
                     :disabled="!sidebarSortMethod1"
@@ -270,7 +270,7 @@
                         }}</SelectItem>
                     </SelectContent>
                 </Select>
-                <el-icon style="padding: 5px"><ArrowRight /></el-icon>
+                <el-icon style="margin: 5px"><ArrowRight /></el-icon>
                 <Select
                     :model-value="sidebarSortMethod3"
                     :disabled="!sidebarSortMethod2"
diff --git a/src/views/Settings/components/Tabs/GeneralTab.vue b/src/views/Settings/components/Tabs/GeneralTab.vue
index 95634d6d..1022a312 100644
--- a/src/views/Settings/components/Tabs/GeneralTab.vue
+++ b/src/views/Settings/components/Tabs/GeneralTab.vue
@@ -220,7 +220,7 @@
                 <RadioGroup
                     :model-value="autoStateChangeNoFriends ? 'true' : 'false'"
                     :disabled="!autoStateChangeEnabled"
-                    class="gap-2"
+                    class="gap-2 flex"
                     style="margin-top: 8px"
                     @update:modelValue="handleAutoStateChangeNoFriendsRadio">
                     <div class="flex items-center space-x-2">
@@ -280,7 +280,7 @@
         </div>
         <div class="options-container" style="margin-top: 45px; border-top: 1px solid #eee; padding-top: 30px">
             <span class="header">{{ t('view.settings.general.legal_notice.header') }}</span>
-            <div class="options-container-item">
+            <div class="options-container-item" style="display: block">
                 <p>
                     &copy; 2019-2025
                     <a class="x-link" @click="openExternalLink('https://github.com/pypy-vrc')">pypy</a> &amp;
diff --git a/src/views/Settings/components/Tabs/PicturesTab.vue b/src/views/Settings/components/Tabs/PicturesTab.vue
index 87aef274..140fcc2f 100644
--- a/src/views/Settings/components/Tabs/PicturesTab.vue
+++ b/src/views/Settings/components/Tabs/PicturesTab.vue
@@ -1,6 +1,6 @@
 <template>
     <!--//- Pictures | Screenshot Helper-->
-    <div class="options-container">
+    <div class="options-container" style="margin-top: 0">
         <span class="header">{{ t('view.settings.advanced.advanced.screenshot_helper.header') }}</span>
         <div class="options-container-item">
             <span class="name">{{ t('view.settings.advanced.advanced.screenshot_helper.description') }}</span>
diff --git a/src/views/Settings/components/WristOverlaySettings.vue b/src/views/Settings/components/WristOverlaySettings.vue
index 6655508e..a1d30663 100644
--- a/src/views/Settings/components/WristOverlaySettings.vue
+++ b/src/views/Settings/components/WristOverlaySettings.vue
@@ -46,7 +46,7 @@
             <RadioGroup
                 :model-value="openVRAlways ? 'true' : 'false'"
                 :disabled="!openVR"
-                class="gap-2"
+                class="gap-2 flex"
                 style="margin-top: 8px"
                 @update:modelValue="handleOpenVRAlwaysRadio">
                 <div class="flex items-center space-x-2">
@@ -64,7 +64,7 @@
             <RadioGroup
                 :model-value="overlaybutton ? 'true' : 'false'"
                 :disabled="!openVR || !overlayWrist"
-                class="gap-2"
+                class="gap-2 flex"
                 style="margin-top: 8px"
                 @update:modelValue="handleOverlayButtonRadio">
                 <div class="flex items-center space-x-2">