From d7700a68fd404c51a861acff88f785fae38ed926 Mon Sep 17 00:00:00 2001
From: poduck <poduck@smoothschedule.com>
Date: Sat, 27 Dec 2025 11:35:29 -0500
Subject: [PATCH] Fix POS layout overflow by using h-full instead of h-screen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

POSLayout was using h-screen which made it 100vh tall, but it's nested
inside a flex container that already accounts for POSHeader height.
Changed to h-full so it properly fills the available space.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/pos/components/POSLayout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pos/components/POSLayout.tsx b/frontend/src/pos/components/POSLayout.tsx
index 4ec47528..2a09f462 100644
--- a/frontend/src/pos/components/POSLayout.tsx
+++ b/frontend/src/pos/components/POSLayout.tsx
@@ -199,7 +199,7 @@ const POSLayout: React.FC<POSLayoutProps> = ({ children }) => {
   }
 
   return (
-    <div className="h-screen flex flex-col bg-gray-50">
+    <div className="h-full flex flex-col bg-gray-50">
       {/* Top Bar */}
       <header className="bg-white border-b border-gray-200 px-4 py-3 flex items-center justify-between shadow-sm">
         <div className="flex items-center gap-4">