From adbf92d0f307b66d3a4f4730aa4090b61e7e219c Mon Sep 17 00:00:00 2001
From: Fornax <wim@fornaxian.tech>
Date: Thu, 16 Nov 2023 14:48:15 +0100
Subject: [PATCH] Fix text wrapping in modal title

---
 svelte/src/file_viewer/FileViewer.svelte               |  1 +
 svelte/src/file_viewer/HomeButton.svelte               | 10 +++++++---
 .../src/filesystem/upload_widget/UploadWidget.svelte   |  2 +-
 svelte/src/util/Modal.svelte                           | 10 ++++------
 webcontroller/style.go                                 |  2 +-
 5 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/svelte/src/file_viewer/FileViewer.svelte b/svelte/src/file_viewer/FileViewer.svelte
index 5941551..00c3090 100644
--- a/svelte/src/file_viewer/FileViewer.svelte
+++ b/svelte/src/file_viewer/FileViewer.svelte
@@ -653,6 +653,7 @@ const keyboard_event = evt => {
 	flex-direction: row;
 	text-align: left;
 	padding: 4px;
+	align-items: center;
 }
 @media(max-height: 600px) {
 	.headerbar {
diff --git a/svelte/src/file_viewer/HomeButton.svelte b/svelte/src/file_viewer/HomeButton.svelte
index fdc7f7a..9f0263a 100644
--- a/svelte/src/file_viewer/HomeButton.svelte
+++ b/svelte/src/file_viewer/HomeButton.svelte
@@ -11,7 +11,8 @@ export let nobg = false
 		class:nobg
 		target={embedded_viewer ? "_blank" : ""}
 		title="Go to the pixeldrain home page">
-		<PixeldrainLogo style="height: 1.6em; width: 1.6em; margin: 0 4px 0 0;"></PixeldrainLogo>
+		<PixeldrainLogo style="height: 1.6em; width: 1.6em; margin: 0;"></PixeldrainLogo>
+		<span class="label"></span>
 	</a>
 {:else}
 	<a
@@ -28,7 +29,10 @@ export let nobg = false
 {/if}
 
 <style>
-.button_home::after {
+.button {
+	flex: 0 0 content;
+}
+.label::after {
 	content: "pixeldrain";
 }
 
@@ -38,7 +42,7 @@ export let nobg = false
 }
 
 @media (max-width: 600px) {
-	.button_home::after {
+	.label::after {
 		content: "pd";
 	}
 
diff --git a/svelte/src/filesystem/upload_widget/UploadWidget.svelte b/svelte/src/filesystem/upload_widget/UploadWidget.svelte
index 32553f7..f667d00 100644
--- a/svelte/src/filesystem/upload_widget/UploadWidget.svelte
+++ b/svelte/src/filesystem/upload_widget/UploadWidget.svelte
@@ -180,7 +180,7 @@ const leave_confirmation = e => {
 	max-height: 50%;
 	right: 20px;
 	bottom: 20px;
-	border-radius: 20px 20px 8px 8px;
+	border-radius: 8px;
 	overflow: hidden;
 	box-shadow: 1px 1px 8px var(--shadow_color);
 }
diff --git a/svelte/src/util/Modal.svelte b/svelte/src/util/Modal.svelte
index 60501fa..a428f4c 100644
--- a/svelte/src/util/Modal.svelte
+++ b/svelte/src/util/Modal.svelte
@@ -74,10 +74,10 @@ const keydown = e => {
 				<slot name="title">
 					{#if form !== ""}
 						<Button click={hide} icon="close" label="Cancel"/>
-						<div class="title">{title}</div>
+						<span class="title">{title}</span>
 						<Button highlight type="submit" form={form} click={hide} icon="save" label="Save"/>
 					{:else}
-						<div class="title">{title}</div>
+						<span class="title">{title}</span>
 						<Button round click={hide} icon="close" />
 					{/if}
 				</slot>
@@ -133,18 +133,16 @@ these padding divs to move it 25% up */
 	padding: 1px;
 	background: var(--background_color);
 	color: var(--background_text_color);
+	align-items: center;
 }
 .title {
 	flex-grow: 1;
 	flex-shrink: 1;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
 	font-size: 1.2em;
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	overflow: hidden;
+	text-align: center;
 }
 .body {
 	flex-grow: 1;
diff --git a/webcontroller/style.go b/webcontroller/style.go
index 1983daf..d029157 100644
--- a/webcontroller/style.go
+++ b/webcontroller/style.go
@@ -260,7 +260,7 @@ func (s styleSheet) String() string {
 		s.BodyBackground.CSS(),
 		s.BodyText.CSS(),
 		s.Separator.CSS(),
-		s.BodyColor.WithAlpha(0.6).CSS(), // shaded_background
+		s.BodyColor.WithAlpha(0.75).CSS(), // shaded_background
 		s.CardColor.CSS(),
 		s.Chart1.CSS(),
 		s.Chart2.CSS(),