From: PhiTux <redacted>
Date: Tue, 9 Sep 2025 09:27:21 +0000 (+0200)
Subject: fixed scroll issue
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=4f23b8a6b30c7d37afa2babbde49b2721662c21e;p=DailyTxT.git

fixed scroll issue
---

diff --git a/frontend/src/lib/SettingsNav.svelte b/frontend/src/lib/SettingsNav.svelte
deleted file mode 100644
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 a3992f5..6136ecc 100644
--- 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 0fd2b7b..276c312 100644
--- 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);
 	}