From 63b565f74abcfe1666aad521926712ed0dc78d94 Mon Sep 17 00:00:00 2001
From: Zan Fras <zan.fraas@gmail.com>
Date: Tue, 13 Jan 2026 21:12:58 +0100
Subject: [PATCH] chore: improve UI consistency

---
 packages/editor/App.tsx                       | 14 +++----
 packages/review-editor/App.tsx                | 38 +++++++++----------
 .../review-editor/components/DiffViewer.tsx   |  8 ++--
 .../review-editor/components/FileTree.tsx     | 12 +++---
 .../review-editor/components/ReviewPanel.tsx  | 24 ++++++------
 packages/review-editor/index.css              |  4 +-
 packages/ui/components/AnnotationPanel.tsx    |  6 +--
 packages/ui/components/AnnotationToolbar.tsx  | 11 +++---
 packages/ui/components/AttachmentsButton.tsx  |  6 +--
 packages/ui/components/ConfirmDialog.tsx      |  4 +-
 packages/ui/components/ExportModal.tsx        | 10 ++---
 packages/ui/components/Landing.tsx            |  4 +-
 packages/ui/components/ModeSwitcher.tsx       |  8 ++--
 packages/ui/components/ModeToggle.tsx         |  2 +-
 packages/ui/components/Settings.tsx           |  4 +-
 packages/ui/components/UpdateBanner.tsx       |  4 +-
 packages/ui/components/Viewer.tsx             | 15 ++++----
 17 files changed, 89 insertions(+), 85 deletions(-)

diff --git a/packages/editor/App.tsx b/packages/editor/App.tsx
index 06f8690..a5bf347 100644
--- a/packages/editor/App.tsx
+++ b/packages/editor/App.tsx
@@ -558,7 +558,7 @@ const App: React.FC = () => {
         {/* Tater sprites */}
         {taterMode && <TaterSpriteRunning />}
         {/* Minimal Header */}
-        <header className="h-12 flex items-center justify-between px-2 md:px-4 border-b border-border/50 bg-card/50 backdrop-blur-xl z-50">
+        <header className="py-2.5 flex items-center justify-between px-2 md:px-4 border-b border-border/50 bg-card/50 backdrop-blur-xl z-50">
           <div className="flex items-center gap-2 md:gap-3">
             <a
               href="https://plannotator.ai"
@@ -566,13 +566,13 @@ const App: React.FC = () => {
               rel="noopener noreferrer"
               className="flex items-center gap-1.5 md:gap-2 hover:opacity-80 transition-opacity"
             >
-              <span className="text-sm font-semibold tracking-tight">Plannotator</span>
+              <span className="text-sm font-semibold">Plannotator</span>
             </a>
             <a
               href="https://github.com/backnotprop/plannotator/releases"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-xs text-muted-foreground font-mono opacity-60 hidden md:inline hover:opacity-100 transition-opacity"
+              className="text-xs text-muted-foreground font-mono opacity-70 hidden md:inline hover:opacity-100 transition-opacity"
             >
               v{typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : '0.0.0'}
             </a>
@@ -599,7 +599,7 @@ const App: React.FC = () => {
                     }
                   }}
                   disabled={isSubmitting}
-                  className={`p-1.5 md:px-2.5 md:py-1 rounded-md text-xs font-medium transition-all ${
+                  className={`px-2.5 py-1.5 rounded-sm text-sm font-medium transition-all flex items-center gap-1.5 ${
                     isSubmitting
                       ? 'opacity-50 cursor-not-allowed bg-muted text-muted-foreground'
                       : 'bg-accent/15 text-accent hover:bg-accent/25 border border-accent/30'
@@ -623,7 +623,7 @@ const App: React.FC = () => {
                       }
                     }}
                     disabled={isSubmitting}
