From 5a48d5a2bb6fb1e74b93a706b73c95ef83aba4f5 Mon Sep 17 00:00:00 2001
From: Drake Marino <drake@marinodev.com>
Date: Thu, 19 Jun 2025 22:23:54 -0500
Subject: [PATCH] fixes

---
 src/routes/account/+page.svelte               |   6 +-
 .../account/editapplication/+page.svelte      | 149 ++++++++++--------
 src/routes/signin/+page.svelte                |   2 +
 3 files changed, 90 insertions(+), 67 deletions(-)

diff --git a/src/routes/account/+page.svelte b/src/routes/account/+page.svelte
index 2f9ef38..50af554 100644
--- a/src/routes/account/+page.svelte
+++ b/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
diff --git a/src/routes/account/editapplication/+page.svelte b/src/routes/account/editapplication/+page.svelte
index 60761aa..382d9aa 100644
--- a/src/routes/account/editapplication/+page.svelte
+++ b/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,72 +16,89 @@
 			`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">
-	<div class="content flex">
-		<div class="elevated separator-borders ml-4 mt-4 inline-block h-min w-1/2 rounded p-4">
-			<div class="bottom-border elevated-bg flex justify-between pb-2">
-				<div class="inline-block">
-					<img
-						alt="Company Logo"
-						class="inline-block rounded"
-						height="64"
-						onerror={(e) => logoFallback(e, data.posting)}
-						src="/uploads/logos/{data.posting?.company.id}.jpg"
-						width="64"
-					/>
-					<div class="inline-block pl-2 align-top">
-						<h1>{data.posting.title}</h1>
-						<h2>Company: {data.posting.company.name}</h2>
-					</div>
+{#snippet jobDetails()}
+	<div
+		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
+					alt="Company Logo"
+					class="inline-block rounded"
+					height="64"
+					onerror={(e) => logoFallback(e, data.posting)}
+					src="/uploads/logos/{data.posting?.company.id}.jpg"
+					width="64"
+				/>
+				<div class="inline-block pl-2 align-top">
+					<h1>{data.posting.title}</h1>
+					<h2>Company: {data.posting.company.name}</h2>
 				</div>
 			</div>
-			<div class="scrollbar-on-elevated details-height 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}"
-				>{data.posting.employer?.email}</a
-				>
-				<a class="hover-hyperlink" href="tel:{data.posting.employer?.phone}"
-				>{data.posting.employer?.phone}</a
-				>
-				<h2 class="pt-2 font-semibold">Details</h2>
-				{#if data.posting.employmentType}
-					<p>{employmentTypeDisplayName(data.posting.employmentType)}</p>
-				{/if}
-				{#if data.posting.address}
-					<a
-						href="https://www.google.com/maps/search/?api=1&query={data.posting.address}"
-						class="block w-max"
-					>Address: <span class="hover-hyperlink">{data.posting.address}</span></a
-					>
-				{/if}
-				{#if data.posting.wage}
-					<p>Wage: {data.posting.wage}</p>
-				{/if}
-				{#if data.posting.createdAt}
-					<p>Posted: {data.posting.createdAt.toLocaleDateString('en-US', dateFormatOptions)}</p>
-				{/if}
-				{#if data.posting.link}
-					<a href={data.posting.link} class="block w-max"
-					>More information: <span class="hyperlink-color hyperlink-underline"
-					>{data.posting.link}</span
-					></a
-					>
-				{/if}
-				{#if data.posting.flyerLink}
-					<a href={data.posting.flyerLink} class="block w-max"
-					>Flyer: <span class="hyperlink-color hyperlink-underline">{data.posting.flyerLink}</span
-					></a
-					>
-				{/if}
-				<h2 class="pt-2 font-semibold">Job Description</h2>
-				<p class="whitespace-pre-wrap">{data.posting.description}</p>
-			</div>
 		</div>
-		<div class="elevated separator-borders m-4 inline-block h-min w-1/2 rounded">
+		<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}"
+				>{data.posting.employer?.email}</a
+			>
+			<a class="hover-hyperlink" href="tel:{data.posting.employer?.phone}"
+				>{data.posting.employer?.phone}</a
+			>
+			<h2 class="pt-2 font-semibold">Details</h2>
+			{#if data.posting.employmentType}
+				<p>{employmentTypeDisplayName(data.posting.employmentType)}</p>
+			{/if}
+			{#if data.posting.address}
+				<a
+					href="https://www.google.com/maps/search/?api=1&query={data.posting.address}"
+					class="block"
+					>Address: <span class="hover-hyperlink break-words">{data.posting.address}</span></a
+				>
+			{/if}
+			{#if data.posting.wage}
+				<p>Wage: {data.posting.wage}</p>
+			{/if}
+			{#if data.posting.createdAt}
+				<p>Posted: {data.posting.createdAt.toLocaleDateString('en-US', dateFormatOptions)}</p>
+			{/if}
+			{#if data.posting.link}
+				<a href={data.posting.link} class="block"
+					>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"
+					>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 break-words">{data.posting.description}</p>
+		</div>
+	</div>
+{/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"
-					>{data.application.candidateStatement}</textarea>
+						rows="4">{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
+					>Save application
 				</button>
 			</form>
 		</div>
+		{#if !largeScreen.current}
+			{@render jobDetails()}
+		{/if}
 	</div>
 </div>
diff --git a/src/routes/signin/+page.svelte b/src/routes/signin/+page.svelte
index 450b765..efb7b76 100644
--- a/src/routes/signin/+page.svelte
+++ b/src/routes/signin/+page.svelte
@@ -40,6 +40,8 @@
 						placeholder="Username"
 						required
 						type="text"
+						autocapitalize="none"
+						autocorrect="off"
 					/>
 				</div>
 				<div class="relative w-full">