📱 updated desktop view

Co-authored-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>

frontend/src/components/form/footer/Footer.svelte

@@ -27,7 +27,7 @@
 
 </script>
 
-<div class="flex justify-center items-center gap-8 mt-8 md:mt-0">
+<div class="flex justify-center items-center gap-8 mt-8 md:mb-5">
     <button disabled={questionNum == 0} class={`flex items-center gap-2 text-primary font-semibold ${questionNum == 0 && "opacity-50"}`} on:click={() => gotoPrevPage(questionNum)}>
         <ArrowChevron width=16 direction="left"/>
         Forrige spørsmål

frontend/src/components/form/header/FormHeader.svelte

@@ -5,14 +5,14 @@
     export let questionNum:number
 </script>
 
-<div class="flex justify-center items-center md:h-20">
+<div class="flex justify-center items-center md:h-20 md:mt-5">
     <div class="hidden md:flex w-1/3"/>
     <div class="flex md:justify-center items-center md:w-2/3 gap-4">
         <h1 class="text-xl text-primary font-bold text-center">Spørsmål {Number(questionNum) + 1}</h1>
         <div class="border-r-2 border-primary min-h-24 h-full"></div>
         <p class="text-sm">{formQuestion}</p>
     </div>
-    <div class="hidden md:flex justify-end pr-20 items-center w-1/3">
+    <div class="flex justify-end md:pr-20 items-center md:w-1/3">
         <a class="-" href="/reportbug">
             <CircleExclamation width="16" height="16" />    
         </a>

frontend/src/routes/+layout.svelte

@@ -2,6 +2,6 @@
     import "../app.css";
 </script>
 
-<div class="bg-bg w-screen h-full px-8 md:px-28 py-6">
+<div class="bg-bg w-screen h-full px-8 md:px-16 lg:px-28 py-6 md:py-0">
     <slot />
 </div>

frontend/src/routes/+page.svelte

@@ -1,9 +1,9 @@
 <script>
 	import ButtonComponent from "../components/userform/inputs/ButtonComponent.svelte";
 </script>
-<div class="flex flex-col justify-between items-center h-full w-full">
+<div class="flex flex-col justify-between items-center h-full md:h-screen w-full">
     <div class="flex flex-col md:flex-row h-full w-full items-center">
-        <div class="flex flex-col w-11/12 md:w-3/5 gap-2 md:gap-4 md:px-32">
+        <div class="flex flex-col w-11/12 md:w-3/5 gap-2 md:gap-4">
             <h1 class="text-5xl md:text-7xl text-primary font-bold pb-2">Helseveileder</h1>
             <p>Vi utfører en undersøkelse om kunstig intelligens (AI) i medisin. Vi ønsker å forstå hvordan AI kan fungere som en copilot for leger og pasienter.</p>
             <p>Undersøkelsen er helt anonym.</p>
@@ -21,7 +21,7 @@
             </a>
         </div>
     </div>
-    <div class="flex justify-center items-center gap-20 md:gap-20 text-primary font-bold mt-10 md:mt-0">
+    <div class="flex justify-center items-center gap-20 md:gap-20 text-primary font-bold mt-10 md:mb-3">
         <button class="w-20"><a href="/personvern">Personvern</a></button>
         <button class="w-20"><a href="/info">Mer info</a></button>
     </div>

frontend/src/routes/form/[slug]/+page.svelte

@@ -63,7 +63,7 @@
     });
 </script>
 
-<div class="flex flex-col h-full gap-4">
+<div class="flex flex-col h-full md:h-screen gap-4">
     <FormHeader questionNum={questionNumber} formQuestion={formQuestion}/>
     <div class="flex flex-col md:flex-row h-full justify-between gap-12">
         {#key questionNumber}     

frontend/src/routes/userform/+page.svelte

@@ -28,8 +28,8 @@
     }
 </script>
 
-<div class="flex flex-col md:justify-center gap-6 md:gap-20 h-full">
+<div class="flex flex-col md:justify-center gap-6 md:gap-20 h-full md:h-screen">
-    <a class="md:ml-32" href="/">
+    <a class="md:ml-32 mt-5" href="/">
         <ArrowBack width="2rem" />
     </a>
     <div class="flex flex-col md:flex-row h-full md:h-4/5 gap-6">
@@ -47,7 +47,7 @@
             <UserFormInput formData={has_answered_before} on:update={(e) => has_answered_before = e.detail} inputType="radio" label="Jeg har svart på denne undersøkelsen tidligere" options={["Ja", "Nei"]}/>
         </div>
     </div>
-    <div class="flex justify-center items-center gap-8 text-primary font-bold py-10 md:py-0">
+    <div class="flex justify-center items-center gap-8 text-primary font-bold py-10 md:pb-4">
         <ButtonComponent text="Start undersøkelse" filled={true} onclick={() => handleUserformSubmit(age, education, healthcare_personnel, gender, has_answered_before, county)} />
     </div>
 </div>