fix signin, apply, and other

src/lib/shared.server.ts

@@ -21,5 +21,5 @@ export function setJWT(cookies: Cookies, user: User) {
 
 	const maxAge = 60 * 60 * 24 * 30; // 30 days
 	const JWT = jwt.sign(payload, process.env.JWT_SECRET, { expiresIn: '30d' });
-	cookies.set('jwt', JWT, { maxAge, path: '/', httpOnly: secure, secure: secure });
+	cookies.set('jwt', JWT, { maxAge, path: '/', httpOnly: false, secure: secure });
 }

src/routes/+layout.svelte

@@ -147,8 +147,9 @@
 				>
 			{/if}
 			<a
-				class="hover-bg-color block h-min p-1 pr-2 align-top"
+				class="hover-bg-color block h-min p-1 px-2 align-top"
 				href={userState.id !== null ? '/account' : '/signin'}
+				onclick={toggleMenu}
 			>
 				<span class="material-symbols-outlined h-min align-top">
 					{userState.id !== null ? 'account_circle' : 'login'}
@@ -170,7 +171,7 @@
 			: 'block'} h-min w-full justify-between p-2 text-center"
 	>
 		<div class="{largeScreen.current ? 'inline-block' : 'block'} text-left align-top">
-			<!--{#if largeScreen.current}-->
+			{#if largeScreen.current}
 				<div class="inline-block pr-3">
 					<p class="font-semibold">Drake Marino:</p>
 					<a class="hyperlink-color hyperlink-underline" href="mailto:drake@marinodev.com"
@@ -183,25 +184,23 @@
 						>chetan@marinodev.com</a
 					>
 				</div>
-			<!--{/if}-->
+			{/if}
 		</div>
-		{#if largeScreen.current}
+		<!--{#if largeScreen.current}-->
-			<div
+		<div class="{largeScreen.current ? 'inline-block' : 'block'} align-top font-semibold">
-				class="{largeScreen.current ? 'inline-block' : 'block text-left'} align-top font-semibold"
-			>
 			<div class="font-semibold">MarinoDev</div>
 			<div class="font-normal">2025</div>
 		</div>
-		{/if}
+		<!--{/if}-->
 		<div class="{largeScreen.current ? 'inline-block text-right' : 'block text-left'} align-top">
-			<!--{#if largeScreen.current}-->
+			{#if largeScreen.current}
 				<div class="font-semibold">Source Code:</div>
 				<a
 					class="hyperlink-color hyperlink-underline"
 					href="https://git.marinodev.com/MarinoDev/FBLA25"
 					>https://git.marinodev.com/MarinoDev/FBLA25</a
 				>
-			<!--{/if}-->
+			{/if}
 		</div>
 	</footer>
 </div>

src/routes/account/+page.svelte

@@ -144,9 +144,9 @@
 </script>
 
 <div class="base-container">
-	<div class="content flex py-4">
+	<div class="content my-2 flex">
 		{#if largeScreen.current}
-			<div class="elevated separator-borders m-2 inline-block h-min min-w-max rounded align-top">
+			<div class="elevated separator-borders mr-2 inline-block h-min min-w-max rounded align-top">
 				<div class="inline-block p-4">
 					<img
 						alt="User avatar"
@@ -188,7 +188,7 @@
 			</div>
 		{/if}
 		<div class="inline-block w-full">
-			<div class="elevated separator-borders m-2 h-min w-full rounded">
+			<div class="elevated separator-borders h-min w-full rounded">
 				<div class="bottom-border flex place-content-between">
 					<div class="p-3 font-semibold">User Details</div>
 					<div class="flex">
@@ -204,6 +204,12 @@
 					<div class="font-semibold">
 						ID: <span class="font-normal">{data.user.id}</span>
 					</div>
+					<div class="font-semibold">
+						Username: <span class="font-normal">{data.user.username}</span>
+					</div>
+					<div class="font-semibold">
+						Full Name: <span class="font-normal">{data.user.fullName}</span>
+					</div>
 					<div class="font-semibold">
 						Account active: <span class="material-symbols-outlined align-middle"
 							>{data.user.active ? 'check' : 'cancel'}</span
@@ -214,11 +220,11 @@
 							>{data.user.lastSignIn?.toLocaleDateString('en-US', dateFormatOptions)}</span
 						>
 					</div>
-					{#if !data.user.company?.id}
+					<!--{#if !data.user.company?.id}-->
-						<div class="pb-2 font-semibold">
+					<!--	<div class="pb-2 font-semibold">-->
-							Employer company: <span class="font-normal">N/A</span>
+					<!--		Employer company: <span class="font-normal">N/A</span>-->
-						</div>
+					<!--	</div>-->
-					{/if}
+					<!--{/if}-->
 					{#if data.user.company?.id}
 						<div class="font-semibold">
 							Employer company:
@@ -251,7 +257,7 @@
 								><span class="material-symbols-outlined align-middle">upload</span> Upload new version
 							</button>
 						{:else}
-							<div class="">No résumé submitted.</div>
+							<!--							<div class="">No résumé submitted.</div>-->
 							<button class="dull-primary-bg-color mb-1 rounded-md px-2.5 py-1" onclick={openUpload}
 								><span class="material-symbols-outlined align-middle">upload</span> Upload
 							</button>
@@ -263,7 +269,7 @@
 				</div>
 			</div>
 			{#if data.applications}
-				<div class="elevated separator-borders m-2 inline-block h-min w-full rounded">
+				<div class="elevated separator-borders m-2 ml-0 inline-block h-min w-full rounded">
 					<div class="p-3 font-semibold">Pending applications</div>
 					{#each data.applications as application}
 						<button class="top-border accordion flex justify-between p-2">

src/routes/postings/[posting]/+page.svelte

@@ -50,7 +50,7 @@
 					>
 				{/if}
 			</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 block" href="mailto:{data.posting.employer?.email}"

src/routes/postings/[posting]/apply/+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">Apply</div>
 			</div>
@@ -113,5 +131,8 @@
 				</button>
 			</form>
 		</div>
+		{#if !largeScreen.current}
+			{@render jobDetails()}
+		{/if}
 	</div>
 </div>

src/routes/signin/+page.svelte

@@ -28,8 +28,9 @@
 	let { data, form }: PageProps = $props();
 </script>
 
-<div class="signin-container place-items-center pt-8">
+<div class="signin-container">
-	<div class="separator-borders elevated content rounded-md p-8">
+	<div class="content my-2">
+		<div class="separator-borders elevated rounded-md px-2 py-8">
 			<h1 class="text-weight-semibold mb-4 text-center">Welcome Back!</h1>
 			<form class="arrange-vertically" method="POST" use:enhance>
 				<div class="bg-color my-2 rounded">
@@ -78,3 +79,4 @@
 			</form>
 		</div>
 	</div>
+</div>