Widen plan viewer layout for responsiveness (#32)

Author: seanGSISG

bun.lock

@@ -634,9 +634,9 @@ const App: React.FC = () => {
         <div className="flex-1 flex overflow-hidden">
           {/* Document Area */}
           <main className="flex-1 overflow-y-auto bg-grid">
-            <div className="min-h-full flex flex-col items-center p-3 md:p-8">
+            <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-3xl mb-3 md:mb-4 flex justify-start">
+              <div className="w-full max-w-5xl xl:max-w-6xl mb-3 md:mb-4 flex justify-start">
                 <ModeSwitcher mode={editorMode} onChange={setEditorMode} taterMode={taterMode} />
               </div>
 

packages/editor/App.tsx

@@ -24,7 +24,7 @@ export const AnnotationSidebar: React.FC<SidebarProps> = ({
   });
 
   return (
-    <div className="w-80 border-l border-border/50 bg-card/50 backdrop-blur-sm h-full flex flex-col transition-colors">
+    <div className="w-[min(22rem,32vw)] min-w-[16rem] border-l border-border/50 bg-card/50 backdrop-blur-sm h-full flex flex-col transition-colors">
       <div className="p-4 border-b border-border/50 flex items-center justify-between">
         <h2 className="font-semibold text-foreground">Review Changes</h2>
         <span className="text-xs bg-muted text-muted-foreground px-2 py-1 rounded-full">

packages/ui/components/AnnotationSidebar.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-3xl mx-auto flex items-center gap-4">
+      <div className="max-w-5xl xl: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/DecisionBar.tsx

@@ -517,11 +517,11 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
   };
 
   return (
-    <div className="relative z-50 w-full max-w-3xl">
+    <div className="relative z-50 w-full max-w-5xl xl:max-w-6xl">
       {taterMode && <TaterSpriteSitting />}
       <article
         ref={containerRef}
-        className="w-full max-w-3xl bg-card border border-border/50 rounded-xl shadow-xl p-5 md:p-10 lg:p-14 relative"
+        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"
       >
         {/* Header buttons */}
         <div className="absolute top-3 right-3 md:top-5 md:right-5 flex items-start gap-2">