fix

src/components/ui/data-table/DataTableLayout.vue

@@ -5,7 +5,7 @@
         </div>
 
         <div class="rounded-md border">
-            <ScrollArea class="max-w-full" :style="tableStyle">
+            <div class="max-w-full overflow-auto" :style="tableStyle">
                 <Table :class="tableClassValue" :style="tableElementStyle">
                     <colgroup>
                         <col v-for="col in table.getVisibleLeafColumns()" :key="col.id" :style="getColStyle(col)" />
@@ -65,7 +65,7 @@
                         </TableRow>
                     </TableBody>
                 </Table>
-            </ScrollArea>
+            </div>
         </div>
 
         <div v-if="showPagination" class="mt-4 flex w-full items-center gap-3">
@@ -125,7 +125,6 @@
     } from '../pagination';
     import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../table';
     import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select';
-    import { ScrollArea } from '../scroll-area';
 
     const props = defineProps({
         table: {
@@ -256,7 +255,7 @@
         const meta = columnDef?.meta ?? {};
         const pinned = getPinnedState(header?.column);
         return joinClasses(
-            'sticky top-0 bg-background relative group',
+            'sticky top-0 bg-background dark:bg-sidebar border-b border-border group',
             pinned ? 'z-30' : 'z-10',
             isSpacer(header.column) && 'p-0',
             resolveClassValue(meta.class, header?.getContext?.()),

src/styles/globals.css

@@ -205,8 +205,7 @@
 }
 
 [data-slot='table-header'],
-[data-slot='table-header'] [data-slot='table-row'],
+[data-slot='table-header'] [data-slot='table-row'] {
-[data-slot='table-head'] {
     background-color: transparent;
 }
 

src/views/Favorites/FavoritesAvatar.vue

@@ -150,7 +150,9 @@
                                                         </DropdownMenuSubContent>
                                                     </DropdownMenuPortal>
                                                 </DropdownMenuSub>
-                                                <DropdownMenuItem variant="destructive" @click="handleRemoteClear(group)">
+                                                <DropdownMenuItem
+                                                    variant="destructive"
+                                                    @click="handleRemoteClear(group)">
                                                     <span>{{ t('view.favorite.clear') }}</span>
                                                 </DropdownMenuItem>
                                             </DropdownMenuContent>
@@ -231,7 +233,9 @@
                                                     <DropdownMenuItem @click="handleCheckInvalidAvatars(group)">
                                                         <span>{{ t('view.favorite.avatars.check_invalid') }}</span>
                                                     </DropdownMenuItem>
-                                                    <DropdownMenuItem variant="destructive" @click="handleLocalDelete(group)">
+                                                    <DropdownMenuItem
+                                                        variant="destructive"
+                                                        @click="handleLocalDelete(group)">
                                                         <span>{{ t('view.favorite.delete_tooltip') }}</span>
                                                     </DropdownMenuItem>
                                                 </DropdownMenuContent>
@@ -433,10 +437,7 @@
                             </div>
                         </template>
                         <template v-else-if="activeLocalGroupName">
-                            <ScrollArea
+                            <ScrollArea class="favorites-content__scroll">
-                                ref="localAvatarScrollbarRef"
-                                class="favorites-content__scroll"
-                                @scroll="handleLocalAvatarScroll">
                                 <template v-if="currentLocalFavorites.length">
                                     <div
                                         class="favorites-card-list"
@@ -539,10 +540,6 @@
         displayName: `Group ${index + 1}`
     }));
 
-    const LOCAL_AVATAR_PAGE_SIZE = 20;
-    const LOCAL_AVATAR_SCROLL_THRESHOLD = 120;
-    const LOCAL_AVATAR_VIEWPORT_BUFFER = 32;
-
     const avatarGroupVisibilityOptions = ref(['public', 'friends', 'private']);
     const historyGroupKey = 'local-history';
     const avatarSplitterSize = ref(260);
@@ -640,12 +637,9 @@
     const isCreatingLocalGroup = ref(false);
     const newLocalGroupName = ref('');
     const newLocalGroupInput = ref(null);
-    const sliceLocalAvatarFavoritesLoadMoreNumber = ref(60);
     const refreshingLocalFavorites = ref(false);
     const worker = ref(null);
     const refreshCancelToken = ref(null);
-    const localAvatarScrollbarRef = ref(null);
-    const localAvatarLoadingMore = ref(false);
     const avatarGroupPlaceholders = AVATAR_GROUP_PLACEHOLDERS;
     const hasUserSelectedAvatarGroup = ref(false);
     const remoteAvatarGroupsResolved = ref(false);
@@ -805,16 +799,6 @@
         return grouped;
     });
 
-    const sliceLocalAvatarFavorites = computed(() => {
-        return (group) => {
-            const favorites = localAvatarFavorites.value[group];
-            if (!favorites) {
-                return [];
-            }
-            return favorites.slice(0, sliceLocalAvatarFavoritesLoadMoreNumber.value);
-        };
-    });
-
     const activeRemoteGroup = computed(() => {
         if (!isRemoteGroupSelected.value) {
             return null;
@@ -848,7 +832,7 @@
         if (!activeLocalGroupName.value) {
             return [];
         }
-        return sliceLocalAvatarFavorites.value(activeLocalGroupName.value);
+        return localAvatarFavorites.value[activeLocalGroupName.value] || [];
     });
 
     const isAllAvatarsSelected = computed(() => {
@@ -886,11 +870,6 @@
         if (active && avatarEditMode.value) {
             avatarEditMode.value = false;
         }
-        if (!active) {
-            nextTick(() => {
-                maybeFillLocalAvatarViewport();
-            });
-        }
     });
 
     watch(
@@ -902,30 +881,6 @@
         }
     );
 
