Fix responsive width for laptop screens

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>

Author: backnotprop

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",

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",

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>
 

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",

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 ? (

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">