From 2fa42a4a46c7ceb5ec4dc861d4d973eef2db4e72 Mon Sep 17 00:00:00 2001
From: Asim Shrestha <asim.shrestha@hotmail.com>
Date: Sat, 8 Apr 2023 16:51:51 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20Adjust=20margins?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ChatWindow.tsx | 4 ++--
 src/pages/index.tsx           | 2 +-
 tailwind.config.cjs           | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ChatWindow.tsx b/src/components/ChatWindow.tsx
index b6adb3b..068fc4d 100644
--- a/src/components/ChatWindow.tsx
+++ b/src/components/ChatWindow.tsx
@@ -47,7 +47,7 @@ const ChatWindow = ({ messages, children, className }: ChatWindowProps) => {
     >
       <MacWindowHeader />
       <div
-        className="mb-3 mr-3 h-[10em] overflow-y-auto overflow-x-hidden sm-h:h-[15em] md-h:h-[20em] lg-h:h-[30em] "
+        className="mb-2 mr-2 h-[11em] overflow-y-auto overflow-x-hidden sm-h:h-[16em] md-h:h-[21em] lg-h:h-[30em] "
         ref={scrollRef}
         onScroll={handleScroll}
       >
@@ -86,7 +86,7 @@ const MacWindowHeader = () => {
 
 const ChatMessage = ({ message }: { message: Message }) => {
   return (
-    <div className="mx-4 my-1 rounded-lg border-[2px] border-white/10 bg-white/20 p-3 font-mono text-sm hover:border-[#1E88E5]/40 sm:text-base">
+    <div className="mx-2 my-1 rounded-lg border-[2px] border-white/10 bg-white/20 p-2 font-mono text-sm hover:border-[#1E88E5]/40 sm:mx-4 sm:p-3 sm:text-base">
       <div className="mr-2 inline-block h-[0.9em]">
         {getMessageIcon(message)}
       </div>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 6bc5bac..3527e55 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -50,7 +50,7 @@ const Home: NextPage = () => {
         <Drawer handleHelp={() => setShowModal(true)} />
         <div
           id="content"
-          className="z-10 flex h-screen w-full items-center justify-center p-2 px-4"
+          className="z-10 flex h-screen w-full items-center justify-center p-2 px-2 sm:px-4 md:px-10"
         >
           <div
             id="layout"
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 8e7db72..cd14342 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -8,7 +8,7 @@ module.exports = {
       "xs": "300px",
 
       "sm-h": { "raw": "(min-height: 700px)" },
-      "md-h": { "raw": "(min-height: 900px)" },
+      "md-h": { "raw": "(min-height: 800px)" },
       "lg-h": { "raw": "(min-height: 1000px)" },
 
       ...defaultTheme.screens