-    watch(
-        () => ({
-            group: activeLocalGroupName.value,
-            visible: currentLocalFavorites.value.length,
-            total: activeLocalGroupCount.value,
-            slice: sliceLocalAvatarFavoritesLoadMoreNumber.value,
-            isLocal: isLocalGroupSelected.value
-        }),
-        () => {
-            nextTick(() => {
-                maybeFillLocalAvatarViewport();
-            });
-        }
-    );
-
-    onMounted(() => {
-        if (typeof window !== 'undefined') {
-            window.addEventListener('resize', maybeFillLocalAvatarViewport);
-        }
-        nextTick(() => {
-            maybeFillLocalAvatarViewport();
-        });
-    });
-
     function handleGroupMenuVisible(key, visible) {
         if (visible) {
             activeGroupMenu.value = key;
@@ -999,18 +954,7 @@
         if (options.userInitiated) {
             hasUserSelectedAvatarGroup.value = true;
         }
-        resetLoadMoreCounters();
         clearSelectedAvatars();
-        if (type === 'local') {
-            nextTick(() => {
-                maybeFillLocalAvatarViewport();
-            });
-        }
-    }
-
-    function resetLoadMoreCounters() {
-        sliceLocalAvatarFavoritesLoadMoreNumber.value = 60;
-        localAvatarLoadingMore.value = false;
     }
 
     function isGroupActive(type, key) {
@@ -1056,59 +1000,6 @@
         });
     }
 
