improve position

z-korp · Nov 19, 2024 · 01f66b5 · 01f66b5
1 parent 18fa9c7
commit 01f66b5
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/client/src/ui/components/Tutorial/Tutorial.tsx b/client/src/ui/components/Tutorial/Tutorial.tsx
@@ -107,7 +107,7 @@ const Tutorial: React.FC<TutorialProps> = ({ showGrid, endTutorial }) => {
   if (!showGrid) return null;
 
   return (
-    <div className="flex flex-col items-center w-[500px] relative">
+    <div className="flex flex-col items-center w-[500px] relative h-full">
       {isIntermission && (
         <div className="absolute z-50 flex flex-col items-center p-6 bg-blue-600 rounded-lg shadow-md top-1/3">
           <h2 className="text-2xl font-bold mb-4">Congratulations!</h2>
@@ -123,7 +123,7 @@ const Tutorial: React.FC<TutorialProps> = ({ showGrid, endTutorial }) => {
         </div>
       )}
 
-      <div className="text-center p-4 bg-blue-600 rounded-md mb-4 absolute -left-[22%] mt-2 z-50">
+      <div className="text-center p-4 bg-blue-600 rounded-md mb-4 absolute mt-40 z-50">
         <h2>
           <TutorialMessage />
         </h2>

diff --git a/client/src/ui/screens/Home.tsx b/client/src/ui/screens/Home.tsx
@@ -297,8 +297,8 @@ export const Home = () => {
               ease: "easeInOut",
             }}
           >
-            <div className="relative flex flex-col gap-4 sm:gap-8 flex-grow items-center justify-start overflow-auto">
-              <div className="flex flex-col items-center gap-4 sm:gap-8 w-full max-w-4xl mt-2 sm:mt-4 p-2 md:p-0">
+            <div className="relative flex flex-col gap-4 sm:gap-8 flex-grow items-center justify-start overflow-auto h-full">
+              <div className="flex flex-col items-center gap-4 sm:gap-8 w-full max-w-4xl mt-2 sm:mt-4 p-2 md:p-0 h-full">
                 {tutorialState.isActive ? (
                   <Tutorial
                     showGrid={tutorialState.showGrid}