fixed scroll issue

diff --git a/frontend/src/lib/SettingsNav.svelte b/frontend/src/lib/SettingsNav.svelte
deleted file mode 100644 (file)
index e44e5cf..0000000
--- a/frontend/src/lib/SettingsNav.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script context="module">
-       // main navigation for the application
-       import Settings from '$lib/Settings.svelte';
-       import Statistics from '$lib/Statistics.svelte';
-       import Admin from '$lib/Admin.svelte';
-
-       // these are our 'pages' to navigate through (in order for this export to work the script tag MUST include context="module")
-       export const navOptions = [
-               { page: 'Settings', component: Settings },
-               { page: 'Statistics', component: Statistics },
-               { page: 'Admin', component: Admin }
-       ];
-</script>

diff --git a/frontend/src/lib/settings/Statistics.svelte b/frontend/src/lib/settings/Statistics.svelte
index a3992f5ac0cedd909129444af978eba13409ad95..6136ecc2157127c9542af76337cfa1c179aaa7fd 100644 (file)
--- a/frontend/src/lib/settings/Statistics.svelte
+++ b/frontend/src/lib/settings/Statistics.svelte
@@ -463,21 +463,23 @@
                                        days: dayStats.filter((d) => d.isBookmarked).length.toLocaleString($tolgee.getLanguage())
                                })}
                        </li>
-                       <li>
-                               {$t('tags.tags')}:<br />
-                               {#each $tags as tag (tag.id)}
-                                       <span class="d-inline-block me-3 mb-2">
-                                               <Tag {tag} />
-
-                                               {@html $t('settings.statistics.tagUsedCount', {
-                                                       count: dayStats
-                                                               .filter((d) => d.tags.includes(tag.id))
-                                                               .length.toLocaleString($tolgee.getLanguage())
-                                               })}
-                                       </span>
-                                       <br />
-                               {/each}
-                       </li>
+                       {#if $tags.length > 0}
+                               <li>
+                                       {$t('tags.tags')}:<br />
+                                       {#each $tags as tag (tag.id)}
+                                               <span class="d-inline-block me-3 mb-2">
+                                                       <Tag {tag} />
+
+                                                       {@html $t('settings.statistics.tagUsedCount', {
+                                                               count: dayStats
+                                                                       .filter((d) => d.tags.includes(tag.id))
+                                                                       .length.toLocaleString($tolgee.getLanguage())
+                                                       })}
+                                               </span>
+                                               <br />
+                                       {/each}
+                               </li>
+                       {/if}
                </ul>
 
                <h4 class="headerTotal">{$t('settings.statistics.funFacts')}</h4>

diff --git a/frontend/src/routes/(authed)/+layout.svelte b/frontend/src/routes/(authed)/+layout.svelte
index 0fd2b7b14470bc7a4553e17f70264c4aafbdf583..276c31276833136d29786173be73b471e6bfe108 100644 (file)
--- a/frontend/src/routes/(authed)/+layout.svelte
+++ b/frontend/src/routes/(authed)/+layout.svelte
@@ -174,6 +174,45 @@
                settingsSections = [];
        }
 
+       function reinitializeSettingsScrollSpy() {
+               // Destroy existing ScrollSpy first
+               destroySettingsScrollSpy();
+
+               // Re-setup the settings content scroll behavior
+               const contentEl = document.getElementById('settings-content');
+               const navEl = document.getElementById('settings-nav');
+               const modalBody = document.getElementById('modal-body');
+
+               if (contentEl && navEl && modalBody) {
+                       const height = modalBody.clientHeight;
+                       contentEl.style.height = 'calc(' + height + 'px - 2rem)';
+                       navEl.style.height = 'calc(' + height + 'px - 2rem)';
+                       contentEl.style.overflowY = 'auto';
+                       contentEl.scrollTop = 0;
+                       activeSettingsSection = 'appearance';
+                       // Short timeout to allow layout calculation before reading offsets
+                       setTimeout(initSettingsScrollSpy, 100);
+               }
+       }
+
+       function switchToSettingsTab() {
+               activeSettingsView = 'settings';
+               // Reinitialize ScrollSpy when switching to settings tab
+               setTimeout(reinitializeSettingsScrollSpy, 50);
+       }
+
+       function switchToStatsTab() {
+               activeSettingsView = 'stats';
+               // Destroy settings ScrollSpy when leaving settings tab
+               destroySettingsScrollSpy();
+       }
+
+       function switchToAdminTab() {
+               activeSettingsView = 'admin';
+               // Destroy settings ScrollSpy when leaving settings tab
+               destroySettingsScrollSpy();
+       }
+
        function openSettingsModal() {
                activeSettingsView = 'settings';
                $tempSettings = JSON.parse(JSON.stringify($settings));
@@ -898,21 +937,21 @@
                                        <button
                                                type="button"
                                                class="btn btn-outline-primary {activeSettingsView === 'settings' ? 'active' : ''}"
-                                               onclick={() => (activeSettingsView = 'settings')}
+                                               onclick={switchToSettingsTab}
                                        >
                                                {$t('settings.title')}
                                        </button>
                                        <button
                                                type="button"
                                                class="btn btn-outline-primary {activeSettingsView === 'stats' ? 'active' : ''}"
-                                               onclick={() => (activeSettingsView = 'stats')}
+                                               onclick={switchToStatsTab}
                                        >
                                                {$t('settings.statistics.title')}
                                        </button>
                                        <button
                                                type="button"
                                                class="btn btn-outline-primary {activeSettingsView === 'admin' ? 'active' : ''}"
-                                               onclick={() => (activeSettingsView = 'admin')}
+                                               onclick={switchToAdminTab}
                                        >
                                                {$t('settings.admin.title')}
                                        </button>
@@ -920,7 +959,10 @@
                                        ></button>
                                </div>
                        </div>
-                       <div class="modal-body" id="modal-body">
+                       <div
+                               class="modal-body {activeSettingsView !== 'settings' ? 'modal-body-scrollable' : ''}"
+                               id="modal-body"
+                       >
                                <div class="row">
                                        {#if activeSettingsView === 'settings'}
                                                <div class="col-4 overflow-y-auto d-none d-md-block">
@@ -2120,9 +2162,16 @@
        }
 
        .modal-body {
+               /* For settings tab, let internal elements handle scrolling */
                overflow-y: hidden;
        }
 
+       .modal-body.modal-body-scrollable {
+               /* For stats/admin tabs, let modal-body handle scrolling */
+               max-height: calc(100vh - 200px);
+               overflow-y: auto;
+       }
+
        .modal-header {
                border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }