Fix text wrapping in modal title

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 {

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";
 	}
 

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);
 }

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;

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(),