From 918924874b5d1599b5fe012e65c8598114ed609e Mon Sep 17 00:00:00 2001
From: Alexander Daichendt <git@daichendt.one>
Date: Thu, 13 Feb 2025 15:28:18 +0100
Subject: [PATCH] fix: tiny layout inconsistency on mobile

---
 client/src/components/Layout.tsx         | 2 +-
 client/src/components/MessageDisplay.tsx | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Layout.tsx b/client/src/components/Layout.tsx
index 2c49006..bdc80bf 100644
--- a/client/src/components/Layout.tsx
+++ b/client/src/components/Layout.tsx
@@ -5,7 +5,7 @@ interface LayoutProps {
 function Layout({ children }: LayoutProps) {
   return (
     <>
-      <main className="min-h-screen p-1 sm:p-4">
+      <main className="min-h-screen p-1 py-4 sm:p-4">
         <header className="top-0 w-full bg-white" role="banner">
           <h1 className="text-3xl text-center mb-3">Simple Chat</h1>
         </header>
diff --git a/client/src/components/MessageDisplay.tsx b/client/src/components/MessageDisplay.tsx
index f2ff888..784db63 100644
--- a/client/src/components/MessageDisplay.tsx
+++ b/client/src/components/MessageDisplay.tsx
@@ -92,6 +92,7 @@ function MessageDisplay({ sendMessage }: MessageDisplayProps) {
             width={width}
             itemCount={state.messages.length}
             itemSize={90} // sadly, this will make the system messages really tall. apparently its non trivial to fix that
+            overscanCount={5}
           >
             {Row}
           </List>