Fix paddings

eduardconstantin · eduardconstantin · commit ef8fbedc1599 · 2024-03-26T16:43:51.000Z
diff --git a/app/exam/page.tsx b/app/exam/page.tsx
@@ -92,7 +92,7 @@ const Exam: NextPage<{ searchParams: { url: string; name: string } }> = ({
   const numberOfQuestions = data.randomQuestions.length || 0;
 
   return (
-    <div className="py-10 px-5 mx-auto w-5/6 sm:w-1/2 bg-slate-800 border-2 border-slate-700 rounded-lg">
+    <div className="py-10 px-5 mb-6 mx-auto w-5/6 sm:w-1/2 bg-slate-800 border-2 border-slate-700 rounded-lg">
       <div>
         <div className="px-2 sm:px-10 w-full flex flex-row justify-between items-center">
           <p className="text-white font-bold text-sm sm:text-2xl">
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -24,7 +24,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
       <body className="bg-slate-900">
         <ApolloProvider>
           <TopNav />
-          <main className="flex flex-col justify-between md:h-[calc(100vh-2.5rem-64px)]">
+          <main className="flex flex-col justify-between md:h-[calc(100vh-2.5rem-64px)] h-full">
             {children}
             <Footer />
             <Cookie />
diff --git a/app/modes/layout.tsx b/app/modes/layout.tsx
@@ -14,9 +14,5 @@ type ModesLayoutProps = {
 };
 
 export default function ModesLayout({ children }: ModesLayoutProps) {
-  return (
-    <main className="flex flex-col justify-between h-[calc(100vh-2.5rem-64px)]">
-      {children}
-    </main>
-  );
+  return <>{children}</>;
 }
diff --git a/app/modes/page.tsx b/app/modes/page.tsx
@@ -7,8 +7,8 @@ const Modes: NextPage<{ searchParams: { url: string; name: string } }> = ({
   const { url, name } = searchParams;
 
   return (
-    <div className="mx-auto w-5/6 sm:w-2/3 lg:w-2/3 xl:w-2/4 text-center">
-      <h2 className="text-white text-4xl text-leading font-bold uppercase mt-14">
+    <div className="mx-auto mb-6 w-5/6 sm:w-2/3 lg:w-2/3 xl:w-2/4 text-center">
+      <h2 className="text-white text-4xl text-leading font-bold uppercase md:mt-14">
         {name}
       </h2>
       <p className="text-white text-lg mt-4 mb-14 px-5 leading-6">
diff --git a/app/page.tsx b/app/page.tsx
@@ -4,8 +4,8 @@ import exams from "@azure-fundamentals/lib/exams.json";
 
 const Home: NextPage = () => {
   return (
-    <div className="mx-auto w-5/6 sm:w-2/3 lg:w-2/3 xl:w-2/4 text-center">
-      <h2 className="text-white text-5xl text-leading font-bold uppercase mt-14">
+    <div className="mx-auto mb-6 w-5/6 sm:w-2/3 lg:w-2/3 xl:w-2/4 text-center">
+      <h2 className="text-white text-5xl text-leading font-bold uppercase md:mt-14">
         Welcome!
       </h2>
       <p className="text-white text-lg mt-4 mb-14 px-5 leading-6">
diff --git a/app/practice/page.tsx b/app/practice/page.tsx
@@ -58,7 +58,7 @@ const Practice: NextPage<{ searchParams: { url: string; name: string } }> = ({
   if (questionsError) return <p>Oh no... {questionsError.message}</p>;
 
   return (
-    <div className="py-10 px-5 sm:p-10 mx-auto w-5/6 sm:w-1/2 bg-slate-800 border-2 border-slate-700 rounded-lg">
+    <div className="py-10 px-5 mb-6 sm:p-10 mx-auto w-5/6 sm:w-1/2 bg-slate-800 border-2 border-slate-700 rounded-lg">
       <QuizForm
         isLoading={loading || questionsLoading}
         questionSet={data?.questionById}
diff --git a/components/QuizForm.tsx b/components/QuizForm.tsx
@@ -145,7 +145,7 @@ const QuizForm: FC<Props> = ({
             </svg>
           </button>
         </div>
-        <p className="text-white px-12 pt-10 pb-5 select-none">{question}</p>
+        <p className="text-white md:px-12 pt-10 pb-5 select-none">{question}</p>
         {images.length !== 0 && (
           <ul className="flex flex-row justify-center gap-2 mt-5 mb-8 select-none md:px-12 px-0">
             {images.map((image) => (