-    function handleLocalAvatarScroll() {
-        if (!isLocalGroupSelected.value || isSearchActive.value) {
-            return;
-        }
-        const wrap = localAvatarScrollbarRef.value?.viewportEl?.value;
-        if (!wrap) {
-            return;
-        }
-        const { scrollTop, clientHeight, scrollHeight } = wrap;
-        if (scrollTop + clientHeight >= scrollHeight - LOCAL_AVATAR_SCROLL_THRESHOLD) {
-            if (loadMoreLocalAvatarFavorites()) {
-                nextTick(() => {
-                    maybeFillLocalAvatarViewport();
-                });
-            }
-        }
-    }
-
-    function loadMoreLocalAvatarFavorites() {
-        if (localAvatarLoadingMore.value) {
-            return false;
-        }
-        if (sliceLocalAvatarFavoritesLoadMoreNumber.value >= activeLocalGroupCount.value) {
-            return false;
-        }
-        localAvatarLoadingMore.value = true;
-        sliceLocalAvatarFavoritesLoadMoreNumber.value += LOCAL_AVATAR_PAGE_SIZE;
-        nextTick(() => {
-            localAvatarLoadingMore.value = false;
-        });
-        return true;
-    }
-
-    function maybeFillLocalAvatarViewport() {
-        nextTick(() => {
-            if (!isLocalGroupSelected.value || isSearchActive.value) {
-                return;
-            }
-            const wrap = localAvatarScrollbarRef.value?.viewportEl?.value;
-            if (!wrap) {
-                return;
-            }
-            if (wrap.scrollHeight > wrap.clientHeight + LOCAL_AVATAR_VIEWPORT_BUFFER) {
-                return;
-            }
-            if (loadMoreLocalAvatarFavorites()) {
-                nextTick(() => {
-                    maybeFillLocalAvatarViewport();
-                });
-            }
-        });
-    }
-
     function toggleAvatarSelection(id, value) {
         if (value) {
             if (!selectedFavoriteAvatars.value.includes(id)) {
@@ -1119,58 +1010,6 @@
         }
     }
 
-    function clearSelectedAvatars() {
-        selectedFavoriteAvatars.value = [];
-    }
-
-    function toggleSelectAllAvatars() {
-        if (!activeRemoteGroup.value) {
-            return;
-        }
-        if (isAllAvatarsSelected.value) {
-            selectedFavoriteAvatars.value = [];
-        } else {
-            selectedFavoriteAvatars.value = currentRemoteFavorites.value.map((fav) => fav.id);
-        }
-    }
-
-    function copySelectedAvatars() {
-        if (!selectedFavoriteAvatars.value.length) {
-            return;
-        }
-        const idList = selectedFavoriteAvatars.value.map((id) => `${id}\n`).join('');
-        avatarImportDialogInput.value = idList;
-        showAvatarImportDialog();
-    }
-
-    async function showAvatarBulkUnfavoriteSelectionConfirm() {
-        if (!selectedFavoriteAvatars.value.length) {
-            return;
-        }
-        const total = selectedFavoriteAvatars.value.length;
-
-        const result = await modalStore.confirm({
-            description: `Are you sure you want to unfavorite ${total} favorites?\nThis action cannot be undone.`,
-            title: `Trash2 ${total} favorites?`
-        });
-
-        if (!result.ok) {
-            return;
-        }
-
-        bulkUnfavoriteSelectedAvatars([...selectedFavoriteAvatars.value]);
-    }
-
-    function bulkUnfavoriteSelectedAvatars(ids) {
-        ids.forEach((id) => {
-            favoriteRequest.deleteFavorite({
-                objectId: id
-            });
-        });
-        selectedFavoriteAvatars.value = [];
-        avatarEditMode.value = false;
-    }
-
     function showAvatarExportDialog() {
         avatarExportDialogVisible.value = true;
     }
@@ -1525,9 +1364,6 @@
 
     onBeforeUnmount(() => {
         cancelLocalAvatarRefresh();
-        if (typeof window !== 'undefined') {
-            window.removeEventListener('resize', maybeFillLocalAvatarViewport);
-        }
         if (avatarSplitterObserver) {
             avatarSplitterObserver.disconnect();
             avatarSplitterObserver = null;

src/views/Favorites/FavoritesWorld.vue

@@ -138,7 +138,10 @@
                                                         <span>{{ t('view.favorite.visibility_tooltip') }}</span>
                                                     </DropdownMenuSubTrigger>
                                                     <DropdownMenuPortal>
-                                                        <DropdownMenuSubContent side="right" align="start" class="w-[200px]">
+                                                        <DropdownMenuSubContent
+                                                            side="right"
+                                                            align="start"
+                                                            class="w-[200px]">
                                                             <DropdownMenuCheckboxItem
                                                                 v-for="visibility in worldGroupVisibilityOptions"
                                                                 :key="visibility"
@@ -150,7 +153,9 @@
                                                         </DropdownMenuSubContent>
                                                     </DropdownMenuPortal>
                                                 </DropdownMenuSub>
-                                                <DropdownMenuItem variant="destructive" @click="handleRemoteClear(group)">
+                                                <DropdownMenuItem
+                                                    variant="destructive"
+                                                    @click="handleRemoteClear(group)">
                                                     <span>{{ t('view.favorite.clear') }}</span>
                                                 </DropdownMenuItem>
                                             </DropdownMenuContent>
@@ -227,7 +232,9 @@
                                                         <DropdownMenuItem @click="handleLocalRename(group)">
                                                             <span>{{ t('view.favorite.rename_tooltip') }}</span>
                                                         </DropdownMenuItem>
-                                                        <DropdownMenuItem variant="destructive" @click="handleLocalDelete(group)">
+                                                        <DropdownMenuItem
+                                                            variant="destructive"
+                                                            @click="handleLocalDelete(group)">
                                                             <span>{{ t('view.favorite.delete_tooltip') }}</span>
                                                         </DropdownMenuItem>
                                                     </DropdownMenuContent>
@@ -374,9 +381,7 @@
                             </div>
                             <ScrollArea
                                 v-else-if="activeLocalGroupName && isLocalGroupSelected"
-                                ref="localFavoritesScrollbarRef"
+                                class="favorites-content__scroll">
-                                class="favorites-content__scroll"
-                                @scroll="handleLocalFavoritesScroll">
                                 <template v-if="currentLocalFavorites.length">
                                     <div
                                         class="favorites-card-list"
@@ -454,10 +459,6 @@
         displayName: `Group ${index + 1}`
     }));
 
-    const LOCAL_FAVORITES_PAGE_SIZE = 20;
-    const LOCAL_FAVORITES_SCROLL_THRESHOLD = 120;
-    const LOCAL_FAVORITES_VIEWPORT_BUFFER = 32;
-
     const { t } = useI18n();
     const { sortFavorites } = storeToRefs(useAppearanceSettingsStore());
     const { setSortFavorites } = useAppearanceSettingsStore();
@@ -550,15 +551,12 @@
     const worldGroupPlaceholders = WORLD_GROUP_PLACEHOLDERS;
     const hasUserSelectedWorldGroup = ref(false);
     const remoteGroupsResolved = ref(false);
-    const sliceLocalWorldFavoritesLoadMoreNumber = ref(60);
     const refreshingLocalFavorites = ref(false);
     const worker = ref(null);
     const refreshCancelToken = ref(null);
     const worldEditMode = ref(false);
     const activeGroupMenu = ref(null);
-    const localFavoritesScrollbarRef = ref(null);
     const worldToolbarMenuOpen = ref(false);
-    const localFavoritesLoadingMore = ref(false);
     const hasWorldSelection = computed(() => selectedFavoriteWorlds.value.length > 0);
     const hasSearchInput = computed(() => worldFavoriteSearch.value.trim().length > 0);
     const isSearchActive = computed(() => worldFavoriteSearch.value.trim().length >= 3);
@@ -723,16 +721,6 @@
         return entries;
     });
 
-    const sliceLocalWorldFavorites = computed(() => {
-        return (group) => {
-            const favorites = localWorldFavorites.value[group];
-            if (!favorites) {
-                return [];
-            }
-            return favorites.slice(0, sliceLocalWorldFavoritesLoadMoreNumber.value);
-        };
-    });
-
     const activeRemoteGroup = computed(() => {
         if (!isRemoteGroupSelected.value) {
             return null;
@@ -766,7 +754,7 @@
         if (!activeLocalGroupName.value) {
             return [];
         }
-        return sliceLocalWorldFavorites.value(activeLocalGroupName.value);
+        return localWorldFavorites.value[activeLocalGroupName.value] || [];
     });
 
     function handleSortFavoritesChange(value) {
@@ -807,11 +795,6 @@
         if (active && worldEditMode.value) {
             worldEditMode.value = false;
         }
-        if (!active) {
-            nextTick(() => {
-                maybeFillLocalFavoritesViewport();
-            });
-        }
     });
 
     watch(
@@ -823,29 +806,7 @@
         }
     );
 
