Merge pull request #214 from SanadKhan/feature/loginpage-responsive

feat:implemented login page responsiveness
gitroomhq · Sep 10, 2024 · 305115e · 305115e
2 parents 7a86311 + b2e53bd
commit 305115e
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/apps/frontend/src/app/auth/layout.tsx b/apps/frontend/src/app/auth/layout.tsx
@@ -17,8 +17,8 @@ export default async function AuthLayout({
     <>
       <ReturnUrlComponent />
       <div className="absolute left-0 top-0 z-[0] h-[100vh] w-[100vw] overflow-hidden bg-loginBg bg-contain bg-no-repeat bg-left-top" />
-      <div className="relative z-[1] pr-[100px] flex justify-end items-center h-[100vh] w-[100vw] overflow-hidden">
-        <div className="w-[557px] flex h-[614px] bg-loginBox bg-contain">
+      <div className="relative z-[1] px-3 lg:pr-[100px] xs:mt-[70px] flex justify-center lg:justify-end items-center h-[100vh] w-[100vw] overflow-hidden">
+        <div className="w-full max-w-lg h-[614px] flex flex-col bg-loginBox bg-no-repeat bg-contain">
           <div className="w-full relative">
             <div className="custom:fixed custom:text-left custom:left-[20px] custom:justify-start custom:top-[20px] absolute -top-[100px] text-textColor justify-center items-center w-full flex gap-[10px]">
               <Image
@@ -61,7 +61,7 @@ export default async function AuthLayout({
               </div>
             </div>
           </div>
-          <div className="p-[32px] absolute w-[557px] h-[614px] text-textColor">
+          <div className="p-[32px] w-full h-[614px] text-textColor">
             {children}
           </div>
           <div className="flex flex-1 flex-col">

diff --git a/apps/frontend/tailwind.config.js b/apps/frontend/tailwind.config.js
@@ -149,6 +149,7 @@ module.exports = {
       }),
       screens: {
         custom: { raw: '(max-height: 800px)' },
+        xs: { max: '401px'} ,
       },
     },
   },
-Original file line number
+Diff line change
@@ Expand Up / @@ -149,6 +149,7 @@ module.exports = { @@
           }),
           screens: {
             custom: { raw: '(max-height: 800px)' },
+            xs: { max: '401px'} ,
           },
         },
       },
@@ Expand Down @@