[bugfix] Fix wide images being squished when used as instance avatar (#2669)

web/source/css/index.css

@@ -18,12 +18,23 @@
 */
 
 /*
-	Render instance title a
+	Render instance title + image
-	bit bigger on index page.
+	a bit bigger on index page.
+
+	Overrides the css from page.css.
 */
-.page-header a h1 {
+.page-header {
-	font-size: 2rem;
+	& > a {
-	line-height: 2rem;
+		& > h1 {
+			font-size: 2rem;
+			line-height: 2rem;
+		}
+
+		& > img {
+			align-self: center;
+			max-height: 6rem;
+		}
+	}
 }
 
 /*

web/source/css/page.css

@@ -47,11 +47,20 @@
 		flex-wrap: wrap;
 		gap: 1rem;
 		justify-content: center;
-	
+
 		img {
 			align-self: center;
+			
+			/*
+				Shrink too-wide / too-tall instance
+				icons to sensible proportions. Allow
+				pretty wide images but prevent things
+				getting too out of hand + looking bad.
+			*/
+			max-height: 4rem;
+			max-width: 16rem;
 		}
-	
+
 		h1 {
 			align-self: center;
 			text-align: center;

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>
+				<strong id="avatar">Instance avatar (1:1 images look best)</strong>
-				<div>
+				<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"

web/source/settings/style.css

@@ -395,21 +395,29 @@ section.with-sidebar > div, section.with-sidebar > form {
 	gap: 1rem;
 }
 
-.file-upload > div {
+.file-upload {
-	display: flex;
+	.file-upload-with-preview {
-	gap: 1rem;
+		display: flex;
-
+		gap: 1rem;
-	img {
+	
-		height: 8rem;
+		img {
-		border: 0.2rem solid $border-accent;
+			height: 8rem;
+			border: 0.2rem solid $border-accent;
+		}
+	
+		img.avatar {
+			width: 8rem;
+		}
+	
+		img.header {
+			width: 24rem;
+		}
 	}
-
+	
-	img.avatar {
+	.file-input-with-image-description {
-		width: 8rem;
+		display: flex;
-	}
+		flex-direction: column;
-
+		justify-content: space-around;
-	img.header {
-		width: 24rem;
 	}
 }
 

web/template/page_header.tmpl

@@ -61,8 +61,6 @@ Instance Logo
         src="{{- .instance.Thumbnail -}}"
         alt="{{- template "thumbnailDescription" . -}}"
         title="{{- template "thumbnailDescription" . -}}"
-        width="100"
-        height="100"
     />
     <h1>{{- .instance.Title -}}</h1>
 </a>