🐛 FIX: Fix layout in main page

All-Khwarizmi · Mar 19, 2024 · d57e467 · d57e467
1 parent d75bf1b
commit d57e467
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 28 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -102,9 +102,7 @@ body {
 
 body {
   height: 100vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+
 }
 
 a {
@@ -131,7 +129,6 @@ body {
 body {
   -ms-overflow-style: none; /* for Internet Explorer, Edge */
   scrollbar-width: none; /* for Firefox */
-  overflow-y: scroll;
 }
 body::-webkit-scrollbar {
   display: none; /* for Chrome, Safari, and Opera */

diff --git a/src/components/Main.tsx b/src/components/Main.tsx
@@ -40,29 +40,30 @@ export default function Main() {
   return (
     <>
       <Header />
-
-      <TitleAndDirection
-        isFr={isFr}
-        setIsFR={setIsFR}
-        isTranslations={isTranslations}
-      />
-
-      <section className="flex flex-col items-center gap-5">
-        {isLoading ? <LoadingGlass /> : null}
-
-        <TranslationTable
-          translations={translations}
-          isLoading={isLoading}
+      <main className="pt-40 md:pt-24 h-full w-full flex flex-col  items-center">
+        <TitleAndDirection
+          isFr={isFr}
+          setIsFR={setIsFR}
           isTranslations={isTranslations}
         />
-        <SearchForm
-          isLoading={isLoading}
-          handleSubmission={handleSubmission}
-          handleInputWord={handleInputWord}
-          word={word}
-        />
-      </section>
-      <Footer />
+
+        <section className="h-full w-full flex flex-col items-center md:justify-center gap-5 ">
+          {isLoading ? <LoadingGlass /> : null}
+
+          <TranslationTable
+            translations={translations}
+            isLoading={isLoading}
+            isTranslations={isTranslations}
+          />
+          <SearchForm
+            isLoading={isLoading}
+            handleSubmission={handleSubmission}
+            handleInputWord={handleInputWord}
+            word={word}
+          />
+        </section>
+        <Footer />
+      </main>
     </>
   );
 }
diff --git a/src/components/TranslationDirection.tsx b/src/components/TranslationDirection.tsx
@@ -14,15 +14,15 @@ export function TitleAndDirection({
   isTranslations,
 }: TranslationDirectionProps) {
   return (
-    <section className="flex flex-col h-[20%] items-center gap-5">
+    <section className="flex flex-col w-full h-full justify-end md:justify-center items-center gap-5 ">
       <Title title="Dico" />
       <div className="grid place-items-center  w-full  ">
         {isFr ? (
           <div
             className={`grid gap-2 grid-cols-3 ${
               isTranslations
                 ? "w-[80%] md:w-[30%]"
-                : "w-[40%] md:w-[20%]   sm:w-[30%] "
+                : "w-[60%] md:w-[20%]   sm:w-[30%] "
             }  place-items-center  `}
           >
             <button onClick={() => setIsFR(!isFr)}>
@@ -40,7 +40,7 @@ export function TitleAndDirection({
             className={`grid gap-2 grid-cols-3 ${
               isTranslations
                 ? "w-[80%] md:w-[30%]"
-                : "w-[40%] md:w-[20%]   sm:w-[30%] "
+                : "w-[60%] md:w-[20%]   sm:w-[30%] "
             }  place-items-center  `}
           >
             <button onClick={() => setIsFR(!isFr)}>