-                    className={`px-2 py-1 md:px-2.5 rounded-md text-xs font-medium transition-all ${
+                    className={`px-2.5 py-1.5 rounded-sm text-sm font-medium transition-all ${
                       isSubmitting
                         ? 'opacity-50 cursor-not-allowed bg-muted text-muted-foreground'
                         : origin === 'claude-code' && annotations.length > 0
@@ -652,7 +652,7 @@ const App: React.FC = () => {
 
             <button
               onClick={() => setIsPanelOpen(!isPanelOpen)}
-              className={`p-1.5 rounded-md text-xs font-medium transition-all ${
+              className={`p-2 rounded-sm text-sm font-medium transition-all ${
                 isPanelOpen
                   ? 'bg-primary/15 text-primary'
                   : 'text-muted-foreground hover:text-foreground hover:bg-muted'
@@ -665,7 +665,7 @@ const App: React.FC = () => {
 
             <button
               onClick={() => setShowExport(true)}
-              className="p-1.5 md:px-2.5 md:py-1 rounded-md text-xs font-medium bg-muted hover:bg-muted/80 transition-colors"
+              className="px-2.5 py-1.5 rounded-sm text-sm font-medium bg-muted hover:bg-muted/80 transition-colors flex items-center gap-1.5"
               title="Export"
             >
               <svg className="w-4 h-4 md:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
diff --git a/packages/review-editor/App.tsx b/packages/review-editor/App.tsx
index 69f0234..d2c5182 100644
--- a/packages/review-editor/App.tsx
+++ b/packages/review-editor/App.tsx
@@ -459,7 +459,7 @@ const ReviewApp: React.FC = () => {
     <ThemeProvider defaultTheme="dark">
       <div className="h-screen flex flex-col bg-background overflow-hidden">
         {/* Header */}
-        <header className="h-12 flex items-center justify-between px-2 md:px-4 border-b border-border/50 bg-card/50 backdrop-blur-xl z-50">
+        <header className="py-2.5 flex items-center justify-between px-2 md:px-4 border-b border-border/50 bg-card/50 backdrop-blur-xl z-50">
           <div className="flex items-center gap-2 md:gap-3">
             <a
               href="https://github.com/backnotprop/plannotator"
@@ -467,17 +467,17 @@ const ReviewApp: React.FC = () => {
               rel="noopener noreferrer"
               className="flex items-center gap-1.5 md:gap-2 hover:opacity-80 transition-opacity"
             >
-              <span className="text-sm font-semibold tracking-tight">Plannotator</span>
+              <span className="text-sm font-semibold">Plannotator</span>
             </a>
             <a
               href="https://github.com/backnotprop/plannotator/releases"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-xs text-muted-foreground font-mono opacity-60 hidden md:inline hover:opacity-100 transition-opacity"
+              className="text-xs text-muted-foreground font-mono opacity-70 hidden md:inline hover:opacity-100 transition-opacity"
             >
               v{typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : '0.0.0'}
             </a>
-            <span className="text-[10px] px-1.5 py-0.5 rounded font-medium bg-secondary/15 text-secondary hidden md:inline">
+            <span className="text-xs px-1.5 py-0.5 rounded font-medium bg-secondary/15 text-secondary hidden md:inline">
               Code Review
             </span>
             {origin && (
@@ -493,10 +493,10 @@ const ReviewApp: React.FC = () => {
 
           <div className="flex items-center gap-1 md:gap-2">
             {/* Diff style toggle */}
-            <div className="flex items-center gap-1 bg-muted rounded-lg p-0.5">
+            <div className="flex items-center gap-0.5 bg-muted rounded-sm p-0.5 font-medium">
               <button
                 onClick={() => handleDiffStyleChange('split')}
-                className={`px-2 py-1 text-xs rounded-md transition-colors ${
+                className={`px-2.5 w-20 py-1 text-sm rounded-sm transition-colors ${
                   diffStyle === 'split'
                     ? 'bg-background text-foreground shadow-sm'
                     : 'text-muted-foreground hover:text-foreground'
@@ -506,7 +506,7 @@ const ReviewApp: React.FC = () => {
               </button>
               <button
                 onClick={() => handleDiffStyleChange('unified')}
-                className={`px-2 py-1 text-xs rounded-md transition-colors ${
+                className={`px-2.5 w-20 py-1 text-sm rounded-sm transition-colors ${
                   diffStyle === 'unified'
                     ? 'bg-background text-foreground shadow-sm'
                     : 'text-muted-foreground hover:text-foreground'
@@ -519,19 +519,19 @@ const ReviewApp: React.FC = () => {
             {/* Primary actions */}
             <button
               onClick={handleCopyDiff}
-              className="px-2 py-1 md:px-2.5 rounded-md text-xs font-medium bg-muted hover:bg-muted/80 transition-colors flex items-center gap-1.5"
+              className="px-2.5 py-1.5 rounded-sm text-sm font-medium bg-muted hover:bg-muted/80 transition-colors flex items-center gap-1.5"
               title="Copy all raw diffs (Cmd+Shift+C)"
             >
               {copyFeedback === 'Diff copied!' ? (
                 <>
-                  <svg className="w-3.5 h-3.5 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <svg className="w-4 h-4 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                     <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                   </svg>
                   <span className="hidden md:inline">Copied!</span>
                 </>
               ) : (
                 <>
-                  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                     <path strokeLinecap="round" strokeLinejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                   </svg>
                   <span className="hidden md:inline">Copy Raw Diffs</span>
@@ -545,7 +545,7 @@ const ReviewApp: React.FC = () => {
                 <button
                   onClick={handleSendFeedback}
                   disabled={isSendingFeedback || isApproving || annotations.length === 0}
-                  className={`p-1.5 md:px-2.5 md:py-1 rounded-md text-xs font-medium transition-all ${
+                  className={`px-2.5 py-1.5 rounded-sm text-sm font-medium transition-all flex items-center gap-1.5 ${
                     isSendingFeedback || isApproving
                       ? 'opacity-50 cursor-not-allowed bg-muted text-muted-foreground'
                       : annotations.length === 0
@@ -571,7 +571,7 @@ const ReviewApp: React.FC = () => {
                       }
                     }}
                     disabled={isSendingFeedback || isApproving}
-                    className={`px-2 py-1 md:px-2.5 rounded-md text-xs font-medium transition-all ${
+                    className={`px-2.5 py-1.5 rounded-sm text-sm font-medium transition-all ${
                       isSendingFeedback || isApproving
                         ? 'opacity-50 cursor-not-allowed bg-muted text-muted-foreground'
                         : annotations.length > 0
@@ -595,19 +595,19 @@ const ReviewApp: React.FC = () => {
             ) : (
               <button
                 onClick={handleCopyFeedback}
-                className="px-2 py-1 md:px-2.5 rounded-md text-xs font-medium bg-muted hover:bg-muted/80 transition-colors flex items-center gap-1.5"
+                className="px-2.5 py-1.5 rounded-sm text-sm font-medium bg-muted hover:bg-muted/80 transition-colors flex items-center gap-1.5"
                 title="Copy feedback for LLM"
               >
                 {copyFeedback === 'Feedback copied!' ? (
                   <>
-                    <svg className="w-3.5 h-3.5 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <svg className="w-4 h-4 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                       <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                     </svg>
                     <span className="hidden md:inline">Copied!</span>
                   </>
                 ) : (
                   <>
-                    <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                       <path strokeLinecap="round" strokeLinejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                     </svg>
                     <span className="hidden md:inline">Copy Feedback</span>
@@ -631,7 +631,7 @@ const ReviewApp: React.FC = () => {
             {/* Panel toggle */}
             <button
               onClick={() => setIsPanelOpen(!isPanelOpen)}
-              className={`p-1.5 rounded-md text-xs font-medium transition-all ${
+              className={`p-2 rounded-sm text-sm font-medium transition-all ${
                 isPanelOpen
                   ? 'bg-primary/15 text-primary'
                   : 'text-muted-foreground hover:text-foreground hover:bg-muted'
@@ -646,7 +646,7 @@ const ReviewApp: React.FC = () => {
             {/* Export */}
             <button
               onClick={() => setShowExportModal(true)}
-              className="p-1.5 md:px-2.5 md:py-1 rounded-md text-xs font-medium bg-muted hover:bg-muted/80 transition-colors"
+              className="px-2.5 py-1.5 rounded-sm text-sm font-medium bg-muted hover:bg-muted/80 transition-colors flex items-center gap-1.5"
               title="Export"
             >
               <svg className="w-4 h-4 md:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -739,7 +739,7 @@ const ReviewApp: React.FC = () => {
                 <h3 className="font-semibold text-sm">Export Review Feedback</h3>
                 <button
                   onClick={() => setShowExportModal(false)}
-                  className="p-1.5 rounded-md hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+                  className="p-1.5 rounded-sm hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
                 >
                   <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                     <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
@@ -759,7 +759,7 @@ const ReviewApp: React.FC = () => {
                   onClick={async () => {
                     await navigator.clipboard.writeText(feedbackMarkdown);
                   }}
-                  className="px-3 py-1.5 rounded-md text-xs font-medium bg-primary text-primary-foreground hover:opacity-90 transition-colors"
+                  className="px-3 py-1.5 rounded-sm text-xs font-medium bg-primary text-primary-foreground hover:opacity-90 transition-colors"
                 >
                   Copy to Clipboard
                 </button>
diff --git a/packages/review-editor/components/DiffViewer.tsx b/packages/review-editor/components/DiffViewer.tsx
index b763901..fdc0b41 100644
--- a/packages/review-editor/components/DiffViewer.tsx
+++ b/packages/review-editor/components/DiffViewer.tsx
@@ -209,7 +209,7 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
   return (
     <div ref={containerRef} className="h-full overflow-auto relative" onMouseMove={handleMouseMove}>
       {/* File header */}
-      <div className="sticky top-0 z-10 px-4 py-2 bg-card/95 backdrop-blur border-b border-border flex items-center justify-between">
+      <div className="sticky top-0 z-10 px-4 py-2.5 bg-card/95 backdrop-blur border-b border-border flex items-center justify-between">
         <span className="font-mono text-sm text-foreground">{filePath}</span>
         <button
           onClick={async () => {
@@ -276,7 +276,7 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
           }}
         >
           <div className="w-80">
-            <div className="flex items-center justify-between mb-2">
+            <div className="flex items-center justify-between mb-3">
               <span className="text-xs text-muted-foreground">
                 {toolbarState.range.start === toolbarState.range.end
                   ? `Line ${toolbarState.range.start}`
@@ -297,7 +297,7 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
               value={commentText}
               onChange={(e) => setCommentText(e.target.value)}
               placeholder="Leave feedback..."
-              className="w-full px-3 py-2 bg-muted rounded-lg text-xs resize-none focus:outline-none focus:ring-1 focus:ring-primary/50"
+              className="w-full px-3 py-2 bg-muted rounded-sm text-xs resize-none focus:outline-none focus:ring-1 focus:ring-primary/50"
               rows={3}
               autoFocus
               onKeyDown={(e) => {
@@ -315,7 +315,7 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
                 value={suggestedCode}
                 onChange={(e) => setSuggestedCode(e.target.value)}
                 placeholder="Suggested code..."
-                className="w-full px-3 py-2 mt-2 bg-muted rounded-lg text-xs font-mono resize-none focus:outline-none focus:ring-1 focus:ring-primary/50"
+                className="w-full px-3 py-2 mt-2 bg-muted rounded-sm text-xs font-mono resize-none focus:outline-none focus:ring-1 focus:ring-primary/50"
                 rows={3}
                 autoFocus
               />
diff --git a/packages/review-editor/components/FileTree.tsx b/packages/review-editor/components/FileTree.tsx
index cff088a..7caead6 100644
--- a/packages/review-editor/components/FileTree.tsx
+++ b/packages/review-editor/components/FileTree.tsx
@@ -101,7 +101,7 @@ export const FileTree: React.FC<FileTreeProps> = ({
               value={activeDiffType || 'uncommitted'}
               onChange={(e) => onSelectDiff(e.target.value)}
               disabled={isLoadingDiff}
-              className="w-full px-2.5 py-1.5 bg-muted rounded-md text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-primary/50 cursor-pointer disabled:opacity-50 disabled:cursor-wait appearance-none pr-7"
+              className="w-full px-2.5 py-1.5 bg-muted rounded-sm text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-primary/50 cursor-pointer disabled:opacity-50 disabled:cursor-wait appearance-none pr-7"
             >
               {diffOptions.map((option, index) => (
                 option.id === 'separator' ? (
@@ -146,16 +146,16 @@ export const FileTree: React.FC<FileTreeProps> = ({
               onClick={() => onSelectFile(index)}
               className={`file-tree-item w-full text-left group ${isActive ? 'active' : ''} ${annotationCount > 0 ? 'has-annotations' : ''}`}
             >
-              <div className="flex items-center gap-1 flex-1 min-w-0">
+              <div className="flex items-center gap-2 flex-1 min-w-0">
                 <span className="truncate">{fileName}</span>
                 {isViewed && (
-                  <svg className="w-3 h-3 flex-shrink-0 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <svg className="w-3 h-3 flex-shrink-0 opacity-60" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                     <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                     <path strokeLinecap="round" strokeLinejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                   </svg>
                 )}
               </div>
-              <div className="flex items-center gap-1.5 flex-shrink-0 text-[10px]">
+              <div className="flex items-center gap-1.5 flex-shrink-0 text-xs">
                 {annotationCount > 0 && (
                   <span className="text-primary font-medium">{annotationCount}</span>
                 )}
@@ -169,7 +169,7 @@ export const FileTree: React.FC<FileTreeProps> = ({
 
       {/* Footer */}
       <div className="p-3 border-t border-border/50 text-xs text-muted-foreground space-y-2">
-        <div className="flex justify-between">
+        <div className="flex justify-between text-sm">
           <span>Total changes:</span>
           <span className="file-stats">
             <span className="additions">
@@ -181,7 +181,7 @@ export const FileTree: React.FC<FileTreeProps> = ({
           </span>
         </div>
         {enableKeyboardNav && (
-          <div className="text-[10px] text-muted-foreground/50 text-center">
+          <div className="text-xs text-muted-foreground/60 text-center">
             j/k or arrows to navigate
           </div>
         )}
diff --git a/packages/review-editor/components/ReviewPanel.tsx b/packages/review-editor/components/ReviewPanel.tsx
index ecd048a..550afbe 100644
--- a/packages/review-editor/components/ReviewPanel.tsx
+++ b/packages/review-editor/components/ReviewPanel.tsx
@@ -77,17 +77,19 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
 
   return (
     <aside className="w-72 border-l border-border/50 bg-card/30 backdrop-blur-sm flex flex-col">
-        {/* Header */}
-        <div className="p-3 border-b border-border/50">
-          <div className="flex items-center justify-between">
-            <h2 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-              Annotations
-            </h2>
-            <span className="text-[10px] font-mono bg-muted px-1.5 py-0.5 rounded text-muted-foreground">
-              {annotations.length}
-            </span>
-          </div>
+      {/* Header */}
+      <div className="p-3 border-b border-border/50">
+        <div className="flex items-center justify-between">
+          <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+            Annotations
+          </span>
+          <span className="text-xs text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
+            {annotations.length}
+          </span>
         </div>
+      </div>
+
+        
 
         {/* Content */}
         <div className="flex-1 overflow-y-auto p-2 space-y-1.5">
@@ -163,7 +165,7 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
                               e.stopPropagation();
                               onDeleteAnnotation(annotation.id);
                             }}
-                            className="absolute top-2 right-2 p-1 rounded-md opacity-0 group-hover:opacity-100 hover:bg-destructive/10 text-muted-foreground hover:text-destructive transition-all"
+                            className="absolute top-2 right-2 p-1 rounded-sm opacity-0 group-hover:opacity-100 hover:bg-destructive/10 text-muted-foreground hover:text-destructive transition-all"
                             title="Delete annotation"
                           >
                             <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
diff --git a/packages/review-editor/index.css b/packages/review-editor/index.css
index 658e7c5..612ae6d 100644
--- a/packages/review-editor/index.css
+++ b/packages/review-editor/index.css
@@ -261,7 +261,7 @@ diffs-container {
   gap: 0.5rem;
   padding: 0.25rem 0.5rem;
   border-radius: var(--radius-sm);
-  font-size: 0.75rem;
+  font-size: var(--text-sm);
   cursor: pointer;
   color: var(--muted-foreground);
 }
@@ -310,7 +310,7 @@ diffs-container {
   border: 1px solid var(--border);
   border-radius: var(--radius);
   box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-  padding: 0.5rem;
+  padding: 0.75rem;
 }
 
 .review-toolbar-btn {
diff --git a/packages/ui/components/AnnotationPanel.tsx b/packages/ui/components/AnnotationPanel.tsx
index db92235..5307c53 100644
--- a/packages/ui/components/AnnotationPanel.tsx
+++ b/packages/ui/components/AnnotationPanel.tsx
@@ -43,10 +43,10 @@ export const AnnotationPanel: React.FC<PanelProps> = ({
       {/* Header */}
       <div className="p-3 border-b border-border/50">
         <div className="flex items-center justify-between">
-          <h2 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+          <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
             Annotations
-          </h2>
-          <span className="text-[10px] font-mono bg-muted px-1.5 py-0.5 rounded text-muted-foreground">
+          </span>
+          <span className="text-xs text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
             {annotations.length}
           </span>
         </div>
diff --git a/packages/ui/components/AnnotationToolbar.tsx b/packages/ui/components/AnnotationToolbar.tsx
index cde89c4..d2f96d8 100644
--- a/packages/ui/components/AnnotationToolbar.tsx
+++ b/packages/ui/components/AnnotationToolbar.tsx
@@ -186,11 +186,11 @@ export const AnnotationToolbar: React.FC<AnnotationToolbarProps> = ({
           />
         </div>
       ) : (
-        <form onSubmit={handleSubmit} className="flex items-start gap-1.5 p-1.5 pl-3">
+        <form onSubmit={handleSubmit} className="flex items-center gap-1.5 p-1.5">
           <textarea
             ref={inputRef}
             rows={1}
-            className="bg-transparent text-sm min-w-44 max-w-80 max-h-32 placeholder:text-muted-foreground resize-none px-2 py-1.5 focus:outline-none focus:bg-muted/30"
+            className="bg-transparent text-sm min-w-44 max-w-80 max-h-32 placeholder:text-muted-foreground resize-none px-3 py-2 focus:outline-none focus:bg-muted/30 rounded-sm border border-transparent focus:border-border transition-colors"
             style={{ fieldSizing: "content" } as React.CSSProperties}
             placeholder="Add a comment..."
             value={inputValue}
@@ -214,14 +214,15 @@ export const AnnotationToolbar: React.FC<AnnotationToolbarProps> = ({
           <button
             type="submit"
             disabled={!inputValue.trim() && imagePaths.length === 0}
-            className="px-[15px] py-1 text-xs font-medium rounded bg-primary text-primary-foreground hover:opacity-90 disabled:opacity-50 transition-opacity self-stretch"
+            className="px-4 py-2 text-xs font-medium rounded-sm bg-primary text-primary-foreground hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
           >
             Save
           </button>
           <button
             type="button"
             onClick={() => setStep("menu")}
-            className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+            className="p-2 rounded-sm text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+            title="Cancel"
           >
             <CloseIcon small />
           </button>
@@ -272,7 +273,7 @@ const ToolbarButton: React.FC<{
   <button
     onClick={onClick}
     title={label}
-    className={`p-1.5 rounded-md transition-colors ${className}`}
+    className={`p-1.5 rounded-sm transition-colors ${className}`}
   >
     {icon}
   </button>
diff --git a/packages/ui/components/AttachmentsButton.tsx b/packages/ui/components/AttachmentsButton.tsx
index f6871d9..d4bf055 100644
--- a/packages/ui/components/AttachmentsButton.tsx
+++ b/packages/ui/components/AttachmentsButton.tsx
@@ -139,7 +139,7 @@ export const AttachmentsButton: React.FC<AttachmentsButtonProps> = ({
         ref={buttonRef}
         type="button"
         onClick={() => setIsOpen(!isOpen)}
-        className="group relative flex items-center gap-1.5 px-2 py-1.5 rounded-md text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors"
+        className="group relative flex items-center gap-1.5 px-2 py-1.5 rounded-sm text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors"
       >
         {/* Show stacked thumbnails if we have images */}
         {paths.length > 0 ? (
@@ -264,13 +264,13 @@ export const AttachmentsButton: React.FC<AttachmentsButtonProps> = ({
                   onChange={(e) => setManualPath(e.target.value)}
                   onKeyDown={(e) => e.key === 'Enter' && handleManualAdd()}
                   placeholder="Paste path or URL..."
-                  className="flex-1 px-2 py-1.5 text-xs bg-background border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-primary"
+                  className="flex-1 px-2 py-1.5 text-xs bg-background border border-border rounded-sm focus:outline-none focus:ring-1 focus:ring-primary"
                 />
                 <button
                   type="button"
                   onClick={handleManualAdd}
                   disabled={!manualPath.trim()}
-                  className="px-2 py-1.5 text-xs font-medium bg-primary text-primary-foreground rounded-md hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="px-2 py-1.5 text-xs font-medium bg-primary text-primary-foreground rounded-sm hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed"
                 >
                   Add
                 </button>
diff --git a/packages/ui/components/ConfirmDialog.tsx b/packages/ui/components/ConfirmDialog.tsx
index 239582e..dd715ab 100644
--- a/packages/ui/components/ConfirmDialog.tsx
+++ b/packages/ui/components/ConfirmDialog.tsx
@@ -76,7 +76,7 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
           {showCancel && (
             <button
               onClick={onClose}
-              className="px-4 py-2 rounded-md text-sm font-medium bg-muted text-muted-foreground hover:bg-muted/80 transition-opacity"
+              className="px-4 py-2 rounded-sm text-sm font-medium bg-muted text-muted-foreground hover:bg-muted/80 transition-opacity"
             >
               {cancelText}
             </button>
@@ -89,7 +89,7 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
                 onClose();
               }
             }}
-            className={`px-4 py-2 rounded-md text-sm font-medium transition-opacity ${buttonColors[variant]}`}
+            className={`px-4 py-2 rounded-sm text-sm font-medium transition-opacity ${buttonColors[variant]}`}
           >
             {confirmText}
           </button>
diff --git a/packages/ui/components/ExportModal.tsx b/packages/ui/components/ExportModal.tsx
index ec9fc0a..c67b92a 100644
--- a/packages/ui/components/ExportModal.tsx
+++ b/packages/ui/components/ExportModal.tsx
@@ -81,7 +81,7 @@ export const ExportModal: React.FC<ExportModalProps> = ({
               </span>
               <button
                 onClick={onClose}
-                className="p-1.5 rounded-md hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+                className="p-1.5 rounded-sm hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
               >
                 <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                   <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
@@ -97,7 +97,7 @@ export const ExportModal: React.FC<ExportModalProps> = ({
           <div className="flex gap-1 bg-muted rounded-lg p-1 mb-4">
             <button
               onClick={() => setActiveTab('share')}
-              className={`flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
+              className={`flex-1 px-3 py-1.5 text-xs font-medium rounded-sm transition-colors ${
                 activeTab === 'share'
                   ? 'bg-background text-foreground shadow-sm'
                   : 'text-muted-foreground hover:text-foreground'
@@ -107,7 +107,7 @@ export const ExportModal: React.FC<ExportModalProps> = ({
             </button>
             <button
               onClick={() => setActiveTab('diff')}
-              className={`flex-1 px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
+              className={`flex-1 px-3 py-1.5 text-xs font-medium rounded-sm transition-colors ${
                 activeTab === 'diff'
                   ? 'bg-background text-foreground shadow-sm'
                   : 'text-muted-foreground hover:text-foreground'
@@ -173,13 +173,13 @@ export const ExportModal: React.FC<ExportModalProps> = ({
           <div className="p-4 border-t border-border flex justify-end gap-2">
             <button
               onClick={handleCopyDiff}
-              className="px-3 py-1.5 rounded-md text-xs font-medium bg-muted hover:bg-muted/80 transition-colors"
+              className="px-3 py-1.5 rounded-sm text-xs font-medium bg-muted hover:bg-muted/80 transition-colors"
             >
               {copied ? 'Copied!' : 'Copy'}
             </button>
             <button
               onClick={handleDownloadDiff}
-              className="px-3 py-1.5 rounded-md text-xs font-medium bg-primary text-primary-foreground hover:opacity-90 transition-opacity"
+              className="px-3 py-1.5 rounded-sm text-xs font-medium bg-primary text-primary-foreground hover:opacity-90 transition-opacity"
             >
               Download .diff
             </button>
diff --git a/packages/ui/components/Landing.tsx b/packages/ui/components/Landing.tsx
index ca2b38e..1b04f7b 100644
--- a/packages/ui/components/Landing.tsx
+++ b/packages/ui/components/Landing.tsx
@@ -343,7 +343,7 @@ export const Landing: React.FC<LandingProps> = ({ onEnter }) => {
 
                 {/* Mock annotation cards */}
                 <div className="space-y-2">
-                  <div className="p-2 rounded-md border border-destructive/30 bg-destructive/5">
+                  <div className="p-2 rounded-sm border border-destructive/30 bg-destructive/5">
                     <div className="flex items-center gap-1 mb-1.5">
                       <div className="w-3 h-3 rounded bg-destructive/20" />
                       <span className="text-[9px] font-semibold text-destructive uppercase">
@@ -353,7 +353,7 @@ export const Landing: React.FC<LandingProps> = ({ onEnter }) => {
                     <div className="h-1.5 w-full bg-muted rounded" />
                   </div>
 
-                  <div className="p-2 rounded-md border border-accent/30 bg-accent/5">
+                  <div className="p-2 rounded-sm border border-accent/30 bg-accent/5">
                     <div className="flex items-center gap-1 mb-1.5">
                       <div className="w-3 h-3 rounded bg-accent/20" />
                       <span className="text-[9px] font-semibold text-accent uppercase">
diff --git a/packages/ui/components/ModeSwitcher.tsx b/packages/ui/components/ModeSwitcher.tsx
index 00b7c8b..2b6aad1 100644
--- a/packages/ui/components/ModeSwitcher.tsx
+++ b/packages/ui/components/ModeSwitcher.tsx
@@ -44,9 +44,9 @@ export const ModeSwitcher: React.FC<ModeSwitcherProps> = ({ mode, onChange, tate
     {/* Help link */}
     <button
       onClick={() => setShowHelp(true)}
-      className="ml-2 text-[10px] text-muted-foreground/60 hover:text-muted-foreground transition-colors"
+      className="ml-3 text-xs text-muted-foreground/60 hover:text-muted-foreground transition-colors"
     >
-      how does this work?
+      How does this work?
     </button>
 
     {/* Help Video Dialog */}
@@ -64,7 +64,7 @@ export const ModeSwitcher: React.FC<ModeSwitcherProps> = ({ mode, onChange, tate
             <h3 className="font-semibold text-sm">How Plannotator Works</h3>
             <button
               onClick={() => setShowHelp(false)}
-              className="p-1.5 rounded-md hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+              className="p-1.5 rounded-sm hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
             >
               <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                 <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
@@ -98,7 +98,7 @@ const ModeButton: React.FC<{
 }> = ({ active, onClick, icon, label, destructive }) => (
   <button
     onClick={onClick}
-    className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium transition-all ${
+    className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-sm text-xs font-medium transition-all ${
       active
         ? destructive
           ? 'bg-destructive/15 text-destructive shadow-sm'
diff --git a/packages/ui/components/ModeToggle.tsx b/packages/ui/components/ModeToggle.tsx
index 2e38dde..0574877 100644
--- a/packages/ui/components/ModeToggle.tsx
+++ b/packages/ui/components/ModeToggle.tsx
@@ -20,7 +20,7 @@ export function ModeToggle() {
     <div className="relative" ref={dropdownRef}>
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+        className="p-2 rounded-sm text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
         title="Toggle theme"
       >
         {/* Sun */}
diff --git a/packages/ui/components/Settings.tsx b/packages/ui/components/Settings.tsx
index 24c9335..e2b7dd2 100644
--- a/packages/ui/components/Settings.tsx
+++ b/packages/ui/components/Settings.tsx
@@ -110,7 +110,7 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
     <>
       <button
         onClick={() => setShowDialog(true)}
-        className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+        className="p-2 rounded-sm text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
         title="Settings"
       >
         <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -133,7 +133,7 @@ export const Settings: React.FC<SettingsProps> = ({ taterMode, onTaterModeChange
               <h3 className="font-semibold text-sm">Settings</h3>
               <button
                 onClick={() => setShowDialog(false)}
-                className="p-1.5 rounded-md bg-muted hover:bg-muted/80 text-foreground transition-colors"
+                className="p-1.5 rounded-sm bg-muted hover:bg-muted/80 text-foreground transition-colors"
               >
                 <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
                   <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
diff --git a/packages/ui/components/UpdateBanner.tsx b/packages/ui/components/UpdateBanner.tsx
index 5467de7..d0427f4 100644
--- a/packages/ui/components/UpdateBanner.tsx
+++ b/packages/ui/components/UpdateBanner.tsx
@@ -135,7 +135,7 @@ export const UpdateBanner: React.FC<UpdateBannerProps> = ({ origin }) => {
             <div className="mt-3 flex items-center gap-2">
               <button
                 onClick={handleCopy}
-                className="flex-1 px-3 py-1.5 text-xs font-medium bg-primary text-primary-foreground rounded-md hover:opacity-90 transition-opacity"
+                className="flex-1 px-3 py-1.5 text-xs font-medium bg-primary text-primary-foreground rounded-sm hover:opacity-90 transition-opacity"
               >
                 {copied ? 'Copied!' : 'Copy install command'}
               </button>
@@ -143,7 +143,7 @@ export const UpdateBanner: React.FC<UpdateBannerProps> = ({ origin }) => {
                 href={updateInfo.releaseUrl}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground border border-border rounded-md hover:bg-muted transition-colors"
+                className="px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground border border-border rounded-sm hover:bg-muted transition-colors"
               >
                 Notes
               </a>
diff --git a/packages/ui/components/Viewer.tsx b/packages/ui/components/Viewer.tsx
index 958b6d3..e64aead 100644
--- a/packages/ui/components/Viewer.tsx
+++ b/packages/ui/components/Viewer.tsx
@@ -579,12 +579,12 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
                 e.preventDefault();
                 handleAddGlobalComment();
               }}
-              className="flex items-start gap-1.5 bg-muted/80 rounded-md p-1"
+              className="flex items-center gap-1.5 bg-muted/80 rounded-sm p-1"
             >
               <textarea
                 ref={globalCommentInputRef}
                 rows={1}
-                className="bg-transparent text-xs min-w-40 md:min-w-56 max-w-80 max-h-32 placeholder:text-muted-foreground resize-none px-2 py-1.5 focus:outline-none"
+                className="bg-transparent text-xs min-w-40 md:min-w-56 max-w-80 max-h-32 placeholder:text-muted-foreground resize-none px-3 py-1.5 focus:outline-none focus:bg-muted/30 rounded-sm border border-transparent focus:border-border transition-colors"
                 style={{ fieldSizing: 'content' } as React.CSSProperties}
                 placeholder="Add a global comment..."
                 value={globalCommentValue}
@@ -606,7 +606,7 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
               <button
                 type="submit"
                 disabled={!globalCommentValue.trim()}
-                className="self-start px-2 py-1.5 text-xs font-medium rounded bg-secondary text-secondary-foreground hover:opacity-90 disabled:opacity-50 transition-all"
+                className="px-4 py-1.5 text-xs font-medium rounded-sm bg-secondary text-secondary-foreground hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
               >
                 Add
               </button>
@@ -616,7 +616,8 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
                   setShowGlobalCommentInput(false);
                   setGlobalCommentValue('');
                 }}
-                className="self-start p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                className="p-1 rounded-sm text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                title="Cancel"
               >
                 <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                   <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
@@ -626,7 +627,7 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
           ) : (
             <button
               onClick={() => setShowGlobalCommentInput(true)}
-              className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground bg-muted/50 hover:bg-muted rounded-md transition-colors"
+              className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground bg-muted/50 hover:bg-muted rounded-sm transition-colors"
               title="Add global comment"
             >
               <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -639,7 +640,7 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
           {/* Copy plan button */}
           <button
             onClick={handleCopyPlan}
-            className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground bg-muted/50 hover:bg-muted rounded-md transition-colors"
+            className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground bg-muted/50 hover:bg-muted rounded-sm transition-colors"
             title={copied ? 'Copied!' : 'Copy plan'}
           >
             {copied ? (
@@ -995,7 +996,7 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ block, onHover, onLeave, isHovere
     >
       <button
         onClick={handleCopy}
-        className="absolute top-2 right-2 p-1.5 rounded-md bg-muted/80 hover:bg-muted text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity z-10"
+        className="absolute top-2 right-2 p-1.5 rounded-sm bg-muted/80 hover:bg-muted text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity z-10"
         title={copied ? 'Copied!' : 'Copy code'}
       >
         {copied ? (