From: PhiTux <redacted>
Date: Mon, 29 Sep 2025 17:36:33 +0000 (+0200)
Subject: css fixes
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=a0b9fc90f7b9915abdd59d4374bf132a33e591cf;p=DailyTxT.git

css fixes
---

diff --git a/frontend/src/lib/ALookBack.svelte b/frontend/src/lib/ALookBack.svelte
index c2d218f..1b412fe 100644
--- a/frontend/src/lib/ALookBack.svelte
+++ b/frontend/src/lib/ALookBack.svelte
@@ -42,8 +42,8 @@
 </script>
 
 <!-- svelte-ignore a11y_consider_explicit_label -->
-<button onclick={openModal} id="zoomButton" class="btn" style="width: 200px; height: 100px;">
-	<div class="d-flex flex-row h-100">
+<button onclick={openModal} id="zoomButton" class="btn" style="height:100px;">
+	<div class="d-flex flex-row h-100" style="width: 200px;">
 		<div class="left d-flex flex-column justify-content-evenly px-1">
 			<div><b>{log?.year}</b></div>
 			<div><em><b>{log?.years_old}</b> {$t('aLookBack.Year_one_letter')}</em></div>
diff --git a/frontend/src/lib/FileList.svelte b/frontend/src/lib/FileList.svelte
index 56ad128..4f9df85 100644
--- a/frontend/src/lib/FileList.svelte
+++ b/frontend/src/lib/FileList.svelte
@@ -80,169 +80,163 @@
 	}
 </script>
 
