A bunch of styling fixes

svelte/src/file_viewer/FileViewer.svelte

@@ -426,7 +426,7 @@ const keyboard_event = evt => {
 			{#if is_list}
 				<button
 					on:click={toggle_gallery}
-					class="toolbar_button button_full_width"
+					class="toolbar_button"
 					class:button_highlight={view === "gallery"}
 					title="Opens a gallery view of the album">
 					<i class="icon">photo_library</i>
@@ -437,7 +437,7 @@ const keyboard_event = evt => {
 			{#if file.abuse_type === "" && view === "file"}
 				<button
 					on:click={downloader.download_file}
-					class="toolbar_button button_full_width"
+					class="toolbar_button"
 					title="Save this file to your computer">
 					<i class="icon">download</i>
 					<span>Download</span>
@@ -447,7 +447,7 @@ const keyboard_event = evt => {
 			{#if file.abuse_type === "" && is_list}
 				<button
 					on:click={downloader.download_list}
-					class="toolbar_button button_full_width"
+					class="toolbar_button"
 					title="Download all files in this album as a zip archive">
 					<i class="icon">download</i>
 					<span>DL all files</span>
@@ -456,7 +456,7 @@ const keyboard_event = evt => {
 
 			<button
 				on:click={copy_url}
-				class="toolbar_button button_full_width"
+				class="toolbar_button"
 				class:button_highlight={copy_url_status === "copied"}
 				class:button_red={copy_url_status === "error"}
 				title="Copy a link to this page to your clipboard">
@@ -474,7 +474,7 @@ const keyboard_event = evt => {
 
 			<button
 				on:click={toggle_sharebar}
-				class="toolbar_button button_full_width"
+				class="toolbar_button"
 				class:button_highlight={sharebar_visible}
 				title="Share this file on social media">
 				<i class="icon">share</i>
@@ -482,7 +482,7 @@ const keyboard_event = evt => {
 			</button>
 
 			<button
-				class="toolbar_button button_full_width"
+				class="toolbar_button"
 				on:click={qr_window.toggle}
 				class:button_highlight={qr_visible}
 				title="Show a QR code with a link to this page. Useful for sharing files in-person">
@@ -492,7 +492,7 @@ const keyboard_event = evt => {
 
 			{#if is_list}
 				<button
-					class="toolbar_button button_full_width"
+					class="toolbar_button"
 					title="Go to a random file when pressing → or clicking the next file button"
 					class:button_highlight={list_shuffle}
 					on:click={toggle_shuffle}>
@@ -507,7 +507,7 @@ const keyboard_event = evt => {
 
 			{#if view === "file"}
 				<button
-					class="toolbar_button button_full_width"
+					class="toolbar_button"
 					on:click={details_window.toggle}
 					class:button_highlight={details_visible}
 					title="Information and statistics about this file">
@@ -520,7 +520,7 @@ const keyboard_event = evt => {
 
 			{#if file.can_edit || list.can_edit}
 				<button
-					class="toolbar_button button_full_width"
+					class="toolbar_button"
 					on:click={edit_window.toggle}
 					class:button_highlight={edit_visible}
 					title="Edit or delete this file or album">
@@ -532,7 +532,7 @@ const keyboard_event = evt => {
 			{#if view === "file" && window.user_authenticated && !file.can_edit}
 				<button
 					on:click={grab_file}
-					class="toolbar_button button_full_width"
+					class="toolbar_button"
 					title="Copy this file to your own pixeldrain account">
 					<i class="icon">save_alt</i>
 					<span><u>G</u>rab file</span>
@@ -540,7 +540,7 @@ const keyboard_event = evt => {
 			{/if}
 
 			<button
-				class="toolbar_button button_full_width"
+				class="toolbar_button"
 				title="Include this file in your own webpages"
 				on:click={embed_window.toggle}
 				class:button_highlight={embed_visible}>
@@ -550,7 +550,7 @@ const keyboard_event = evt => {
 
 			{#if view === "file"}
 				<button
-					class="toolbar_button button_full_width"
+					class="toolbar_button"
 					title="Report this file as abusive"
 					on:click={report_window.toggle}
 					class:button_highlight={report_visible}>
@@ -754,9 +754,9 @@ const keyboard_event = evt => {
 	height: auto;
 	text-align: center;
 }
-
 .toolbar_button{
 	text-align: left;
+	width: calc(100% - 6px);
 }
 .toolbar_button > span {
 	vertical-align: middle;

svelte/src/file_viewer/Sharebar.svelte

@@ -78,6 +78,9 @@ const share_tumblr = () => {
 	transition: left 0.5s;
 }
 .visible { left: 8em; }
+.button_full_width {
+	width: calc(100% - 6px);
+}
 .button_full_width > svg {
 	height: 3em;
 	width: 3em;

svelte/src/file_viewer/UkrainePopup.svelte

@@ -18,7 +18,7 @@ onMount(() => {
 {#if visible}
 	<div in:fade out:fade class="notice highlight_yellow">
 		<div class="text">
-			🇺🇦 Russia has invaded Ukraine and is murdering its citizens! 🇺🇦<br/>
+			🇺🇦 Russia has invaded Ukraine and is attacking civilians! 🇺🇦<br/>
 			There are a number of ways you can help:
 			<a href="https://helpukrainewin.org/" rel="noreferrer" target="_blank">Click here for more information</a>.
 		</div>

svelte/src/file_viewer/viewers/File.svelte

@@ -33,6 +33,7 @@ let file = {
 <style>
 h1 {
 	text-shadow: 1px 1px 3px var(--shadow_color);
+	line-break: anywhere;
 }
 .icon {
 	display: inline-block;

svelte/src/file_viewer/viewers/Torrent.svelte

@@ -132,6 +132,10 @@ const copy_magnet = () => {
 {/if}
 
 <style>
+h1 {
+	text-shadow: 1px 1px 3px var(--shadow_color);
+	line-break: anywhere;
+}
 .icon {
 	display: inline-block;
 	vertical-align: middle;

svelte/src/file_viewer/viewers/Video.svelte

@@ -170,6 +170,10 @@ const fullscreen = () => {
 {/if}
 
 <style>
+h1 {
+	text-shadow: 1px 1px 3px var(--shadow_color);
+	line-break: anywhere;
+}
 .container {
 	display: flex;
 	flex-direction: column;