fix: control elements padding in chatbox

packages/ui/src/components/chat/StatusRow.tsx

@@ -55,6 +55,9 @@ interface StatusRowProps {
   abortActive?: boolean;
   completionId?: string | null;
   isComplete?: boolean;
+  // Abort state (for mobile/vscode)
+  showAbort?: boolean;
+  onAbort?: () => void;
   // Abort status display
   showAbortStatus?: boolean;
 }
@@ -68,6 +71,8 @@ export const StatusRow: React.FC<StatusRowProps> = ({
   abortActive,
   completionId,
   isComplete,
+  showAbort,
+  onAbort,
   showAbortStatus,
 }) => {
   const [isExpanded, setIsExpanded] = React.useState(false);
@@ -153,6 +158,18 @@ export const StatusRow: React.FC<StatusRowProps> = ({
 
   const toggleExpanded = () => setIsExpanded((prev) => !prev);
 
+  // Abort button for mobile/vscode
+  const abortButton = showAbort && onAbort ? (
+    <button
+      type="button"
+      onClick={onAbort}
+      className="flex items-center justify-center h-[1.2rem] w-[1.2rem] text-[var(--status-error)] transition-opacity hover:opacity-80 focus-visible:outline-none flex-shrink-0"
+      aria-label="Stop generating"
+    >
+      <RiCloseCircleLine size={18} aria-hidden="true" />
+    </button>
+  ) : null;
+
   // Todo trigger button
   const todoTrigger = hasActiveTodos ? (
     <button
@@ -206,8 +223,9 @@ export const StatusRow: React.FC<StatusRowProps> = ({
           ) : null}
         </div>
 
-        {/* Right: Todo */}
+        {/* Right: Abort (mobile only) + Todo */}
         <div className="relative flex items-center gap-2 flex-shrink-0" ref={popoverRef}>
+          {abortButton}
           {todoTrigger}
 
           {/* Popover dropdown */}