fixes

src/routes/account/+page.svelte

@@ -249,11 +249,11 @@
 						<div class="font-semibold">Résumé:</div>
 						{#if resumeState}
 							<a class="pb-2" href="/uploads/resumes/{data.user.id}.pdf" target="_blank">
-								<button class="dull-primary-bg-color rounded-md px-2.5 py-1"
+								<button class="dull-primary-bg-color my-1 mr-2 rounded-md px-2.5 py-1"
 									><span class="material-symbols-outlined align-middle">open_in_new</span> View résumé
 								</button>
 							</a>
-							<button class="mb-2 ml-1 rounded-md border px-2.5 py-1" onclick={openUpload}
+							<button class="my-1 mb-2 rounded-md border px-2.5 py-1" onclick={openUpload}
 								><span class="material-symbols-outlined align-middle">upload</span> Upload new version
 							</button>
 						{:else}
@@ -296,7 +296,7 @@
 								</h3>
 								<p class="whitespace-pre-wrap">{application.candidateStatement}</p>
 							</div>
-							<div class="mr-3 mt-3">
+							<div class="mr-3 mt-3 min-w-max">
 								<a
 									href="account/editapplication?id={application.id}"
 									class="material-symbols-outlined hyperlink-color mr-3">edit</a

src/routes/account/editapplication/+page.svelte

@@ -3,6 +3,7 @@
 	import type { PageProps } from './$types';
 	import { employmentTypeDisplayName } from '$lib/shared.svelte';
 	import type { Posting } from '$lib/types';
+	import { MediaQuery } from 'svelte/reactivity';
 
 	const dateFormatOptions: Intl.DateTimeFormatOptions = {
 		year: 'numeric',
@@ -15,12 +16,17 @@
 			`https://ui-avatars.com/api/?background=random&format=svg&name=${encodeURIComponent(posting.company.name || 'COMPANY')}`;
 	}
 
+	const largeScreen = new MediaQuery('min-width: 1024px');
+
 	let { data, form }: PageProps = $props();
 </script>
 
-<div class="base-container">
+{#snippet jobDetails()}
-	<div class="content flex">
+	<div
-		<div class="elevated separator-borders ml-4 mt-4 inline-block h-min w-1/2 rounded p-4">
+		class="elevated separator-borders my-2 h-min rounded p-4 {largeScreen.current
+			? 'mr-2 inline-block w-1/2'
+			: 'block w-full'}"
+	>
 		<div class="bottom-border elevated-bg flex justify-between pb-2">
 			<div class="inline-block">
 				<img
@@ -37,7 +43,7 @@
 				</div>
 			</div>
 		</div>
-			<div class="scrollbar-on-elevated details-height overflow-y-scroll">
+		<div class="scrollbar-on-elevated overflow-y-scroll">
 			<h2 class="pt-2 font-semibold">Contact</h2>
 			<p>{data.posting.employer?.fullName} ({data.posting.employer?.username})</p>
 			<a class="hover-hyperlink" href="mailto:{data.posting.employer?.email}"
@@ -53,8 +59,8 @@
 			{#if data.posting.address}
 				<a
 					href="https://www.google.com/maps/search/?api=1&query={data.posting.address}"
-						class="block w-max"
+					class="block"
-					>Address: <span class="hover-hyperlink">{data.posting.address}</span></a
+					>Address: <span class="hover-hyperlink break-words">{data.posting.address}</span></a
 				>
 			{/if}
 			{#if data.posting.wage}
@@ -64,23 +70,35 @@
 				<p>Posted: {data.posting.createdAt.toLocaleDateString('en-US', dateFormatOptions)}</p>
 			{/if}
 			{#if data.posting.link}
-					<a href={data.posting.link} class="block w-max"
+				<a href={data.posting.link} class="block"
-					>More information: <span class="hyperlink-color hyperlink-underline"
+					>More information: <span class="hyperlink-color hyperlink-underline break-all"
 						>{data.posting.link}</span
 					></a
 				>
 			{/if}
 			{#if data.posting.flyerLink}
-					<a href={data.posting.flyerLink} class="block w-max"
+				<a href={data.posting.flyerLink} class="block"
-					>Flyer: <span class="hyperlink-color hyperlink-underline">{data.posting.flyerLink}</span
+					>Flyer: <span class="hyperlink-color hyperlink-underline break-all"
+						>{data.posting.flyerLink}</span
 					></a
 				>
 			{/if}
 			<h2 class="pt-2 font-semibold">Job Description</h2>
-				<p class="whitespace-pre-wrap">{data.posting.description}</p>
+			<p class="whitespace-pre-wrap break-words">{data.posting.description}</p>
 		</div>
 	</div>
-		<div class="elevated separator-borders m-4 inline-block h-min w-1/2 rounded">
+{/snippet}
+
+<div class="base-container">
+	<div class="content {largeScreen.current ? 'flex' : 'block'}">
+		{#if largeScreen.current}
+			{@render jobDetails()}
+		{/if}
+		<div
+			class="elevated separator-borders my-2 h-min rounded {largeScreen.current
+				? 'inline-block w-1/2'
+				: 'block w-full'}"
+		>
 			<div class="bottom-border flex place-content-between">
 				<div class="p-3 font-semibold">Edit Application</div>
 			</div>
@@ -93,8 +111,8 @@
 						name="candidateStatement"
 						placeholder="Answer here"
 						required
-						rows="4"
+						rows="4">{data.application.candidateStatement}</textarea
-					>{data.application.candidateStatement}</textarea>
+					>
 				</div>
 				<p>
 					Your account information and résumé (if supplied) will be submitted along with this
@@ -107,11 +125,14 @@
 				{/if}
 				<button
 					class="dull-primary-bg-color mb-4 mt-6 rounded px-2 py-1"
-					formaction="?/submit&id={data.application.id}"
+					formaction="?/submit"
 					type="submit"
 					>Save application
 				</button>
 			</form>
 		</div>
+		{#if !largeScreen.current}
+			{@render jobDetails()}
+		{/if}
 	</div>
 </div>

src/routes/signin/+page.svelte

@@ -40,6 +40,8 @@
 						placeholder="Username"
 						required
 						type="text"
+						autocapitalize="none"
+						autocorrect="off"
 					/>
 				</div>
 				<div class="relative w-full">