From 2d9e498f9693c9fe553aa93c3faee9883a4d1e77 Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Wed, 21 Feb 2024 14:24:04 +0100
Subject: [bugfix] Fix wide images being squished when used as instance avatar
 (#2669)

---
 web/source/settings/admin/settings/index.tsx |  7 +++---
 web/source/settings/style.css                | 36 +++++++++++++++++-----------
 2 files changed, 25 insertions(+), 18 deletions(-)

(limited to 'web/source/settings')

diff --git a/web/source/settings/admin/settings/index.tsx b/web/source/settings/admin/settings/index.tsx
index 4e5ea343a..69fbfd4ca 100644
--- a/web/source/settings/admin/settings/index.tsx
+++ b/web/source/settings/admin/settings/index.tsx
@@ -105,19 +105,18 @@ function AdminSettingsForm({ data: instance }: AdminSettingsFormProps) {
 			/>
 
 			<div className="file-upload" aria-labelledby="avatar">
-				<strong id="avatar">Instance avatar</strong>
-				<div>
+				<strong id="avatar">Instance avatar (1:1 images look best)</strong>
+				<div className="file-upload-with-preview">
 					<img
 						className="preview avatar"
 						src={form.thumbnail.previewValue ?? instance?.thumbnail}
 						alt={form.thumbnailDesc.value ?? (instance?.thumbnail ? `Thumbnail image for the instance` : "No instance thumbnail image set")}
 					/>
-					<div>
+					<div className="file-input-with-image-description">
 						<FileInput
 							field={form.thumbnail}
 							accept="image/png, image/jpeg, image/webp, image/gif"
 						/>
-						<br/>
 						<TextInput
 							field={form.thumbnailDesc}
 							label="Avatar image description"
diff --git a/web/source/settings/style.css b/web/source/settings/style.css
index 6e19acdd4..501e9dbef 100644
--- a/web/source/settings/style.css
+++ b/web/source/settings/style.css
@@ -395,21 +395,29 @@ section.with-sidebar > div, section.with-sidebar > form {
 	gap: 1rem;
 }
 
-.file-upload > div {
-	display: flex;
-	gap: 1rem;
-
-	img {
-		height: 8rem;
-		border: 0.2rem solid $border-accent;
-	}
-
-	img.avatar {
-		width: 8rem;
+.file-upload {
+	.file-upload-with-preview {
+		display: flex;
+		gap: 1rem;
+	
+		img {
+			height: 8rem;
+			border: 0.2rem solid $border-accent;
+		}
+	
+		img.avatar {
+			width: 8rem;
+		}
+	
+		img.header {
+			width: 24rem;
+		}
 	}
-
-	img.header {
-		width: 24rem;
+	
+	.file-input-with-image-description {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-around;
 	}
 }
 
-- 
cgit v1.2.3