-    watch(
+    onMounted(() => {});
-        () => ({
-            group: activeLocalGroupName.value,
-            visible: currentLocalFavorites.value.length,
-            total: activeLocalGroupCount.value,
-            slice: sliceLocalWorldFavoritesLoadMoreNumber.value,
-            isLocal: isLocalGroupSelected.value
-        }),
-        () => {
-            nextTick(() => {
-                maybeFillLocalFavoritesViewport();
-            });
-        }
-    );
-
-    onMounted(() => {
-        if (typeof window !== 'undefined') {
-            window.addEventListener('resize', maybeFillLocalFavoritesViewport);
-        }
-        nextTick(() => {
-            maybeFillLocalFavoritesViewport();
-        });
-    });
 
     function handleGroupMenuVisible(key, visible) {
         if (visible) {
@@ -916,18 +877,7 @@
         if (options.userInitiated) {
             hasUserSelectedWorldGroup.value = true;
         }
-        resetLocalFavoritesLoadMoreCounter();
         clearSelectedWorlds();
-        if (type === 'local') {
-            nextTick(() => {
-                maybeFillLocalFavoritesViewport();
-            });
-        }
-    }
-
-    function resetLocalFavoritesLoadMoreCounter() {
-        sliceLocalWorldFavoritesLoadMoreNumber.value = 60;
-        localFavoritesLoadingMore.value = false;
     }
 
     function isGroupActive(type, key) {
@@ -970,24 +920,6 @@
         });
     }
 
