From 66e956f021386ebf76561c4b8421b961bf761ec2 Mon Sep 17 00:00:00 2001
From: tonym <anthonymoon61@gmail.com>
Date: Wed, 14 Jan 2026 19:59:38 -0600
Subject: [PATCH] feat: Add layout max-width for better UX on wide screens (#4)

Changes:
- Add 1400px max-width container in SpoolmanLayout
- Add 800px max-width for forms via CSS override

This prevents the UI from feeling too spread out on wide monitors
and MacBooks, improving readability and reducing eye movement.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 client/src/components/layout.tsx | 9 ++++++++-
 client/src/utils/overrides.css   | 5 +++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/client/src/components/layout.tsx b/client/src/components/layout.tsx
index d76ef75..c2412de 100644
--- a/client/src/components/layout.tsx
+++ b/client/src/components/layout.tsx
@@ -61,6 +61,13 @@ export const SpoolmanLayout: React.FC<SpoolmanLayoutProps> = ({ children }) => (
     )}
     Footer={() => <SpoolmanFooter />}
   >
-    {children}
+    <div
+      style={{
+        maxWidth: 1400,
+        margin: "0 auto",
+      }}
+    >
+      {children}
+    </div>
   </ThemedLayout>
 );
diff --git a/client/src/utils/overrides.css b/client/src/utils/overrides.css
index f353989..5139cdf 100644
--- a/client/src/utils/overrides.css
+++ b/client/src/utils/overrides.css
@@ -1,3 +1,8 @@
 #qty-input {
   text-align: center !important;
 }
+
+/* Constrain form width for better readability on wide screens */
+.ant-form {
+  max-width: 800px;
+}