use the same code for page scrolling on both the desktop and mobile versions

src/components/desktop/ColorSelect.vue

@@ -50,7 +50,7 @@ import type { ColorValue, ColorInfo } from '@/core/color.ts';
 
 import { arrayContainsFieldValue } from '@/lib/common.ts';
 import { getColorsInRows, getDisplayColor } from '@/lib/color.ts';
-import { scrollToSelectedItem } from '@/lib/ui/desktop.ts';
+import { scrollToSelectedItem } from '@/lib/ui/common.ts';
 
 import {
     mdiSquareRounded,
@@ -90,7 +90,7 @@ function onMenuStateChanged(state: boolean): void {
     if (state) {
         nextTick(() => {
             if (dropdownMenu.value && dropdownMenu.value.parentElement) {
-                scrollToSelectedItem(dropdownMenu.value.parentElement, null, '.row-has-selected-item');
+                scrollToSelectedItem(dropdownMenu.value.parentElement, null, null, '.row-has-selected-item');
             }
         });
     }

src/components/desktop/IconSelect.vue

@@ -48,7 +48,7 @@ import type { ColorValue } from '@/core/color.ts';
 import type { IconInfo, IconInfoWithId } from '@/core/icon.ts';
 import { arrayContainsFieldValue } from '@/lib/common.ts';
 import { getIconsInRows } from '@/lib/icon.ts';
-import { scrollToSelectedItem } from '@/lib/ui/desktop.ts';
+import { scrollToSelectedItem } from '@/lib/ui/common.ts';
 
 import {
     mdiCheck
@@ -89,7 +89,7 @@ function onMenuStateChanged(state: boolean): void {
     if (state) {
         nextTick(() => {
             if (dropdownMenu.value && dropdownMenu.value.parentElement) {
-                scrollToSelectedItem(dropdownMenu.value.parentElement, null, '.row-has-selected-item');
+                scrollToSelectedItem(dropdownMenu.value.parentElement, null, null, '.row-has-selected-item');
             }
         });
     }

src/components/desktop/ScheduleFrequencySelect.vue

@@ -67,7 +67,7 @@ import { useUserStore } from '@/stores/user.ts';
 import { type WeekDayValue } from '@/core/datetime.ts';
 import { ScheduledTemplateFrequencyType } from '@/core/template.ts';
 import { sortNumbersArray } from '@/lib/common.ts';
-import { scrollToSelectedItem } from '@/lib/ui/desktop.ts';
+import { scrollToSelectedItem } from '@/lib/ui/common.ts';
 
 const props = defineProps<CommonScheduleFrequencySelectionProps>();
 const emit = defineEmits<{
@@ -159,7 +159,7 @@ function onMenuStateChanged(state: boolean): void {
     if (state) {
         nextTick(() => {
             if (dropdownMenu.value && dropdownMenu.value.parentElement) {
-                scrollToSelectedItem(dropdownMenu.value.parentElement, '.schedule-frequency-value-container', '.frequency-value-selected');
+                scrollToSelectedItem(dropdownMenu.value.parentElement, '.schedule-frequency-value-container', '.schedule-frequency-value-container', '.frequency-value-selected');
             }
         });
     }

src/components/desktop/TwoColumnSelect.vue

@@ -102,7 +102,8 @@ import {
     getItemByKeyValue,
     getNameByKeyValue
 } from '@/lib/common.ts';
-import { type ComponentDensity, type InputVariant, setChildInputFocus, scrollToSelectedItem } from '@/lib/ui/desktop.ts';
+import { scrollToSelectedItem } from '@/lib/ui/common.ts';
+import { type ComponentDensity, type InputVariant, setChildInputFocus } from '@/lib/ui/desktop.ts';
 
 import {
     mdiChevronRight,
@@ -246,8 +247,8 @@ function onMenuStateChanged(state: boolean): void {
     if (state) {
         nextTick(() => {
             if (dropdownMenu.value && dropdownMenu.value.parentElement) {
-                scrollToSelectedItem(dropdownMenu.value.parentElement, '.primary-list-container', '.primary-list-item-selected');
-                scrollToSelectedItem(dropdownMenu.value.parentElement, '.secondary-list-container', '.secondary-list-item-selected');
+                scrollToSelectedItem(dropdownMenu.value.parentElement, '.primary-list-container', '.primary-list-container', '.primary-list-item-selected');
+                scrollToSelectedItem(dropdownMenu.value.parentElement, '.secondary-list-container', '.secondary-list-container', '.secondary-list-item-selected');
             }
         });
     }

src/components/mobile/ColorSelectionSheet.vue

@@ -33,7 +33,8 @@ import { ref, computed } from 'vue';
 import type { ColorValue, ColorInfo } from '@/core/color.ts';
 import { arrayContainsFieldValue } from '@/lib/common.ts';
 import { getColorsInRows } from '@/lib/color.ts';
-import { type Framework7Dom, scrollToSelectedItem } from '@/lib/ui/mobile.ts';
+import { scrollToSelectedItem } from '@/lib/ui/common.ts';
+import { type Framework7Dom } from '@/lib/ui/mobile.ts';
 
 const props = defineProps<{
     modelValue: ColorValue;
@@ -63,7 +64,7 @@ function hasSelectedIcon(row: ColorInfo[]): boolean {
 
 function onSheetOpen(event: { $el: Framework7Dom }): void {
     currentValue.value = props.modelValue;
-    scrollToSelectedItem(event.$el, '.page-content', '.row-has-selected-item');
+    scrollToSelectedItem(event.$el[0], '.sheet-modal-inner', '.page-content', '.row-has-selected-item');
 }
 
 function onSheetClosed(): void {

src/components/mobile/IconSelectionSheet.vue

@@ -33,7 +33,8 @@ import { ref, computed } from 'vue';
 import type { IconInfo, IconInfoWithId } from '@/core/icon.ts';
 import { arrayContainsFieldValue } from '@/lib/common.ts';
 import { getIconsInRows } from '@/lib/icon.ts';
-import { type Framework7Dom, scrollToSelectedItem } from '@/lib/ui/mobile.ts';
+import { scrollToSelectedItem } from '@/lib/ui/common.ts';
+import { type Framework7Dom } from '@/lib/ui/mobile.ts';
 
 const props = defineProps<{
     modelValue: string;
@@ -73,7 +74,7 @@ function hasSelectedIcon(row: IconInfoWithId[]): boolean {
 }
 
 function onSheetOpen(event: { $el: Framework7Dom }): void {
-    scrollToSelectedItem(event.$el, '.page-content', '.row-has-selected-item');
+    scrollToSelectedItem(event.$el[0], '.sheet-modal-inner', '.page-content', '.row-has-selected-item');
 }
 
 function onSheetClosed(): void {

src/components/mobile/ListItemSelectionPopup.vue

@@ -56,7 +56,8 @@ import type { Searchbar } from 'framework7/types';
 
 import { useI18n } from '@/locales/helpers.ts';
 
-import { type Framework7Dom, scrollToSelectedItem } from '@/lib/ui/mobile.ts';
+import { scrollToSelectedItem } from '@/lib/ui/common.ts';
+import { type Framework7Dom } from '@/lib/ui/mobile.ts';
 
 const props = defineProps<{
     modelValue: unknown;
@@ -186,7 +187,7 @@ function onItemClicked(item: unknown, index: number): void {
 
 function onPopupOpen(event: { $el: Framework7Dom }): void {
     currentValue.value = props.modelValue;
-    scrollToSelectedItem(event.$el, '.page-content', 'li.list-item-selected', false);
+    scrollToSelectedItem(event.$el[0], '.popup > .page', '.page-content', 'li.list-item-selected');
 }
 
 function onPopupClosed(): void {

src/components/mobile/ListItemSelectionSheet.vue

@@ -36,7 +36,8 @@ import { ref, computed } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
-import { type Framework7Dom, scrollToSelectedItem } from '@/lib/ui/mobile.ts';
+import { scrollToSelectedItem } from '@/lib/ui/common.ts';
+import { type Framework7Dom } from '@/lib/ui/mobile.ts';
 
 const props = defineProps<{
     modelValue: unknown;
@@ -117,7 +118,7 @@ function onItemClicked(item: unknown, index: number): void {
 
 function onSheetOpen(event: { $el: Framework7Dom }): void {
     currentValue.value = props.modelValue;
-    scrollToSelectedItem(event.$el, '.page-content', 'li.list-item-selected');
+    scrollToSelectedItem(event.$el[0], '.sheet-modal-inner', '.page-content', 'li.list-item-selected');
 }
 
 function onSheetClosed(): void {

src/components/mobile/ScheduleFrequencySheet.vue

@@ -76,7 +76,8 @@ import { itemAndIndex } from '@/core/base.ts';
 import { type WeekDayValue } from '@/core/datetime.ts';
 import { ScheduledTemplateFrequencyType } from '@/core/template.ts';
 import { sortNumbersArray } from '@/lib/common.ts';
-import { type Framework7Dom, scrollToSelectedItem } from '@/lib/ui/mobile.ts';
+import { scrollToSelectedItem } from '@/lib/ui/common.ts';
+import { type Framework7Dom } from '@/lib/ui/mobile.ts';
 
 interface MobileScheduleFrequencySelectionProps extends CommonScheduleFrequencySelectionProps {
     show: boolean;
@@ -151,7 +152,7 @@ function close(): void {
 function onSheetOpen(event: { $el: Framework7Dom }): void {
     currentFrequencyType.value = props.type;
     currentFrequencyValue.value = getFrequencyValues(props.modelValue);
-    scrollToSelectedItem(event.$el, '.schedule-frequency-value-container', 'li.list-item-selected');
+    scrollToSelectedItem(event.$el[0], '.schedule-frequency-value-container', '.schedule-frequency-value-container', 'li.list-item-selected');
 }
 
 function onSheetClosed(): void {

src/components/mobile/TransactionTagSelectionSheet.vue

@@ -94,7 +94,8 @@ import { useI18nUIComponents, showLoading, hideLoading } from '@/lib/ui/mobile.t
 import { TransactionTag } from '@/models/transaction_tag.ts';
 import { useTransactionTagsStore } from '@/stores/transactionTag.ts';
 
-import { type Framework7Dom, scrollToSelectedItem, scrollSheetToTop } from '@/lib/ui/mobile.ts';
+import { scrollToSelectedItem } from '@/lib/ui/common.ts';
+import { type Framework7Dom, scrollSheetToTop } from '@/lib/ui/mobile.ts';
 
 const props = defineProps<{
     modelValue: string[];
@@ -229,7 +230,7 @@ function onSearchBarFocus(): void {
 function onSheetOpen(event: { $el: Framework7Dom }): void {
     selectedItemIds.value = Array.from(props.modelValue);
     newTag.value = null;
-    scrollToSelectedItem(event.$el, '.page-content', 'li.list-item-selected');
+    scrollToSelectedItem(event.$el[0], '.sheet-modal-inner', '.page-content', 'li.list-item-selected');
 }
 
 function onSheetClosed(): void {

src/components/mobile/TreeViewSelectionSheet.vue

@@ -19,7 +19,7 @@
             <f7-list class="no-margin-top no-margin-bottom" v-if="!filteredItems || !filteredItems.length">
                 <f7-list-item :title="filterNoItemsText"></f7-list-item>
             </f7-list>
-            <f7-treeview>
+            <f7-treeview class="tree-view-selection-treeview">
                 <f7-treeview-item item-toggle
                                   :opened="isPrimaryItemHasSecondaryValue(item)"
                                   :label="ti((primaryTitleField ? item[primaryTitleField] : item) as string, !!primaryTitleI18n)"
@@ -54,7 +54,8 @@ import type { Sheet, Searchbar } from 'framework7/types';
 import { useI18n } from '@/locales/helpers.ts';
 import { type TwoLevelItemSelectionBaseProps, useTwoLevelItemSelectionBase } from '@/components/base/TwoLevelItemSelectionBase.ts';
 
-import { type Framework7Dom, scrollToSelectedItem, scrollSheetToTop } from '@/lib/ui/mobile.ts';
+import { scrollToSelectedItem } from '@/lib/ui/common.ts';
+import { type Framework7Dom, scrollSheetToTop } from '@/lib/ui/mobile.ts';
 
 interface MobileTwoLevelItemSelectionBaseProps extends TwoLevelItemSelectionBaseProps {
     show: boolean;
@@ -137,7 +138,7 @@ function onSearchBarFocus(): void {
 
 function onSheetOpen(event: { $el: Framework7Dom }): void {
     currentValue.value = props.modelValue;
-    scrollToSelectedItem(event.$el, '.page-content', '.treeview-item .treeview-item-selected');
+    scrollToSelectedItem(event.$el[0], '.sheet-modal-inner', '.page-content', '.treeview-item > .treeview-item-selected');
 }
 
 function onSheetClosed(): void {
@@ -168,4 +169,8 @@ function onSheetClosed(): void {
         height: 320px;
     }
 }
+
+.tree-view-selection-treeview {
+    position: relative;
+}
 </style>

src/components/mobile/TwoColumnListItemSelectionSheet.vue

@@ -75,7 +75,8 @@ import type { Sheet, Searchbar } from 'framework7/types';
 import { useI18n } from '@/locales/helpers.ts';
 import { type CommonTwoColumnListItemSelectionProps, useTwoColumnListItemSelectionBase } from '@/components/base/TwoColumnListItemSelectionBase.ts';
 
-import { type Framework7Dom, scrollToSelectedItem, scrollSheetToTop } from '@/lib/ui/mobile.ts';
+import { scrollToSelectedItem } from '@/lib/ui/common.ts';
+import { type Framework7Dom, scrollSheetToTop } from '@/lib/ui/mobile.ts';
 
 interface MobileTwoColumnListItemSelectionProps extends CommonTwoColumnListItemSelectionProps {
     show: boolean;
@@ -135,8 +136,8 @@ function onSearchBarFocus(): void {
 function onSheetOpen(event: { $el: Framework7Dom }): void {
     currentPrimaryValue.value = getCurrentPrimaryValueBySecondaryValue(props.modelValue);
     currentSecondaryValue.value = props.modelValue;
-    scrollToSelectedItem(event.$el, '.primary-list-container', 'li.primary-list-item-selected');
-    scrollToSelectedItem(event.$el, '.secondary-list-container', 'li.secondary-list-item-selected');
+    scrollToSelectedItem(event.$el[0], '.primary-list-container', '.primary-list-container', 'li.primary-list-item-selected');
+    scrollToSelectedItem(event.$el[0], '.secondary-list-container', '.secondary-list-container', 'li.secondary-list-item-selected');
 }
 
 function onSheetClosed(): void {