-    function handleLocalFavoritesScroll() {
-        if (!isLocalGroupSelected.value || isSearchActive.value) {
-            return;
-        }
-        const wrap = localFavoritesScrollbarRef.value?.viewportEl?.value;
-        if (!wrap) {
-            return;
-        }
-        const { scrollTop, clientHeight, scrollHeight } = wrap;
-        if (scrollTop + clientHeight >= scrollHeight - LOCAL_FAVORITES_SCROLL_THRESHOLD) {
-            if (loadMoreLocalWorldFavorites()) {
-                nextTick(() => {
-                    maybeFillLocalFavoritesViewport();
-                });
-            }
-        }
-    }
-
     function toggleWorldSelection(id, value) {
         if (value) {
             if (!selectedFavoriteWorlds.value.includes(id)) {
@@ -1047,41 +979,6 @@
         worldEditMode.value = false;
     }
 
-    function loadMoreLocalWorldFavorites() {
-        if (localFavoritesLoadingMore.value) {
-            return false;
-        }
-        if (sliceLocalWorldFavoritesLoadMoreNumber.value >= activeLocalGroupCount.value) {
-            return false;
-        }
-        localFavoritesLoadingMore.value = true;
-        sliceLocalWorldFavoritesLoadMoreNumber.value += LOCAL_FAVORITES_PAGE_SIZE;
-        nextTick(() => {
-            localFavoritesLoadingMore.value = false;
-        });
-        return true;
-    }
-
-    function maybeFillLocalFavoritesViewport() {
-        nextTick(() => {
-            if (!isLocalGroupSelected.value || isSearchActive.value) {
-                return;
-            }
-            const wrap = localFavoritesScrollbarRef.value?.viewportEl?.value;
-            if (!wrap) {
-                return;
-            }
-            if (wrap.scrollHeight > wrap.clientHeight + LOCAL_FAVORITES_VIEWPORT_BUFFER) {
-                return;
-            }
-            if (loadMoreLocalWorldFavorites()) {
-                nextTick(() => {
-                    maybeFillLocalFavoritesViewport();
-                });
-            }
-        });
-    }
-
     function showExportDialog() {
         worldExportDialogVisible.value = true;
     }
@@ -1306,9 +1203,6 @@
 
     onBeforeUnmount(() => {
         cancelLocalWorldRefresh();
-        if (typeof window !== 'undefined') {
-            window.removeEventListener('resize', maybeFillLocalFavoritesViewport);
-        }
         if (worldSplitterObserver) {
             worldSplitterObserver.disconnect();
             worldSplitterObserver = null;

src/views/Favorites/components/FavoritesAvatarItem.vue

@@ -55,7 +55,7 @@
                                 <Button
                                     size="icon-sm"
                                     variant="outline"
-                                    class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
+                                    class="rounded-full text-xs h-6 w-6"
                                     @click.stop="handlePrimaryDeleteAction">
                                     <Trash2 class="h-4 w-4" />
                                 </Button>
@@ -69,9 +69,9 @@
                             <TooltipWrapper side="top" :content="t('view.favorite.select_avatar_tooltip')">
                                 <Button
                                     size="icon-sm"
-                                    variant="outline"
+                                    variant="ghost"
                                     :disabled="currentUser.currentAvatar === favorite.id"
-                                    class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
+                                    class="rounded-full text-xs h-6 w-6"
                                     @click.stop="selectAvatarWithConfirmation(favorite.id)"
                                     ><Check class="h-4 w-4"
                                 /></Button>
@@ -85,7 +85,7 @@
                                 <Button
                                     size="icon-sm"
                                     variant="destructive"
-                                    class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
+                                    class="rounded-full text-xs h-6 w-6"
                                     @click.stop="handlePrimaryDeleteAction"
                                     ><Trash2 class="h-4 w-4"
                                 /></Button>
@@ -93,8 +93,8 @@
                             <TooltipWrapper v-else side="bottom" :content="t('view.favorite.edit_favorite_tooltip')">
                                 <Button
                                     size="icon-sm"
-                                    variant="outline"
+                                    variant="ghost"
-                                    class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
+                                    class="rounded-full text-xs h-6 w-6"
                                     @click.stop="showFavoriteDialog('avatar', favorite.id)"
                                     ><Star class="h-4 w-4"
                                 /></Button>
@@ -116,7 +116,7 @@
                     <Button
                         class="rounded-full text-xs h-6 w-6"
                         size="icon-sm"
-                        variant="outline"
+                        variant="ghost"
                         @click.stop="handlePrimaryDeleteAction">
                         <Trash2 class="h-4 w-4" />
                     </Button>

src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue

@@ -17,9 +17,9 @@
                     <TooltipWrapper side="top" :content="t('view.favorite.select_avatar_tooltip')">
                         <Button
                             size="icon-sm"
-                            variant="outline"
+                            variant="ghost"
                             :disabled="currentUser.currentAvatar === favorite.id"
-                            class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
+                            class="rounded-full text-xs h-6 w-6"
                             @click.stop="selectAvatarWithConfirmation(favorite.id)">
                             <Check class="h-4 w-4" />
                             ></Button
@@ -31,15 +31,16 @@
                         <Button
                             v-if="favoriteExists"
                             size="icon-sm"
-                            variant="outline"
+                            variant="ghost"
-                            class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
+                            class="rounded-full text-xs h-6 w-6"
                             @click.stop="showFavoriteDialog('avatar', favorite.id)">
                             <Star class="h-4 w-4" />
                         </Button>
                         <Button
                             v-else
                             size="icon-sm"
-                            class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
+                            variant="ghost"
+                            class="rounded-full text-xs h-6 w-6"
                             @click.stop="showFavoriteDialog('avatar', favorite.id)">
                             <Star class="h-4 w-4" />
                         </Button>

src/views/Favorites/components/FavoritesFriendItem.vue

@@ -36,8 +36,8 @@
                             <TooltipWrapper side="left" :content="t('view.favorite.unfavorite_tooltip')">
                                 <Button
                                     size="icon-sm"
-                                    variant="outline"
+                                    variant="ghost"
-                                    class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
+                                    class="rounded-full text-xs h-6 w-6"
                                     @click.stop="handleDeleteFavorite">
                                     <Trash2 class="h-4 w-4" />
                                 </Button>
@@ -50,8 +50,8 @@
                         <TooltipWrapper side="right" :content="t('view.favorite.edit_favorite_tooltip')">
                             <Button
                                 size="icon-sm"
-                                variant="outline"
+                                variant="ghost"
-                                class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
+                                class="rounded-full text-xs h-6 w-6"
                                 @click.stop="showFavoriteDialog('friend', favorite.id)"
                                 ><Star class="h-4 w-4"
                             /></Button>

src/views/Favorites/components/FavoritesWorldItem.vue

@@ -52,8 +52,8 @@
                         <div class="favorites-search-card__action">
                             <Button
                                 size="icon-sm"
-                                variant="outline"
+                                variant="ghost"
-                                class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
+                                class="rounded-full text-xs h-6 w-6"
                                 @click.stop="handleDeleteFavorite">
                                 <Trash2 class="h-4 w-4" />
                             </Button>
@@ -66,8 +66,8 @@
                             <TooltipWrapper side="top" :content="inviteOrLaunchText">
                                 <Button
                                     size="icon-sm"
-                                    variant="outline"
+                                    variant="ghost"
-                                    class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
+                                    class="rounded-full text-xs h-6 w-6"
                                     @click.stop="newInstanceSelfInvite(favorite.id)"
                                     ><Mail class="h-4 w-4"
                                 /></Button>
@@ -81,7 +81,7 @@
                                 <Button
                                     size="icon-sm"
                                     variant="destructive"
-                                    class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
+                                    class="rounded-full text-xs h-6 w-6"
                                     @click.stop="handleDeleteFavorite"
                                     ><Trash2 class="h-4 w-4"
                                 /></Button>
@@ -89,8 +89,8 @@
                             <TooltipWrapper v-else side="top" :content="t('view.favorite.edit_favorite_tooltip')">
                                 <Button
                                     size="icon-sm"
-                                    variant="outline"
+                                    variant="ghost"
-                                    class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
+                                    class="rounded-full text-xs h-6 w-6"
                                     @click.stop="showFavoriteDialog('world', favorite.id)"
                                     ><Star class="h-4 w-4"
                                 /></Button>
@@ -116,7 +116,7 @@
                     <Button
                         class="rounded-full text-xs h-6 w-6"
                         size="icon-sm"
-                        variant="outline"
+                        variant="ghost"
                         @click.stop="handleDeleteFavorite">
                         <Trash2 class="h-4 w-4" />
                     </Button>

src/views/Favorites/components/FavoritesWorldLocalItem.vue

@@ -35,7 +35,7 @@
                             <Button
                                 size="icon-sm"
                                 :variant="shiftHeld ? 'destructive' : 'outline'"
-                                class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
+                                class="rounded-full text-xs h-6 w-6"
                                 @click.stop="handlePrimaryDeleteAction">
                                 <Trash2 class="h-4 w-4" />
                             </Button>
@@ -48,8 +48,8 @@
                             <TooltipWrapper side="top" :content="inviteOrLaunchText">
                                 <Button
                                     size="icon-sm"
-                                    variant="outline"
+                                    variant="ghost"
-                                    class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
+                                    class="rounded-full text-xs h-6 w-6"
                                     @click.stop="newInstanceSelfInvite(favorite.id)"
                                     ><Mail class="h-4 w-4"
                                 /></Button>
@@ -63,7 +63,7 @@
                                 <Button
                                     size="icon-sm"
                                     variant="destructive"
-                                    class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
+                                    class="rounded-full text-xs h-6 w-6"
                                     @click.stop="handleDeleteFavorite"
                                     ><Trash2 class="h-4 w-4"
                                 /></Button>
@@ -71,8 +71,8 @@
                             <TooltipWrapper v-else side="top" :content="t('view.favorite.edit_favorite_tooltip')">
                                 <Button
                                     size="icon-sm"
-                                    variant="outline"
+                                    variant="ghost"
-                                    class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
+                                    class="rounded-full text-xs h-6 w-6"
                                     @click.stop="showFavoriteDialog('world', favorite.id)"
                                     ><Star class="h-4 w-4"
                                 /></Button>

src/views/Feed/Feed.vue

@@ -11,7 +11,9 @@
                 <div style="margin: 0 0 10px; display: flex; align-items: center">
                     <div style="flex: none; margin-right: 10px; display: flex; align-items: center">
                         <TooltipWrapper side="bottom" :content="t('view.feed.favorites_only_tooltip')">
-                            <Switch v-model="feedTable.vip" @update:modelValue="feedTableLookup" />
+                            <span class="inline-flex">
+                                <Switch v-model="feedTable.vip" @update:modelValue="feedTableLookup" />
+                            </span>
                         </TooltipWrapper>
                     </div>
                     <Select

src/views/FriendList/FriendList.vue

@@ -15,9 +15,11 @@
                     <div class="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')">
-                                <Switch
+                                <span class="inline-flex">
-                                    v-model="friendsListSearchFilterVIP"
+                                    <Switch
-                                    @update:modelValue="friendsListSearchChange" />
+                                        v-model="friendsListSearchFilterVIP"
+                                        @update:modelValue="friendsListSearchChange" />
+                                </span>
                             </TooltipWrapper>
                             <Select
                                 multiple

src/views/FriendsLocations/FriendsLocations.vue

@@ -484,36 +484,8 @@
         scrollViewportRef.value = rootEl.querySelector('[data-slot="scroll-area-viewport"]');
     }
 
-    const maxColumns = computed(() => {
-        const styleFn = gridStyle.value;
-        if (typeof styleFn !== 'function') {
-            return 1;
-        }
-
-        const containerWidth = Math.max(gridWidth.value ?? 0, 0);
-
-        const baseWidth = 220;
-        const baseGap = 14;
-        const scale = cardScale.value;
-        const spacing = cardSpacing.value;
-        const minWidth = baseWidth * scale;
-        const gap = Math.max(6, (baseGap + (scale - 1) * 10) * spacing);
-
-        return Math.max(1, Math.floor((containerWidth + gap) / (minWidth + gap)) || 1);
-    });
-
-    const chunk = (items = [], size = 1) => {
-        const out = [];
-        const n = Math.max(1, Math.floor(size) || 1);
-        for (let i = 0; i < items.length; i += n) {
-            out.push(items.slice(i, i + n));
-        }
-        return out;
-    };
-
     const virtualRows = computed(() => {
         const rows = [];
-        const columns = maxColumns.value;
 
         if (isSameInstanceView.value) {
             for (const group of sameInstanceGroupsForVirtual.value) {
@@ -525,13 +497,11 @@
                 });
 
                 const friends = Array.isArray(group.friends) ? group.friends : [];
-                for (const rowFriends of chunk(friends, Math.min(columns, friends.length || 1))) {
+                if (friends.length) {
                     rows.push({
                         type: 'cards',
-                        key: `g:${group.instanceId}:${rowFriends
+                        key: `g:${group.instanceId}`,
-                            .map((f) => f?.id ?? f?.userId ?? f?.displayName ?? '')
+                        items: friends.map((friend) => ({
-                            .join('|')}`,
-                        items: rowFriends.map((friend) => ({
                             key: `f:${friend?.id ?? friend?.userId ?? friend?.displayName ?? Math.random()}`,
                             friend,
                             displayInstanceInfo: true
@@ -553,13 +523,11 @@
                 });
 
                 const friends = Array.isArray(group.friends) ? group.friends : [];
-                for (const rowFriends of chunk(friends, Math.min(columns, friends.length || 1))) {
+                if (friends.length) {
                     rows.push({
                         type: 'cards',
-                        key: `mg:${group.instanceId}:${rowFriends
+                        key: `mg:${group.instanceId}`,
-                            .map((f) => f?.id ?? f?.userId ?? f?.displayName ?? '')
+                        items: friends.map((friend) => ({
-                            .join('|')}`,
-                        items: rowFriends.map((friend) => ({
                             key: `f:${friend?.id ?? friend?.userId ?? friend?.displayName ?? Math.random()}`,
                             friend,
                             displayInstanceInfo: false
@@ -573,11 +541,11 @@
             }
 
             const online = mergedOnlineEntries.value;
-            for (const rowEntries of chunk(online, Math.min(columns, online.length || 1))) {
+            if (online.length) {
                 rows.push({
                     type: 'cards',
-                    key: `o:${rowEntries.map((e) => e?.id ?? '').join('|')}`,
+                    key: 'o:merged',
-                    items: rowEntries.map((entry) => ({
+                    items: online.map((entry) => ({
                         key: `e:${entry?.id ?? entry?.friend?.id ?? entry?.friend?.displayName ?? Math.random()}`,
                         friend: entry.friend,
                         displayInstanceInfo: true
@@ -589,11 +557,11 @@
         }
 
         const entries = filteredFriends.value;
-        for (const rowEntries of chunk(entries, Math.min(columns, entries.length || 1))) {
+        if (entries.length) {
             rows.push({
                 type: 'cards',
-                key: `r:${rowEntries.map((e) => e?.id ?? '').join('|')}`,
+                key: 'r:all',
-                items: rowEntries.map((entry) => ({
+                items: entries.map((entry) => ({
                     key: `e:${entry?.id ?? entry?.friend?.id ?? entry?.friend?.displayName ?? Math.random()}`,
                     friend: entry.friend,
                     displayInstanceInfo: true

src/views/GameLog/GameLog.vue

@@ -11,7 +11,9 @@
                 <div style="margin: 0 0 10px; display: flex; align-items: center">
                     <div style="flex: none; margin-right: 10px; display: flex; align-items: center">
                         <TooltipWrapper side="bottom" :content="t('view.feed.favorites_only_tooltip')">
-                            <Switch v-model="gameLogTable.vip" @update:modelValue="gameLogTableLookup" />
+                            <span class="inline-flex">
+                                <Switch v-model="gameLogTable.vip" @update:modelValue="gameLogTableLookup" />
+                            </span>
                         </TooltipWrapper>
                     </div>
                     <Select

src/views/Notifications/columns.jsx

@@ -183,7 +183,7 @@ export const createColumns = ({
                                                 location={original.location}
                                                 hint={original.worldName}
                                                 grouphint={original.groupName}
-                                                link={false}
+                                                link={true}
                                             />
                                         ) : null}
                                     </TooltipContent>

src/views/Tools/Gallery.vue

@@ -1,7 +1,8 @@
 <template>
     <div class="gallery-page x-container">
-        <div class="gallery-page__header">
+        <div class="flex items-center gap-2 ml-2">
-            <Button variant="ghost" class="gallery-page__back" @click="goBack">
+            <Button variant="ghost" size="sm" class="mr-3" @click="goBack">
+                <ArrowLeft />
                 {{ t('nav_tooltip.tools') }}
             </Button>
             <span class="header">{{ t('dialog.gallery_icons.header') }}</span>
@@ -441,7 +442,7 @@
                         <InputGroupTextareaField
                             v-model="printUploadNote"
                             :rows="1"
-                            maxlength="32"
+                            :maxlength="32"
                             style="margin-left: 10px; width: 300px"
                             :placeholder="t('dialog.gallery_icons.note')"
                             input-class="resize-none min-h-0" />
@@ -459,7 +460,10 @@
                         <div
                             class="h-[200px] w-[200px] rounded-[20px] overflow-hidden cursor-pointer"
                             @click="showFullscreenImageDialog(image.files.image, getPrintFileName(image))">
-                            <img class="h-full w-full rounded-[15px] object-cover" :src="image.files.image" loading="lazy" />
+                            <img
+                                class="h-full w-full rounded-[15px] object-cover"
+                                :src="image.files.image"
+                                loading="lazy" />
                         </div>
                         <div style="margin-top: 5px; width: 208px">
                             <span class="block truncate" v-if="image.note" v-text="image.note"></span>
@@ -468,8 +472,7 @@
                                 class="block truncate"
                                 v-if="image.worldId"
                                 :location="image.worldId"
-                                :hint="image.worldName"
+                                :hint="image.worldName" />
-                                />
                             <span v-else class="block">&nbsp;</span>
                             <DisplayName
                                 class="block truncate gallery-meta"
@@ -525,15 +528,14 @@
                         :key="item.id"
                         style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
                         <div class="h-[200px] w-[200px] rounded-[20px] overflow-hidden cursor-default">
-                            <img class="h-full w-full rounded-[15px] object-cover" :src="item.imageUrl" loading="lazy" />
+                            <img
+                                class="h-full w-full rounded-[15px] object-cover"
+                                :src="item.imageUrl"
+                                loading="lazy" />
                         </div>
                         <div style="margin-top: 5px; width: 208px">
                             <span class="block truncate" v-text="item.name"></span>
-                            <span
+                            <span v-if="item.description" class="block truncate" v-text="item.description"></span>
-                                v-if="item.description"
-                                class="block truncate"
-                                v-text="item.description"
-                                ></span>
                             <span v-else class="block">&nbsp;</span>
                             <span class="block truncate gallery-meta gallery-meta--small">
                                 {{ formatDateFilter(item.created_at, 'long') }}
@@ -561,7 +563,7 @@
 </template>
 
 <script setup>
-    import { Gift, Maximize2, RefreshCw, Trash2, Upload, X } from 'lucide-vue-next';
+    import { ArrowLeft, Gift, Maximize2, RefreshCw, Trash2, Upload, X } from 'lucide-vue-next';
     import {
         NumberField,
         NumberFieldContent,
@@ -603,12 +605,6 @@
     const {
         galleryTable,
         galleryDialogVisible,
-        galleryDialogGalleryLoading,
-        galleryDialogIconsLoading,
-        galleryDialogEmojisLoading,
-        galleryDialogStickersLoading,
-        galleryDialogPrintsLoading,
-        galleryDialogInventoryLoading,
         VRCPlusIconsTable,
         printUploadNote,
         printCropBorder,
@@ -1183,13 +1179,6 @@
 </script>
 
 <style scoped>
-    .gallery-page__header {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        margin-bottom: 12px;
-    }
-
     .gallery-tab-count {
         font-size: 12px;
         margin-left: 5px;

src/views/Tools/ScreenshotMetadata.vue

@@ -1,7 +1,8 @@
 <template>
     <div class="screenshot-metadata-page x-container">
-        <div class="screenshot-metadata-page__header">
+        <div class="flex items-center gap-2 ml-2">
-            <Button variant="ghost" class="screenshot-metadata-page__back" @click="goBack">
+            <Button variant="ghost" size="sm" class="mr-3" @click="goBack">
+                <ArrowLeft />
                 {{ t('nav_tooltip.tools') }}
             </Button>
             <span class="header">{{ t('dialog.screenshot_metadata.header') }}</span>
@@ -151,6 +152,7 @@
     import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/components/ui/carousel';
     import { onBeforeUnmount, onMounted, reactive, ref } from 'vue';
     import { useGalleryStore, useUserStore, useVrcxStore } from '@/stores';
+    import { ArrowLeft } from 'lucide-vue-next';
     import { Badge } from '@/components/ui/badge';
     import { Button } from '@/components/ui/button';
     import { InputGroupSearch } from '@/components/ui/input-group';
@@ -533,12 +535,3 @@
         }
     }
 </script>
-
-<style scoped>
-    .screenshot-metadata-page__header {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        margin-bottom: 12px;
-    }
-</style>

src/views/Tools/components/GroupCalendarEventCard.vue

@@ -19,7 +19,7 @@
                     <PopoverContent
                         side="right"
                         align="start"
-                        class="w-[500px] p-3"
+                        class="w-125 p-3"
                         @mouseenter="openEventPopover"
                         @mouseleave="scheduleCloseEventPopover">
                         <div class="flex items-baseline justify-between gap-3 text-xs">
@@ -312,6 +312,7 @@
         gap: 4px;
         border-radius: 50%;
         cursor: pointer;
+        background-color: var(--color-accent);
     }
 
     .event-card .badges .share-badge {
@@ -324,6 +325,7 @@
         border-radius: 50%;
         cursor: pointer;
         margin-right: 5px;
+        background-color: var(--color-accent);
     }
 
     .event-card .event-content {
@@ -366,9 +368,6 @@
         margin-bottom: 2px;
     }
 
-    .event-card .event-title-content:hover {
-    }
-
     .event-card .event-info {
         display: flex;
         justify-content: space-between;

src/views/Tools/components/GroupCalendarMonth.vue

@@ -139,7 +139,7 @@
                                             {{ dayLabel(weekDate) }}
                                             <div
                                                 v-if="eventCountFor(weekDate) > 0"
-                                                class="calendar-event-badge"
+                                                class="calendar-event-badge text-zinc-900"
                                                 :class="hasFollowingFor(weekDate) ? 'has-following' : 'no-following'">
                                                 {{ eventCountFor(weekDate) }}
                                             </div>
@@ -165,6 +165,7 @@
         width: 100%;
         display: flex;
         align-items: flex-start;
+        padding: 0 12x 0 12px;
     }
 
     .date {
@@ -186,9 +187,6 @@
         position: relative;
     }
 
-    .calendar-date-content.has-events {
-    }
-
     .calendar-event-badge {
         position: absolute;
         top: -4px;
@@ -203,12 +201,7 @@
         z-index: 10;
         padding: 0 5px;
         line-height: 14px;
-    }
+        background-color: var(--color-accent);
-
-    .calendar-event-badge.has-following {
-    }
-
-    .calendar-event-badge.no-following {
     }
 
     .calendar-event-dot {

src/views/Tools/dialogs/GroupCalendarDialog.vue

@@ -1,9 +1,13 @@
 <template>
     <Dialog :open="visible" @update:open="(open) => (open ? null : closeDialog())">
-        <DialogContent class="x-dialog sm:max-w-[50vw] h-[60vh] overflow-hidden">
+        <DialogContent class="x-dialog sm:max-w-[50vw] h-[70vh] overflow-hidden">
             <DialogHeader>
                 <div class="dialog-title-container">
                     <DialogTitle>{{ t('dialog.group_calendar.header') }}</DialogTitle>
+                </div>
+                <div class="featured-switch">
+                    <span class="featured-switch-text">{{ t('dialog.group_calendar.featured_events') }}</span>
+                    <Switch v-model="showFeaturedEvents" @update:modelValue="toggleFeaturedEvents" class="mr-2" />
                     <Button size="sm" variant="outline" @click="toggleViewMode" class="view-toggle-btn">
                         {{
                             viewMode === 'timeline'
@@ -12,10 +16,6 @@
                         }}
                     </Button>
                 </div>
-                <div class="featured-switch">
-                    <span class="featured-switch-text">{{ t('dialog.group_calendar.featured_events') }}</span>
-                    <Switch v-model="showFeaturedEvents" @update:modelValue="toggleFeaturedEvents" />
-                </div>
             </DialogHeader>
             <div class="top-content">
                 <div v-if="viewMode === 'timeline'" key="timeline" class="timeline-view">
@@ -458,6 +458,7 @@
                     margin-left: 10px;
                     margin-right: 6px;
                     overflow: auto;
+                    height: 50vh;
 
                     .timeline-list {
                         display: flex;
@@ -506,9 +507,7 @@
                             position: relative;
 
                             &.has-events {
-                                background-color: var(
+                                background-color: var(--group-calendar-event-bg,);
-                                    --group-calendar-event-bg,
-                                );
                             }
                             .calendar-event-badge {
                                 position: absolute;
@@ -525,10 +524,6 @@
                                 z-index: 10;
                                 padding: 0 4px;
                                 line-height: 16px;
-                                &.has-following {
-                                }
-                                &.no-following {
-                                }
                             }
                         }
                     }
@@ -551,6 +546,7 @@
     .featured-switch {
         display: flex;
         justify-content: flex-end;
+        align-items: center;
         margin-top: 10px;
         .featured-switch-text {
             font-size: 13px;
@@ -559,24 +555,10 @@
     }
 
     .timeline-view {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
         display: flex;
         align-items: center;
         .timeline-container {
             flex: 1;
-            width: 100%;
-            height: 100%;
-            display: flex;
-            justify-content: center;
-        }
-        .calendar-container {
-            width: 609px;
-            height: 100%;
-            flex-shrink: 0;
         }
     }