🤖 Standardize Tailwind width utilities

src/App.tsx

@@ -701,7 +701,7 @@ function AppInner() {
               </ErrorBoundary>
             ) : (
               <div
-                className="text-center max-w-[800px] mx-auto w-full [&_h2]:text-white [&_h2]:mb-4 [&_h2]:font-bold [&_h2]:tracking-tight [&_p]:text-muted [&_p]:leading-[1.6]"
+                className="text-center max-w-3xl mx-auto w-full [&_h2]:text-white [&_h2]:mb-4 [&_h2]:font-bold [&_h2]:tracking-tight [&_p]:text-muted [&_p]:leading-[1.6]"
                 style={{
                   padding: "clamp(40px, 10vh, 100px) 20px",
                   fontSize: "clamp(14px, 2vw, 16px)",

src/components/AIView.tsx

@@ -327,7 +327,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
     >
       <div
         ref={chatAreaRef}
-        className="flex-1 min-w-[400px] flex flex-col [@media(max-width:768px)]:min-w-0 [@media(max-width:768px)]:w-full [@media(max-width:768px)]:max-h-full"
+        className="flex-1 min-w-96 flex flex-col [@media(max-width:768px)]:min-w-0 [@media(max-width:768px)]:w-full [@media(max-width:768px)]:max-h-full"
       >
         <div className="py-1 px-[15px] bg-separator border-b border-border-light flex justify-between items-center [@media(max-width:768px)]:py-2 [@media(max-width:768px)]:pl-[60px] [@media(max-width:768px)]:flex-wrap [@media(max-width:768px)]:gap-2">
           <div className="font-semibold text-foreground flex items-center gap-2 min-w-0 overflow-hidden">

src/components/ChatMetaSidebar.tsx

@@ -60,7 +60,7 @@ const ChatMetaSidebarComponent: React.FC<ChatMetaSidebarProps> = ({ workspaceId,
     <div
       className={cn(
         "bg-separator border-l border-border-light flex flex-col overflow-hidden transition-[width] duration-200 flex-shrink-0",
-        showCollapsed ? "w-5 sticky right-0 z-10 shadow-[-2px_0_4px_rgba(0,0,0,0.2)]" : "w-[300px]"
+        showCollapsed ? "w-5 sticky right-0 z-10 shadow-[-2px_0_4px_rgba(0,0,0,0.2)]" : "w-80"
       )}
       role="complementary"
       aria-label="Workspace insights"

src/components/Context1MCheckbox.tsx

@@ -22,7 +22,7 @@ export const Context1MCheckbox: React.FC<Context1MCheckboxProps> = ({ modelStrin
           type="checkbox"
           checked={use1M}
           onChange={(e) => setUse1M(e.target.checked)}
-          className="cursor-pointer w-[11px] h-[11px] m-0 appearance-none border border-border-light rounded-sm bg-dark relative hover:border-accent checked:bg-accent checked:border-accent checked:after:content-[''] checked:after:absolute checked:after:left-[3px] checked:after:top-0 checked:after:w-[3px] checked:after:h-[6px] checked:after:border-solid checked:after:border-white checked:after:border-r-[1.5px] checked:after:border-b-[1.5px] checked:after:rotate-45"
+          className="cursor-pointer w-3 h-[11px] m-0 appearance-none border border-border-light rounded-sm bg-dark relative hover:border-accent checked:bg-accent checked:border-accent checked:after:content-[''] checked:after:absolute checked:after:left-[3px] checked:after:top-0 checked:after:w-1 checked:after:h-[6px] checked:after:border-solid checked:after:border-white checked:after:border-r-[1.5px] checked:after:border-b-[1.5px] checked:after:rotate-45"
         />
         1M Context
       </label>

src/components/GitStatusIndicatorView.tsx

@@ -187,7 +187,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
   const tooltipElement = (
     <div
       className={cn(
-        "fixed z-[10000] bg-modal-bg text-foreground border border-separator-light rounded px-3 py-2 text-[11px] font-mono whitespace-pre max-w-[600px] max-h-[400px] overflow-auto shadow-[0_4px_12px_rgba(0,0,0,0.5)] pointer-events-auto transition-opacity duration-200",
+        "fixed z-[10000] bg-modal-bg text-foreground border border-separator-light rounded px-3 py-2 text-[11px] font-mono whitespace-pre max-w-96 max-h-[400px] overflow-auto shadow-[0_4px_12px_rgba(0,0,0,0.5)] pointer-events-auto transition-opacity duration-200",
         showTooltip ? "opacity-100 visible" : "opacity-0 invisible"
       )}
       style={{

src/components/KebabMenu.tsx

@@ -98,7 +98,7 @@ export const KebabMenu: React.FC<KebabMenuProps> = ({ items, className }) => {
         createPortal(
           <div
             ref={menuRef}
-            className="fixed bg-dark border border-border-light rounded-[3px] shadow-[0_4px_16px_rgba(0,0,0,0.8)] z-[10000] min-w-[160px] overflow-hidden"
+            className="fixed bg-dark border border-border-light rounded-[3px] shadow-[0_4px_16px_rgba(0,0,0,0.8)] z-[10000] min-w-40 overflow-hidden"
             style={{
               top: `${dropdownPosition.top}px`,
               left: `${dropdownPosition.left}px`,

src/components/LeftSidebar.tsx

@@ -71,8 +71,8 @@ export function LeftSidebar(props: LeftSidebarProps) {
         className={cn(
           "h-screen bg-separator border-r border-dark flex flex-col shrink-0",
           "transition-all duration-200 overflow-hidden relative z-[100]",
-          collapsed ? "w-8" : "w-[280px]",
-          "max-md:fixed max-md:left-0 max-md:top-0 max-md:w-[280px] max-md:z-[1000]",
+          collapsed ? "w-8" : "w-72",
+          "max-md:fixed max-md:left-0 max-md:top-0 max-md:w-72 max-md:z-[1000]",
           "max-md:transition-transform max-md:duration-300",
           collapsed
             ? "max-md:-translate-x-full max-md:shadow-none"

src/components/Messages/UserMessage.tsx

@@ -132,7 +132,7 @@ export const UserMessage: React.FC<UserMessageProps> = ({
               key={idx}
               src={img.url}
               alt={`Attachment ${idx + 1}`}
-              className="max-w-[300px] max-h-[300px] rounded border border-border-light"
+              className="max-w-80 max-h-[300px] rounded border border-border-light"
             />
           ))}
         </div>

src/components/ModelSelector.tsx

@@ -185,7 +185,7 @@ export const ModelSelector = forwardRef<ModelSelectorRef, ModelSelectorProps>(
       return (
         <div ref={containerRef} className="relative flex items-center gap-1">
           <div
-            className="font-mono text-[10px] text-muted-light font-monospace leading-[11px] cursor-pointer py-0.5 px-1 rounded-sm transition-colors duration-200 whitespace-nowrap overflow-hidden text-ellipsis max-w-[150px] dir-rtl text-left hover:bg-hover"
+            className="font-mono text-[10px] text-muted-light font-monospace leading-[11px] cursor-pointer py-0.5 px-1 rounded-sm transition-colors duration-200 whitespace-nowrap overflow-hidden text-ellipsis max-w-36 dir-rtl text-left hover:bg-hover"
             onClick={handleClick}
           >
             {value}
@@ -203,14 +203,14 @@ export const ModelSelector = forwardRef<ModelSelectorRef, ModelSelectorProps>(
             onChange={handleInputChange}
             onKeyDown={handleKeyDown}
             placeholder="provider:model-name"
-            className="text-[10px] text-light bg-dark border border-border-light rounded-sm py-0.5 px-1 font-monospace leading-[11px] w-[200px] outline-none focus:border-exec-mode"
+            className="text-[10px] text-light bg-dark border border-border-light rounded-sm py-0.5 px-1 font-monospace leading-[11px] w-48 outline-none focus:border-exec-mode"
           />
           {error && (
             <div className="text-[9px] text-danger-soft font-monospace mt-0.5">{error}</div>
           )}
         </div>
         {showDropdown && filteredModels.length > 0 && (
-          <div className="absolute bottom-full left-0 mb-1 bg-separator border border-border-light rounded shadow-[0_4px_12px_rgba(0,0,0,0.3)] z-[1000] min-w-[300px] max-h-[200px] overflow-y-auto">
+          <div className="absolute bottom-full left-0 mb-1 bg-separator border border-border-light rounded shadow-[0_4px_12px_rgba(0,0,0,0.3)] z-[1000] min-w-80 max-h-[200px] overflow-y-auto">
             {filteredModels.map((model, index) => (
               <div
                 key={model}

src/components/ProjectSidebar.tsx

@@ -136,7 +136,7 @@ const ProjectDragLayer: React.FC = () => {
   return (
     <div className="fixed pointer-events-none z-[9999] inset-0 cursor-grabbing">
       <div style={{ transform: `translate(${currentOffset.x + 10}px, ${currentOffset.y + 10}px)` }}>
-        <div className="bg-hover/95 text-foreground py-1.5 px-3 border-l-[3px] border-l-accent shadow-[0_6px_24px_rgba(0,0,0,0.4)] rounded flex items-center w-fit max-w-[280px] min-w-[180px]">
+        <div className="bg-hover/95 text-foreground py-1.5 px-3 border-l-[3px] border-l-accent shadow-[0_6px_24px_rgba(0,0,0,0.4)] rounded flex items-center w-fit max-w-72 min-w-44">
           <span className="mr-1.5 text-text-dim text-xs">⠿</span>
           <span className="mr-2 text-muted text-[10px]">▶</span>
           <div className="flex-1 min-w-0">
@@ -660,7 +660,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
           {removeError &&
             createPortal(
               <div
-                className="fixed max-w-[400px] p-3 px-4 bg-error-bg border border-error rounded-md text-error text-xs z-[10000] shadow-[0_4px_16px_rgba(0,0,0,0.5)] font-monospace leading-[1.4] whitespace-pre-wrap break-words pointer-events-auto"
+                className="fixed max-w-96 p-3 px-4 bg-error-bg border border-error rounded-md text-error text-xs z-[10000] shadow-[0_4px_16px_rgba(0,0,0,0.5)] font-monospace leading-[1.4] whitespace-pre-wrap break-words pointer-events-auto"
                 style={{
                   top: `${removeError.position.top}px`,
                   left: `${removeError.position.left}px`,

src/components/RightSidebar/CodeReview/ReviewControls.tsx

@@ -93,7 +93,7 @@ export const ReviewControls: React.FC<ReviewControlsProps> = ({
         onBlur={handleBaseBlur}
         onKeyDown={handleBaseKeyDown}
         placeholder="HEAD, main, etc."
-        className="py-1 px-2 bg-dark text-foreground border border-border-medium rounded text-[11px] font-mono w-[140px] transition-[border-color] duration-200 hover:border-accent focus:outline-none focus:border-accent placeholder:text-text-dim"
+        className="py-1 px-2 bg-dark text-foreground border border-border-medium rounded text-[11px] font-mono w-36 transition-[border-color] duration-200 hover:border-accent focus:outline-none focus:border-accent placeholder:text-text-dim"
       />
       <datalist id="base-suggestions">
         <option value="HEAD" />

src/components/RightSidebar/CodeReview/ReviewPanel.tsx

@@ -626,7 +626,7 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
                     Try selecting a different base or make some changes.
                   </div>
                   {diagnosticInfo && (
-                    <details className="mt-4 max-w-[500px] w-full bg-modal-bg border border-border-light rounded p-3 cursor-pointer [&_summary]:text-muted [&_summary]:text-xs [&_summary]:font-medium [&_summary]:select-none [&_summary]:list-none [&_summary]:flex [&_summary]:items-center [&_summary]:gap-1.5 [&_summary::-webkit-details-marker]:hidden [&_summary::before]:content-['▶'] [&_summary::before]:text-[10px] [&_summary::before]:transition-transform [&_summary::before]:duration-200 [&[open]_summary::before]:rotate-90">
+                    <details className="mt-4 max-w-96 w-full bg-modal-bg border border-border-light rounded p-3 cursor-pointer [&_summary]:text-muted [&_summary]:text-xs [&_summary]:font-medium [&_summary]:select-none [&_summary]:list-none [&_summary]:flex [&_summary]:items-center [&_summary]:gap-1.5 [&_summary::-webkit-details-marker]:hidden [&_summary::before]:content-['▶'] [&_summary::before]:text-[10px] [&_summary::before]:transition-transform [&_summary::before]:duration-200 [&[open]_summary::before]:rotate-90">
                       <summary>Show diagnostic info</summary>
                       <div className="mt-3 font-monospace text-[11px] text-foreground leading-[1.6]">
                         <div className="grid grid-cols-[140px_1fr] gap-3 py-1 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-border-light">
@@ -694,7 +694,7 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
 
           {/* FileTree positioning handled by CSS order property */}
           {(fileTree ?? isLoadingTree) && (
-            <div className="w-[300px] flex-shrink-0 border-l border-border-light flex flex-col overflow-hidden min-h-0 order-2 @[800px]:w-full @[800px]:h-auto @[800px]:flex-[0_0_auto] @[800px]:border-l-0 @[800px]:border-b @[800px]:border-border-light @[800px]:order-0">
+            <div className="w-80 flex-shrink-0 border-l border-border-light flex flex-col overflow-hidden min-h-0 order-2 @[800px]:w-full @[800px]:h-auto @[800px]:flex-[0_0_auto] @[800px]:border-l-0 @[800px]:border-b @[800px]:border-border-light @[800px]:order-0">
               <FileTree
                 root={fileTree}
                 selectedPath={selectedFilePath}

src/components/RightSidebar/CodeReview/UntrackedStatus.tsx

@@ -135,7 +135,7 @@ export const UntrackedStatus: React.FC<UntrackedStatusProps> = ({
       </div>
 
       {showTooltip && hasUntracked && (
-        <div className="absolute top-[calc(100%+8px)] right-0 bg-modal-bg border border-bg-medium rounded p-2 min-w-[200px] max-w-[400px] z-[1000] shadow-[0_4px_12px_rgba(0,0,0,0.3)] animate-in fade-in slide-in-from-top-1 duration-150">
+        <div className="absolute top-[calc(100%+8px)] right-0 bg-modal-bg border border-bg-medium rounded p-2 min-w-48 max-w-96 z-[1000] shadow-[0_4px_12px_rgba(0,0,0,0.3)] animate-in fade-in slide-in-from-top-1 duration-150">
           <div className="text-[11px] font-semibold text-foreground mb-2 pb-1.5 border-b border-border-light">
             Untracked Files ({count})
           </div>

src/components/ThinkingSlider.stories.tsx

@@ -39,7 +39,7 @@ export const Default: Story = {};
 
 export const DifferentModels: Story = {
   render: () => (
-    <div className="flex flex-col gap-[30px] p-10 bg-dark min-w-[300px]">
+    <div className="flex flex-col gap-[30px] p-10 bg-dark min-w-80">
       <div>
         <div className="text-xs text-muted-light font-primary mb-2">Claude Sonnet 4.5</div>
         <ThinkingSliderComponent modelString="anthropic:claude-sonnete-4-5" />
@@ -60,7 +60,7 @@ export const DifferentModels: Story = {
 
 export const InteractiveDemo: Story = {
   render: () => (
-    <div className="flex flex-col gap-[30px] p-10 bg-dark min-w-[300px]">
+    <div className="flex flex-col gap-[30px] p-10 bg-dark min-w-80">
       <div className="text-[13px] text-bright font-primary mb-2.5">
         Try moving the slider to see the purple glow effect intensify:
       </div>
@@ -95,7 +95,7 @@ export const InteractiveDemo: Story = {
 export const LockedThinking: Story = {
   args: { modelString: "openai:gpt-5-pro" },
   render: (args) => (
-    <div className="flex flex-col gap-[30px] p-10 bg-dark min-w-[300px]">
+    <div className="flex flex-col gap-[30px] p-10 bg-dark min-w-80">
       <div className="text-[13px] text-bright font-primary mb-2.5">
         Some models have locked thinking levels based on their capabilities:
       </div>

src/components/ThinkingSlider.tsx

@@ -98,7 +98,7 @@ export const ThinkingSliderComponent: React.FC<ThinkingControlProps> = ({ modelS
         <div className="flex items-center gap-2 ml-5">
           <label className="text-[10px] text-subdued select-none">Thinking:</label>
           <span
-            className="min-w-[45px] uppercase select-none transition-all duration-200"
+            className="min-w-11 uppercase select-none transition-all duration-200"
             style={textStyle}
             aria-live="polite"
             aria-label={`Thinking level fixed to ${fixedLevel}`}
@@ -158,7 +158,7 @@ export const ThinkingSliderComponent: React.FC<ThinkingControlProps> = ({ modelS
           }
         />
         <span
-          className="min-w-[45px] uppercase select-none transition-all duration-200"
+          className="min-w-11 uppercase select-none transition-all duration-200"
           style={textStyle}
           aria-live="polite"
         >

src/components/TipsCarousel.stories.tsx

@@ -24,7 +24,7 @@ export const Default: Story = {
 
 export const WithExplanation: Story = {
   render: () => (
-    <div className="flex flex-col gap-5 p-5 bg-dark min-w-[500px]">
+    <div className="flex flex-col gap-5 p-5 bg-dark min-w-96">
       <div className="text-[13px] text-bright font-primary">
         Tips rotate automatically based on time. Hover to see the gradient effect:
       </div>
@@ -38,7 +38,7 @@ export const WithExplanation: Story = {
 
 export const DebugControls: Story = {
   render: () => (
-    <div className="flex flex-col gap-5 p-5 bg-dark min-w-[500px]">
+    <div className="flex flex-col gap-5 p-5 bg-dark min-w-96">
       <div className="text-[13px] text-bright font-primary">For debugging, you can use:</div>
       <TipsCarousel fixedTipIndex={1} />
       <div className="text-[11px] text-muted-light font-monospace p-3 bg-modal-bg rounded">

src/components/Tooltip.tsx

@@ -221,7 +221,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
       className={cn(
         "bg-modal-bg text-foreground text-left rounded px-[10px] py-[6px] z-[9999]",
         "text-[11px] font-normal font-sans border border-separator-light shadow-[0_2px_8px_rgba(0,0,0,0.4)]",
-        width === "wide" ? "whitespace-normal max-w-[300px] w-max" : "whitespace-nowrap",
+        width === "wide" ? "whitespace-normal max-w-80 w-max" : "whitespace-nowrap",
         interactive ? "pointer-events-auto" : "pointer-events-none",
         className
       )}
@@ -245,7 +245,7 @@ export const HelpIndicator: React.FC<{ className?: string; children?: React.Reac
   <span
     className={cn(
       "text-text-dim text-[7px] cursor-help inline-block align-baseline",
-      "border border-border-subtle rounded-full w-[10px] h-[10px] leading-[8px]",
+      "border border-border-subtle rounded-full w-2.5 h-[10px] leading-[8px]",
       "text-center font-bold mb-[2px]",
       className
     )}

src/components/shared/DiffRenderer.tsx

@@ -226,7 +226,7 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
                 </span>
                 {showLineNumbers && (
                   <span
-                    className="flex items-center justify-end min-w-[35px] pr-1 select-none shrink-0"
+                    className="flex items-center justify-end min-w-9 pr-1 select-none shrink-0"
                     style={{
                       color: getContrastColor(chunk.type),
                       opacity: chunk.type === "add" || chunk.type === "remove" ? 0.9 : 0.6,
@@ -569,7 +569,7 @@ export const SelectableDiffRenderer = React.memo<SelectableDiffRendererProps>(
                   </span>
                   {showLineNumbers && (
                     <span
-                      className="flex items-center justify-end min-w-[35px] pr-1 select-none shrink-0"
+                      className="flex items-center justify-end min-w-9 pr-1 select-none shrink-0"
                       style={{
                         color: getContrastColor(lineInfo.type),
                         opacity: lineInfo.type === "add" || lineInfo.type === "remove" ? 0.9 : 0.6,

src/components/tools/BashToolCall.tsx

@@ -67,7 +67,7 @@ export const BashToolCall: React.FC<BashToolCallProps> = ({
           <span>🔧</span>
           <Tooltip>bash</Tooltip>
         </TooltipWrapper>
-        <span className="text-text font-monospace whitespace-nowrap overflow-hidden text-ellipsis max-w-[400px]">
+        <span className="text-text font-monospace whitespace-nowrap overflow-hidden text-ellipsis max-w-96">
           {args.script}
         </span>
         <span

src/components/tools/FileEditToolCall.tsx

@@ -143,7 +143,7 @@ export const FileEditToolCall: React.FC<FileEditToolCallProps> = ({
             <span>✏️</span>
             <Tooltip>{toolName}</Tooltip>
           </TooltipWrapper>
-          <span className="text-text font-monospace whitespace-nowrap overflow-hidden text-ellipsis max-w-[400px]">
+          <span className="text-text font-monospace whitespace-nowrap overflow-hidden text-ellipsis max-w-96">
             {filePath}
           </span>
         </div>