From 26e64449f9f7b09ab571b404315374ba6fc95390 Mon Sep 17 00:00:00 2001
From: falendikategar <falendikapratama@gmail.com>
Date: Fri, 6 Sep 2024 09:27:51 +0700
Subject: [PATCH] fix: Responsive Design for wide viewing

---
 apps/frontend/src/routes/login/index.lazy.tsx |  4 ++--
 apps/frontend/tailwind.config.js              | 17 ++++++++---------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/apps/frontend/src/routes/login/index.lazy.tsx b/apps/frontend/src/routes/login/index.lazy.tsx
index 17cc30b..5439e1e 100644
--- a/apps/frontend/src/routes/login/index.lazy.tsx
+++ b/apps/frontend/src/routes/login/index.lazy.tsx
@@ -111,9 +111,9 @@ export default function LoginPage() {
 					</div>
 				</div>
 			</div>
-			<div className="w-screen h-screen flex ml-0 lg:ml-28 justify-center lg:justify-start items-center"> 
+			<div className="w-screen h-screen flex ml-0 lg:ml-28 3xl:ml-96 4xl:ml-[48rem] justify-center lg:justify-start items-center"> 
 				<Card className="w-[19.125rem] sm:w-[26.063rem] lg:w-auto h-auto bg-transparent border-none shadow-none">
-					<h1 className="mb-2 text-[2.625rem] font-bold leading-[3.177rem] tracking-tight">Sign In</h1>
+					<h1 className="mb-2 text-[2.625rem] font-bold leading-[3.177rem] tracking-tighter">Sign In</h1>
 					<p className="text-sm mb-10 leading-4 text-muted-foreground">
 						New to this app?{' '}
 						<a
diff --git a/apps/frontend/tailwind.config.js b/apps/frontend/tailwind.config.js
index 51535f1..6b7f56e 100644
--- a/apps/frontend/tailwind.config.js
+++ b/apps/frontend/tailwind.config.js
@@ -72,15 +72,14 @@ module.exports = {
         "accordion-up": "accordion-up 0.2s ease-out",
       },
     },
-    letterSpacing: {
-      tightest: '-.075em',
-      tighter: '-.05em',
-      tight: '-.025em',
-      normal: '0',
-      wide: '.025em',
-      wider: '.05em',
-      widest: '.1em',
-      widest: '.25em',
+    screens: {
+      'sm': '640px',
+      'md': '768px',
+      'lg': '1024px',
+      'xl': '1280px',
+      '2xl': '1536px',
+      '3xl': '2048px',
+      '4xl': '3060px',
     },
   },
   plugins: [require("tailwindcss-animate")],