From 182d680eb3d523797940076cc2a60110f49de072 Mon Sep 17 00:00:00 2001
From: Jurre Brandsen <jurre.brandsen@infosupport.com>
Date: Thu, 4 Apr 2024 17:32:36 +0200
Subject: [PATCH] mobile UI

---
 src/app/layout.tsx                             | 4 ++--
 src/app/page.tsx                               | 2 +-
 src/components/additional-buttons-homepage.tsx | 2 +-
 src/components/select-role.tsx                 | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 5ae5293..5fa92be 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -48,8 +48,8 @@ export default async function RootLayout({
           disableTransitionOnChange
         >
           <TRPCReactProvider>
-            <main className="flex min-h-screen items-center justify-center">
-              <div className="absolute right-4 top-4 z-50 flex items-center space-x-4">
+            <main className="min-h-screen items-center justify-center">
+              <div className="absolute right-4 top-4 z-50 flex space-x-4">
                 {session && (
                   <Suspense fallback={<ButtonSkeleton />}>
                     <LoginWrapper session={session} />
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 00fdb59..6de5b21 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -12,7 +12,7 @@ const Home: React.FC = async () => {
 
   return (
     <div>
-      <div className="container flex flex-col items-center justify-center px-4 py-16">
+      <div className="mx-auto py-16 sm:px-4 sm:py-16 md:px-8 lg:px-16">
         <h1 className="text-center text-5xl font-extrabold tracking-tight">
           Welcome to the{" "}
           <span className="block text-custom-primary sm:inline">
diff --git a/src/components/additional-buttons-homepage.tsx b/src/components/additional-buttons-homepage.tsx
index 52b11ac..9dd0fa0 100644
--- a/src/components/additional-buttons-homepage.tsx
+++ b/src/components/additional-buttons-homepage.tsx
@@ -9,7 +9,7 @@ import { signIn } from "next-auth/react";
 const Buttons = ({ session }: { session: Session | null }) => {
   return (
     <div className="mt-5 flex justify-center">
-      <div className="mt-5 flex flex-row items-center gap-6">
+      <div className="mt-5 flex flex-col items-center gap-6 md:flex-row">
         <Login session={session} text="Go to survey" />
         <Button
           onClick={() => signIn("azure-ad", { callbackUrl: "/result/general" })}
diff --git a/src/components/select-role.tsx b/src/components/select-role.tsx
index 9f0de4a..1708cb2 100644
--- a/src/components/select-role.tsx
+++ b/src/components/select-role.tsx
@@ -120,7 +120,7 @@ export default function SelectRoles({
       </ul>
 
       <div className="mt-5 flex justify-center">
-        <div className="mt-5 flex flex-row items-center gap-6">
+        <div className="mt-5 flex flex-col items-center gap-6 md:flex-row">
           <div className="flex">
             <Button
               onClick={handleSetGeneralRole}