feat: improve responsivness

frontend/src/lib/components/dashboard/CoverLetterUploadCard.svelte

@@ -4,6 +4,7 @@
 	import DashboardUploadCard from './DashboardUploadCard.svelte';
 	import type { ApiError } from '$lib/@api';
 
+	export let compact: boolean = false;
 	let error: string | null = null;
 
 	const onFileDrop = async (detail: any) => {
@@ -26,6 +27,7 @@
 
 <DashboardUploadCard
 	{error}
+	compact
 	on:filedrop={(e) => onFileDrop(e.detail)}
 	on:delete={onDelete}
 	title="Motivační dopis"

frontend/src/lib/components/dashboard/DashboardInfoCard.svelte

@@ -108,7 +108,7 @@
 				showOnCreate: false,
 				delay: 0
 			}}
-		 class="ml-10 flex flex-col justify-around mt-10">
+		 class="ml-10 <xl:ml-4 flex flex-col justify-around mt-10">
 			{#each $candidateData.parents as parent}
 			<div class="flex flex-col">
 				<span class="font-bold text-sspsBlue text-xl">{parent.name + " " + parent.surname}</span>

frontend/src/lib/components/dashboard/DashboardUploadCard.svelte

@@ -20,6 +20,7 @@
 	export let filesize: number;
 	export let fileType: number;
 	export let placeholder: string = '';
+	export let compact: boolean = false;
 
 	let fileDropped: boolean = false;
 	let progress: number = 1;
@@ -101,9 +102,11 @@
 <div class="card uploadCard relative">
 	<div class="header">
 		<h3 class="mb-4 sm:mb-0">{title}</h3>
-		<div class="mb-4 mt-1 sm:mb-0 sm:mt-0">
-			<FileType {filetype} filesize={filesize + ' MB'} />
-		</div>
+		{#if !compact}
+			<div class="mb-4 mt-1 sm:mb-0 sm:mt-0">
+				<FileType {filetype} filesize={filesize + ' MB'} />
+			</div>
+		{/if}
 		<div class="absolute right-0 top-4 flex items-center px-7">
 			{#if status === 'uploaded'}
 				<button
@@ -116,24 +119,26 @@
 	</div>
 	{#if fileDropped &&  error === null}
 		<div class="body uploaded flex content-around items-center justify-between">
-			<div class="w-24">
-				<img
-					class="w-full object-scale-down"
-					src={filetype == 'PDF' ? documentIcon : archiveIcon}
-					alt="Icon"
-				/>
-			</div>
-			<svg class="h-25 hidden xl:block" viewBox="0 0 2 40" xmlns="http://www.w3.org/2000/svg"
-				><line
-					x1="0"
-					y="0"
-					x2="0"
-					y2="40"
-					stroke="#406280ff"
-					stroke-width="2"
-					stroke-dasharray="3"
-				/></svg
-			>
+			{#if !compact}
+				<div class="w-24">
+					<img
+						class="w-full object-scale-down"
+						src={filetype == 'PDF' ? documentIcon : archiveIcon}
+						alt="Icon"
+					/>
+				</div>
+				<svg class="h-25 hidden xl:block" viewBox="0 0 2 40" xmlns="http://www.w3.org/2000/svg"
+					><line
+						x1="0"
+						y="0"
+						x2="0"
+						y2="40"
+						stroke="#406280ff"
+						stroke-width="2"
+						stroke-dasharray="3"
+					/></svg
+				>
+			{/if}
 			<div class="hidden items-center xl:block">
 				{#if bytesTotal === 0 || Math.round(progress * 100) === 100}
 					<h2 class="text-xl font-bold">{status === 'submitted' ? 'Odesláno' : 'Nahráno'}</h2>

frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte

@@ -36,14 +36,14 @@
 
 <FullLayout>
 	<div class="dashboard dashboardDesktop">
-		<div class="movable name col-span-5" class:col-span-5={showDetails} class:col-span-3={!showDetails}>
+		<div class="movable name col-span-3" class:showDetailsInfoCard={showDetails}>
 			<DashboardInfoCard bind:showDetails={showDetails} status={getUploadStatus($submissionProgress.status)} title={$candidateData.candidate.name + ' ' + $candidateData.candidate.surname ?? ''}>
 				<span class="text-sspsBlue mt-3 truncate">{$candidateData.candidate.email}</span>
 				<span class="text-sspsGray mt-3 text-xs">Uchazeč na SSPŠ</span>
 			</DashboardInfoCard>
 		</div>
-		<div class="movable coverletter" class:col-span-3={showDetails} class:col-span-5={!showDetails}>
-			<CoverLetterUploadCard />
+		<div class="movable coverletter col-span-5" class:showDetailsUploadCard={showDetails}>
+			<CoverLetterUploadCard compact={showDetails} />
 		</div>
 		<div class="portfolio col-span-4">
 			<PortfolioLetterUploadCard />
@@ -80,6 +80,12 @@
 </FullLayout>
 
 <style>
+	.showDetailsInfoCard {
+		@apply col-span-5 <2xl: col-span-6;
+	}
+	.showDetailsUploadCard {
+		@apply col-span-3 <2xl: col-span-2;
+	}
 	.dashboardDesktop {
 		@apply h-[85vh] w-[85vw];
 		@apply hidden grid-cols-8 grid-rows-2 gap-10 md:grid;