-{#each files as file, index (file.uuid_filename)}
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div
-		class="btn-group file mt-2 {dragOverIndex === index ? 'drag-over' : ''}"
-		transition:slide
-		draggable="false"
-		ondragover={(e) => handleDragOver(e, index)}
-		ondragleave={handleDragLeave}
-		ondrop={(e) => handleDrop(e, index)}
-	>
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		{#if editable && files.length > 1}
-			<div
-				class="drag-handle d-flex align-items-center px-2"
-				draggable="true"
-				ondragstart={(e) => {
-					e.stopPropagation();
-					handleDragStart(e, index);
-				}}
-				ondragend={(e) => {
-					e.stopPropagation();
-					handleDragEnd(e);
-				}}
-			>
-				<Fa icon={faGripVertical} class="text-muted" />
-			</div>
-		{/if}
-		<button
-			onclick={() => downloadFile(file.uuid_filename)}
-			class="p-2 fileBtn d-flex flex-column flex-fill"
-		>
-			<div class="d-flex flex-row align-items-center">
-				<div class="filename filenameWeight">{file.filename}</div>
-				<span class="filesize">({formatBytes(file.size)})</span>
-			</div>
-			{#if file.downloadProgress >= 0}
+{#if files.length > 0}
+	<div class="file-list">
+		{#each files as file, index (file.uuid_filename)}
+			<div class="file-row" transition:slide|global>
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<div
-					class="progress"
-					role="progressbar"
-					aria-label="Download progress"
-					aria-valuemin="0"
-					aria-valuemax="100"
+					class="btn-group file {dragOverIndex === index ? 'drag-over' : ''}"
+					draggable="false"
+					ondragover={(e) => handleDragOver(e, index)}
+					ondragleave={handleDragLeave}
+					ondrop={(e) => handleDrop(e, index)}
 				>
-					<div
-						class="progress-bar overflow-visible bg-info {file.downloadProgress === 0
-							? 'progress-bar-striped progress-bar-animated'
-							: ''}"
-						style:width={file.downloadProgress + '%'}
-						aria-valuenow={file.downloadProgress}
-						aria-valuemax="100"
+					{#if editable && files.length > 1}
+						<div
+							class="drag-handle d-flex align-items-center px-2"
+							draggable="true"
+							ondragstart={(e) => {
+								e.stopPropagation();
+								handleDragStart(e, index);
+							}}
+							ondragend={(e) => {
+								e.stopPropagation();
+								handleDragEnd(e);
+							}}
+						>
+							<Fa icon={faGripVertical} class="text-muted" />
+						</div>
+					{/if}
+					<button
+						onclick={() => downloadFile(file.uuid_filename)}
+						class="p-2 fileBtn d-flex flex-column flex-fill"
 					>
-						{#if file.downloadProgress === 0}
-							<span class="text-dark">
-								{$t('files.decrypting')}
-							</span>
-						{:else}
-							<span class="text-dark">{$t('files.download')}: {file.downloadProgress}%</span>
+						<div class="d-flex flex-row align-items-center">
+							<div class="filename filenameWeight">{file.filename}</div>
+							<span class="filesize">({formatBytes(file.size)})</span>
+						</div>
+						{#if file.downloadProgress >= 0}
+							<div
+								class="progress"
+								role="progressbar"
+								aria-label="Download progress"
+								aria-valuemin="0"
+								aria-valuemax="100"
+							>
+								<div
+									class="progress-bar overflow-visible bg-info {file.downloadProgress === 0
+										? 'progress-bar-striped progress-bar-animated'
+										: ''}"
+									style:width={file.downloadProgress + '%'}
+									aria-valuenow={file.downloadProgress}
+									aria-valuemax="100"
+								>
+									{#if file.downloadProgress === 0}
+										<span class="text-dark">{$t('files.decrypting')}</span>
+									{:else}
+										<span class="text-dark">{$t('files.download')}: {file.downloadProgress}%</span>
+									{/if}
+								</div>
+							</div>
 						{/if}
-					</div>
+					</button>
+					{#if editable}
+						<button
+							class="p-2 fileBtn optionsBtn"
+							onclick={() => {
+								if (openOptionsMenu === file.uuid_filename) {
+									openOptionsMenu = null;
+									editingFilename = null;
+								} else {
+									openOptionsMenu = file.uuid_filename;
+									editingFilename = null;
+								}
+							}}
+						>
+							<Fa icon={faWrench} fw />
+						</button>
+					{/if}
 				</div>
-			{/if}
-		</button>
-		{#if editable}
-			<button
-				class="p-2 fileBtn optionsBtn"
-				onclick={() => {
-					if (openOptionsMenu === file.uuid_filename) {
-						openOptionsMenu = null;
-						editingFilename = null;
-					} else {
-						openOptionsMenu = file.uuid_filename;
-						editingFilename = null;
-					}
-				}}
-			>
-				<Fa icon={faWrench} fw />
-			</button>
-		{/if}
-	</div>
+			</div>
 
-	{#if editable && openOptionsMenu === file.uuid_filename}
-		<div transition:slide>
-			<div class="options-menu p-3 mt-1">
-				<div class="mb-3">
-					<!-- svelte-ignore a11y_label_has_associated_control -->
-					<label class="form-label small fw-bold">{$t('fileList.change_filename')}:</label>
-					<div class="d-flex gap-2">
-						{#if editingFilename === file.uuid_filename}
-							<input
-								type="text"
-								class="form-control form-control-sm"
-								id="newFilename-{file.uuid_filename}"
-								bind:value={newFilename}
-								onkeydown={(e) => {
-									if (e.key === 'Enter') {
-										if (renameFile) {
-											renameFile(file.uuid_filename, newFilename);
+			{#if editable && openOptionsMenu === file.uuid_filename}
+				<div in:slide|global out:slide|global>
+					<div class="card options-menu p-3 mt-1">
+						<!-- svelte-ignore a11y_label_has_associated_control -->
+						<label class="form-label small fw-bold">{$t('fileList.change_filename')}:</label>
+						<div class="d-flex gap-2">
+							{#if editingFilename === file.uuid_filename}
+								<input
+									type="text"
+									class="form-control form-control-sm"
+									id="newFilename-{file.uuid_filename}"
+									bind:value={newFilename}
+									onkeydown={(e) => {
+										if (e.key === 'Enter') {
+											if (renameFile) renameFile(file.uuid_filename, newFilename);
+											editingFilename = null;
+											openOptionsMenu = null;
+										} else if (e.key === 'Escape') {
+											editingFilename = null;
 										}
+									}}
+								/>
+								<button
+									class="btn btn-sm btn-success"
+									onclick={() => {
+										if (renameFile) renameFile(file.uuid_filename, newFilename);
 										editingFilename = null;
 										openOptionsMenu = null;
-									} else if (e.key === 'Escape') {
+									}}
+								>
+									<Fa icon={faSave} fw />
+								</button>
+								<button
+									class="btn btn-sm btn-secondary"
+									onclick={() => {
 										editingFilename = null;
-									}
-								}}
-							/>
+									}}
+								>
+									<Fa icon={faTimes} fw />
+								</button>
+							{:else}
+								<input
+									type="text"
+									class="form-control form-control-sm"
+									value={file.filename}
+									disabled
+								/>
+								<button
+									class="btn btn-sm btn-primary"
+									onclick={() => {
+										editingFilename = file.uuid_filename;
+										newFilename = file.filename;
+									}}
+								>
+									<Fa icon={faEdit} fw />
+								</button>
+							{/if}
+						</div>
+						<hr style="color: black;" />
+						<div>
 							<button
-								class="btn btn-sm btn-success"
+								class="btn btn-sm btn-danger w-100"
 								onclick={() => {
-									if (renameFile) {
-										renameFile(file.uuid_filename, newFilename);
-									}
-									editingFilename = null;
+									askDeleteFile(file.uuid_filename, file.filename);
 									openOptionsMenu = null;
 								}}
 							>
-								<Fa icon={faSave} fw />
+								<Fa icon={faTrash} fw class="me-2" />
+								{$t('fileList.delete_file')}
 							</button>
-							<button
-								class="btn btn-sm btn-secondary"
-								onclick={() => {
-									editingFilename = null;
-								}}
-							>
-								<Fa icon={faTimes} fw />
-							</button>
-						{:else}
-							<input
-								type="text"
-								class="form-control form-control-sm"
-								value={file.filename}
-								disabled
-							/>
-							<button
-								class="btn btn-sm btn-primary"
-								onclick={() => {
-									editingFilename = file.uuid_filename;
-									newFilename = file.filename;
-								}}
-							>
-								<Fa icon={faEdit} fw />
-							</button>
-						{/if}
+						</div>
 					</div>
 				</div>
-
-				<hr style="color: black;" />
-
-				<div>
-					<button
-						class="btn btn-sm btn-danger w-100"
-						onclick={() => {
-							askDeleteFile(file.uuid_filename, file.filename);
-							openOptionsMenu = null;
-						}}
-					>
-						<Fa icon={faTrash} fw class="me-2" />
-						{$t('fileList.delete_file')}
-					</button>
-				</div>
-			</div>
-		</div>
-	{/if}
-{/each}
+			{/if}
+		{/each}
+	</div>
+{/if}
 
 <style>
 	.filename {
@@ -281,7 +275,6 @@
 	}
 
 	.options-menu {
-		background-color: rgba(248, 249, 250, 0.95);
 		border: 1px solid rgba(0, 0, 0, 0.125);
 		border-radius: 5px;
 		backdrop-filter: blur(5px);
@@ -306,4 +299,10 @@
 		border: 2px dashed #007bff;
 		background-color: rgba(0, 123, 255, 0.1);
 	}
+
+	.file-list {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
 </style>
diff --git a/frontend/src/lib/ImageViewer.svelte b/frontend/src/lib/ImageViewer.svelte
index 60d8be0..b2c7526 100644
--- a/frontend/src/lib/ImageViewer.svelte
+++ b/frontend/src/lib/ImageViewer.svelte
@@ -220,6 +220,8 @@
 		gap: 1rem;
 		overflow-x: auto;
 		padding: 0.5rem 0;
+		height: 116px;
+		min-height: 116px;
 	}
 
 	.image-container {
diff --git a/frontend/src/lib/Sidenav.svelte b/frontend/src/lib/Sidenav.svelte
index 61914f4..c8014a8 100644
--- a/frontend/src/lib/Sidenav.svelte
+++ b/frontend/src/lib/Sidenav.svelte
@@ -427,6 +427,12 @@
 		margin-bottom: 3rem;
 	}
 
+	@media (max-height: 800px) {
+		:global(.datepicker) {
+			margin-bottom: 1rem;
+		}
+	}
+
 	.noResult {
 		font-size: 25pt;
 		font-weight: 750;
@@ -453,7 +459,8 @@
 
 	:global(.popover-body) {
 		overflow-y: auto;
-		max-height: 550px;
+		/* max-height: 550px; */
+		max-height: 90vh;
 	}
 
 	.searchTagDropdown {
diff --git a/frontend/src/routes/(authed)/+layout.svelte b/frontend/src/routes/(authed)/+layout.svelte
index 0e7265a..e27935a 100644
--- a/frontend/src/routes/(authed)/+layout.svelte
+++ b/frontend/src/routes/(authed)/+layout.svelte
@@ -1167,7 +1167,7 @@
 
 	{#key page.data}
 		<div
-			class="transition-wrapper overflow-y-auto"
+			class="transition-wrapper overflow-y-auto h-100"
 			out:blur={{ duration: outDuration }}
 			in:blur={{ duration: inDuration, delay: outDuration }}
 		>
diff --git a/frontend/src/routes/(authed)/write/+page.svelte b/frontend/src/routes/(authed)/write/+page.svelte
index 9c2cee2..18a628f 100644
--- a/frontend/src/routes/(authed)/write/+page.svelte
+++ b/frontend/src/routes/(authed)/write/+page.svelte
@@ -1166,7 +1166,7 @@
 	<Sidenav />
 </div>
 
-<div class="d-flex flex-row justify-content-between h-100 main-row">
+<div class="d-flex flex-row justify-content-between main-row h-100">
 	<!-- shown on large Screen -->
 	{#if $alwaysShowSidenav}
 		<div class="sidenav p-3">
@@ -1234,7 +1234,7 @@
 			{/if}
 
 			{#if $settings.useALookBack && aLookBack.length > 0}
-				<div class="mt-3 d-flex gap-2 overflow-x-auto">
+				<div class="mt-3 d-flex gap-2 overflow-x-auto mb-2 a-look-back">
 					{#each aLookBack as log}
 						<ALookBack {log} />
 					{/each}
@@ -1349,14 +1349,17 @@
 				>
 				<input type="file" id="fileInput" multiple style="display: none;" onchange={onFileChange} />
 
-				<FileList
-					files={filesOfDay}
-					{downloadFile}
-					{askDeleteFile}
-					{renameFile}
-					{reorderFiles}
-					editable
-				/>
+				<div class="fileScroll">
+					<FileList
+						files={filesOfDay}
+						{downloadFile}
+						{askDeleteFile}
+						{renameFile}
+						{reorderFiles}
+						editable
+					/>
+				</div>
+
 				{#each uploadingFiles as file}
 					<div>
 						{file.name}
@@ -1770,6 +1773,11 @@
 </div>
 
 <style>
+	.a-look-back {
+		height: 110px;
+		min-height: 110px;
+	}
+
 	#modalHistory > div > div {
 		height: 80vh;
 	}
@@ -1937,6 +1945,11 @@
 		margin-bottom: 1rem;
 		border-radius: 10px;
 		padding: 1rem;
+		min-height: 0;
+	}
+
+	.fileScroll {
+		overflow-y: auto;
 	}
 
 	:global(#uploadIcon) {