fix mobile account

src/routes/+layout.svelte

@@ -117,14 +117,12 @@
 		</div>
 		<div id="mobile-menu" class="hidden">
 			{#if (userState.perms & PERMISSIONS.VIEW) > 0}
-				<a
+				<a href="/postings" class="hover-bg-color mr-1 block px-3 py-2 text-sm" onclick={toggleMenu}
-					href="/postings"
+					>Postings</a
-					class="hover-bg-color mr-1 block rounded px-3 py-2 text-sm"
-					onclick={toggleMenu}>Postings</a
 				>
 				<a
 					href="/companies"
-					class="hover-bg-color mr-1 block rounded px-3 py-2 text-sm"
+					class="hover-bg-color mr-1 block px-3 py-2 text-sm"
 					onclick={toggleMenu}>Companies</a
 				>
 			{/if}
@@ -140,10 +138,21 @@
 								(userState.perms & PERMISSIONS.MANAGE_COMPANIES) > 0
 								? '/admin/companies'
 								: '/admin'}
-					class="hover-bg-color mr-1 block rounded px-3 py-2 text-sm"
+					class="hover-bg-color mr-1 block px-3 py-2 text-sm"
 					onclick={toggleMenu}>Administration</a
 				>
 			{/if}
+			<a
+				class="hover-bg-color block h-min p-1 pr-2 align-top"
+				href={userState.id !== null ? '/account' : '/signin'}
+			>
+				<span class="material-symbols-outlined h-min align-top">
+					{userState.id !== null ? 'account_circle' : 'login'}
+				</span>
+				<span class="h-min align-top text-sm">
+					{userState.id !== null ? 'Account' : 'Sign-in'}
+				</span>
+			</a>
 		</div>
 	</nav>
 

src/routes/account/+page.svelte

@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 	import type { PageProps } from './$types';
 	import type { Company } from '$lib/types';
+	import { MediaQuery } from 'svelte/reactivity';
 
 	let applicationToDelete: number = $state(0);
 	let { data }: PageProps = $props();
@@ -138,10 +139,13 @@
 			console.error('Error uploading file:', error);
 		}
 	}
+
+	const largeScreen = new MediaQuery('min-width: 640px');
 </script>
 
 <div class="base-container">
 	<div class="content flex py-4">
+		{#if largeScreen.current}
 			<div class="elevated separator-borders m-2 inline-block h-min min-w-max rounded align-top">
 				<div class="inline-block p-4">
 					<img
@@ -182,6 +186,7 @@
 					</div>
 				{/if}
 			</div>
+		{/if}
 		<div class="inline-block w-full">
 			<div class="elevated separator-borders m-2 h-min w-full rounded">
 				<div class="bottom-border flex place-content-between">
@@ -261,34 +266,35 @@
 				<div class="elevated separator-borders m-2 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 flex justify-between p-2 accordion">
+						<button class="top-border accordion flex justify-between p-2">
 							<div class="inline-block">
-								<div class="font-semibold text-left">
+								<div class="text-left font-semibold">
 									Applied to: <a
 										class="hover-hyperlink font-normal"
 										href="/postings/{application.postingId}">{application.postingTitle}</a
 									>
 								</div>
-								<div class="font-semibold text-left">
+								<div class="text-left font-semibold">
 									Applied on: <span class="font-normal"
 										>{application.createdAt.toLocaleDateString('en-US', dateFormatOptions)}</span
 									>
 								</div>
 							</div>
-							<div class="material-symbols-outlined align-top pt-3 pr-3">arrow_drop_down</div>
+							<div class="material-symbols-outlined pr-3 pt-3 align-top">arrow_drop_down</div>
 						</button>
-						<div class="panel hidden p-2 justify-between">
+						<div class="panel hidden justify-between p-2">
 							<div class="inline-block">
-
 								<!--							<h2>Candidate Statement</h2>-->
 								<h3 class="low-emphasis-text">
 									Why do you believe you are the best fit for this role?
 								</h3>
 								<p class="whitespace-pre-wrap">{application.candidateStatement}</p>
 							</div>
-							<div class="mt-3 mr-3">
+							<div class="mr-3 mt-3">
-
+								<a
-							<a href="account/editapplication?id={application.id}" class="mr-3 material-symbols-outlined hyperlink-color">edit</a>
+									href="account/editapplication?id={application.id}"
+									class="material-symbols-outlined hyperlink-color mr-3">edit</a
+								>
 								<button
 									class="material-symbols-outlined danger-color inline-block"
 									onclick={() => {

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

@@ -88,7 +88,7 @@
 
 <div class="base-container">
 	<div class="content">
-		<div class="elevated separator-borders m-4 rounded">
+		<div class="elevated separator-borders my-2 rounded">
 			<div class="bottom-border flex place-content-between">
 				<div class="p-3 font-semibold">Edit Account</div>
 			</div>