Fixes on small frontend bugs (#4719)

* Account list is not scrollable
Fixes #4688

* Selecting Glitch in the log Screen
Fixes #4687 by explicitly defining the buffer

* When sorting or grouping your instance, the option you choose does not get saved
Fixes #4647

* use label prop to specify specific local storage for grid display state

* Implement persistent filters on mods page
Fixes #4517

* fix lint errors

* update schemastore links

---------

Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

apps/app-frontend/src/pages/instance/Logs.vue

@@ -67,6 +67,7 @@
 				direction="vertical"
 				:item-size="20"
 				key-field="id"
+				buffer="200"
 			>
 				<div class="user no-wrap">
 					<span :style="{ color: item.prefixColor, 'font-weight': item.weight }">{{
@@ -508,7 +509,7 @@ onUnmounted(() => {
 	background-color: var(--color-accent-contrast);
 	color: var(--color-contrast);
 	border-radius: var(--radius-lg);
-	padding: 1.5rem;
+	padding-top: 1.5rem;
 	overflow-x: auto; /* Enables horizontal scrolling */
 	overflow-y: hidden; /* Disables vertical scrolling on this wrapper */
 	white-space: nowrap; /* Keeps content on a single line */
@@ -557,9 +558,10 @@ onUnmounted(() => {
 
 .user {
 	height: 32%;
-	padding: 0 12px;
+	padding: 0 1.5rem;
 	display: flex;
 
 	align-items: center;
+	user-select: text;
 }
 </style>

apps/app-frontend/src/pages/instance/Mods.vue

@@ -285,6 +285,7 @@ import type { Organization, Project, TeamMember, Version } from '@modrinth/utils
 import { formatProjectType } from '@modrinth/utils'
 import { getCurrentWebview } from '@tauri-apps/api/webview'
 import { defineMessages, useVIntl } from '@vintl/vintl'
+import { useStorage } from '@vueuse/core'
 import dayjs from 'dayjs'
 import type { ComputedRef } from 'vue'
 import { computed, onUnmounted, ref, watch } from 'vue'
@@ -531,7 +532,13 @@ const filterOptions: ComputedRef<FilterOption[]> = computed(() => {
 	return options
 })
 
-const selectedFilters = ref<string[]>([])
+const selectedFilters = useStorage<string[]>(
+	`${props.instance.name}-mod-selected-filters`,
+	[],
+	sessionStorage,
+	{ mergeDefaults: true },
+)
+
 const filteredProjects = computed(() => {
 	const updatesFilter = selectedFilters.value.includes('updates')
 	const disabledFilter = selectedFilters.value.includes('disabled')