From e8dd0b469cd07eb4fcdc8e5a5b3fa89daba13e3e Mon Sep 17 00:00:00 2001
From: Michael Ramos <mdramos8@gmail.com>
Date: Tue, 6 Jan 2026 14:47:13 -0800
Subject: [PATCH] Fix responsive width for laptop screens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Restore max-w-3xl as default width, only widen on larger screens:
- Default: max-w-3xl (768px) for laptops
- xl (1280px+): max-w-5xl for external monitors
- 2xl (1536px+): max-w-6xl for large desktops

Bumps version to 0.4.3.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 apps/opencode-plugin/package.json      | 2 +-
 package.json                           | 2 +-
 packages/editor/App.tsx                | 2 +-
 packages/server/package.json           | 2 +-
 packages/ui/components/DecisionBar.tsx | 2 +-
 packages/ui/components/Viewer.tsx      | 4 ++--
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/opencode-plugin/package.json b/apps/opencode-plugin/package.json
index 43d0b02f..a68c157b 100644
--- a/apps/opencode-plugin/package.json
+++ b/apps/opencode-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@plannotator/opencode",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "Plannotator plugin for OpenCode - interactive plan review with visual annotation",
   "author": "backnotprop",
   "license": "BSL-1.1",
diff --git a/package.json b/package.json
index c68573ff..9de3b4b4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "plannotator",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "private": true,
   "description": "Interactive Plan Review for Claude Code - annotate plans visually, share with team, automatically send feedback",
   "author": "backnotprop",
diff --git a/packages/editor/App.tsx b/packages/editor/App.tsx
index 929598e0..1d4d115a 100644
--- a/packages/editor/App.tsx
+++ b/packages/editor/App.tsx
@@ -636,7 +636,7 @@ const App: React.FC = () => {
           <main className="flex-1 overflow-y-auto bg-grid">
             <div className="min-h-full flex flex-col items-center px-4 py-3 md:px-10 md:py-8 xl:px-16">
               {/* Mode Switcher */}
-              <div className="w-full max-w-5xl xl:max-w-6xl mb-3 md:mb-4 flex justify-start">
+              <div className="w-full max-w-3xl xl:max-w-5xl 2xl:max-w-6xl mb-3 md:mb-4 flex justify-start">
                 <ModeSwitcher mode={editorMode} onChange={setEditorMode} taterMode={taterMode} />
               </div>
 
diff --git a/packages/server/package.json b/packages/server/package.json
index de03d568..02f1f821 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@plannotator/server",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "private": true,
   "description": "Shared server implementation for Plannotator plugins",
   "main": "index.ts",
diff --git a/packages/ui/components/DecisionBar.tsx b/packages/ui/components/DecisionBar.tsx
index 4a66714c..01c0b6e9 100644
--- a/packages/ui/components/DecisionBar.tsx
+++ b/packages/ui/components/DecisionBar.tsx
@@ -85,7 +85,7 @@ export const DecisionBar: React.FC<DecisionBarProps> = ({
 
   return (
     <div className="fixed bottom-0 left-0 right-0 p-4 bg-card/95 backdrop-blur-xl border-t border-border z-50">
-      <div className="max-w-5xl xl:max-w-6xl mx-auto flex items-center gap-4">
+      <div className="max-w-3xl xl:max-w-5xl 2xl:max-w-6xl mx-auto flex items-center gap-4">
         {/* Status info */}
         <div className="flex-1 text-sm text-muted-foreground">
           {annotationCount > 0 ? (
diff --git a/packages/ui/components/Viewer.tsx b/packages/ui/components/Viewer.tsx
index 09a722d6..bff3afaa 100644
--- a/packages/ui/components/Viewer.tsx
+++ b/packages/ui/components/Viewer.tsx
@@ -517,11 +517,11 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
   };
 
   return (
-    <div className="relative z-50 w-full max-w-5xl xl:max-w-6xl">
+    <div className="relative z-50 w-full max-w-3xl xl:max-w-5xl 2xl:max-w-6xl">
       {taterMode && <TaterSpriteSitting />}
       <article
         ref={containerRef}
-        className="w-full max-w-5xl xl:max-w-6xl bg-card border border-border/50 rounded-xl shadow-xl p-5 md:p-8 lg:p-10 xl:p-12 relative"
+        className="w-full max-w-3xl xl:max-w-5xl 2xl:max-w-6xl bg-card border border-border/50 rounded-xl shadow-xl p-5 md:p-8 lg:p-10 xl:p-12 relative"
       >
         {/* Header buttons */}
         <div className="absolute top-3 right-3 md:top-5 md:right-5 flex items-start gap-2">