From 9e14da110895c6abe10a706ac751c4ab853ad9b6 Mon Sep 17 00:00:00 2001
From: Jira Coding Agent
 <a393d78c-73d8-4f4d-84ea-500a2d3d8fc3@connect.atlassian.com>
Date: Sun, 19 Jul 2026 23:22:29 +0000
Subject: [PATCH] Commit created by Jira Coding Agent

 Co-authored-by: Leandro Lemos <llemos@atlassian.com>
---
 CHANGELOG.md                                  |  2 ++
 src/rovo-dev/ui/RovoDev.css                   | 14 +++++------
 .../PromptContextPopup.tsx                    |  4 ++--
 .../prompt-box/prompt-input/PromptInput.tsx   | 23 ++++++++++---------
 .../AgentModeSection.tsx                      |  8 +++----
 .../PromptSettingsPopup.tsx                   |  4 ++--
 6 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ddceeeed8..ac96dc200 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,8 @@
 
 ### Bug Fixes
 
+- **RovoDev**: Fixed the prompt box toolbar breaking into multiple lines when the sidebar is narrow by preventing wrapping and allowing toolbar sections to shrink gracefully. Reduced prompt button and icon sizes from 32px/24px to 24px/16px so they no longer appear oversized.
+
 - **RovoDev**: Fixed markdown formatting in the chat view - headers now render at a consistent 16px, and tables are responsive so they no longer overflow the narrow sidebar.
 - **RovoDev**: Hid stack traces, stderr, and log details from external users while preserving them for Atlassian users.
 - **RovoDev (BBY)**: Fixed `ROVODEV_REBRAND_JCA` env var handling so the "Jira Coding Agent" rebrand works correctly in webviews.
diff --git a/src/rovo-dev/ui/RovoDev.css b/src/rovo-dev/ui/RovoDev.css
index f3afcde13..b49dabe39 100644
--- a/src/rovo-dev/ui/RovoDev.css
+++ b/src/rovo-dev/ui/RovoDev.css
@@ -923,9 +923,9 @@ body {
     justify-content: center;
     border-radius: 50%;
     border: none;
-    padding: 2px 6px;
-    height: 32px;
-    width: 32px;
+    padding: 2px;
+    height: 24px;
+    width: 24px;
 }
 
 .prompt-button-primary {
@@ -998,11 +998,11 @@ body {
 .mode-indicator {
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: 2px;
     border: 1px solid var(--vscode-focusBorder);
-    height: 32px;
-    padding: 2px 6px;
-    border-radius: 16px;
+    height: 24px;
+    padding: 2px 4px;
+    border-radius: 12px;
     background-color: var(--vscode-inputOption-activeBackground);
     color: var(--vscode-inputOption-activeForeground);
     cursor: pointer;
diff --git a/src/rovo-dev/ui/prompt-box/prompt-context-popup/PromptContextPopup.tsx b/src/rovo-dev/ui/prompt-box/prompt-context-popup/PromptContextPopup.tsx
index 7e4878169..860b815e2 100644
--- a/src/rovo-dev/ui/prompt-box/prompt-context-popup/PromptContextPopup.tsx
+++ b/src/rovo-dev/ui/prompt-box/prompt-context-popup/PromptContextPopup.tsx
@@ -64,7 +64,7 @@ const PromptContextPopup: React.FC<PromptContextPopupProps> = ({
                             className="prompt-button-secondary-open"
                             aria-label="Prompt context (open)"
                         >
-                            <CrossIcon label="Close" />
+                            <CrossIcon label="Close" size="small" />
                         </button>
                     ) : (
                         <button
@@ -73,7 +73,7 @@ const PromptContextPopup: React.FC<PromptContextPopupProps> = ({
                             className="prompt-button-secondary"
                             aria-label="Prompt context"
                         >
-                            <AddIcon label="Open prompt context" />
+                            <AddIcon label="Open prompt context" size="small" />
                         </button>
                     )}
                 </Tooltip>
diff --git a/src/rovo-dev/ui/prompt-box/prompt-input/PromptInput.tsx b/src/rovo-dev/ui/prompt-box/prompt-input/PromptInput.tsx
index f7f70f7cb..ceac5d3e4 100644
--- a/src/rovo-dev/ui/prompt-box/prompt-input/PromptInput.tsx
+++ b/src/rovo-dev/ui/prompt-box/prompt-input/PromptInput.tsx
@@ -381,11 +381,12 @@ export const PromptInputBox: React.FC<PromptInputBoxProps> = ({
                     display: 'flex',
                     flexDirection: 'row',
                     alignItems: 'center',
-                    flexWrap: 'wrap',
+                    flexWrap: 'nowrap',
                     gap: 4,
+                    minWidth: 0,
                 }}
             >
-                <div style={{ display: 'flex', flexDirection: 'row', alignContent: 'center', gap: 4 }}>
+                <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 4, minWidth: 0, flexShrink: 1, overflow: 'hidden' }}>
                     <PromptContextPopup
                         fetchSavedPrompts={handleFetchSavedPrompts}
                         canFetchSavedPrompts={canFetchSavedPrompts}
@@ -417,7 +418,7 @@ export const PromptInputBox: React.FC<PromptInputBoxProps> = ({
                                 role="button"
                                 aria-label="Disable deep plan"
                             >
-                                <AiGenerativeTextSummaryIcon label="deep plan icon" />
+                                <AiGenerativeTextSummaryIcon label="deep plan icon" size="small" />
                                 <CrossIcon size="small" label="disable deep plan" />
                             </div>
                         </Tooltip>
@@ -432,7 +433,7 @@ export const PromptInputBox: React.FC<PromptInputBoxProps> = ({
                                 role="button"
                                 aria-label="Disable Full-Context mode"
                             >
-                                <TelescopeIcon label="full-context mode icon" />
+                                <TelescopeIcon label="full-context mode icon" size="small" />
                                 <CrossIcon size="small" label="disable full-context mode" />
                             </div>
                         </Tooltip>
@@ -447,7 +448,7 @@ export const PromptInputBox: React.FC<PromptInputBoxProps> = ({
                                 role="button"
                                 aria-label="Disable YOLO mode"
                             >
-                                <LockUnlockedIcon label="yolo mode icon" />
+                                <LockUnlockedIcon label="yolo mode icon" size="small" />
                                 <CrossIcon size="small" label="disable yolo mode" />
                             </div>
                         </Tooltip>
@@ -462,13 +463,13 @@ export const PromptInputBox: React.FC<PromptInputBoxProps> = ({
                                 role="button"
                                 aria-label={`${capitalizeFirst(currentAgentMode)} mode`}
                             >
-                                {getAgentModeIcon(currentAgentMode)}
-                                <CrossIcon size="small" label={`${currentAgentMode} mode`} />
+                                {getAgentModeIcon(currentAgentMode, 'small')}
+                                <CrossIcon label={`${currentAgentMode} mode`} size="small" />
                             </div>
                         </Tooltip>
                     )}
                 </div>
-                <div>
+                <div style={{ minWidth: 0, flexShrink: 1, overflow: 'hidden' }}>
                     <AgentModelSelector
                         availableModels={availableAgentModels}
                         currentModel={currentAgentModel}
@@ -478,7 +479,7 @@ export const PromptInputBox: React.FC<PromptInputBoxProps> = ({
                         onOpenChange={handleModelOpenChange}
                     />
                 </div>
-                <div style={{ display: 'flex', gap: 8, marginLeft: 'auto' }}>
+                <div style={{ display: 'flex', gap: 8, marginLeft: 'auto', flexShrink: 0 }}>
                     {showCancelButton ? (
                         <Tooltip content="Stop generating" position="top">
                             <button
@@ -488,7 +489,7 @@ export const PromptInputBox: React.FC<PromptInputBoxProps> = ({
                                 onClick={() => onCancel()}
                                 disabled={disableSendButton || currentState.state === 'CancellingResponse'}
                             >
-                                <VideoStopOverlayIcon color={token('color.icon.danger')} label="Stop" />
+                                <VideoStopOverlayIcon color={token('color.icon.danger')} label="Stop" size="small" />
                             </button>
                         </Tooltip>
                     ) : (
@@ -498,7 +499,7 @@ export const PromptInputBox: React.FC<PromptInputBoxProps> = ({
                             onClick={() => handleSend()}
                             disabled={disableSendButton || !isWaitingForPrompt || isEmpty}
                         >
-                            <SendIcon label="Send prompt" />
+                            <SendIcon label="Send prompt" size="small" />
                         </button>
                     )}
                 </div>
diff --git a/src/rovo-dev/ui/prompt-box/prompt-settings-popup/AgentModeSection.tsx b/src/rovo-dev/ui/prompt-box/prompt-settings-popup/AgentModeSection.tsx
index ea0880047..a5fe6474e 100644
--- a/src/rovo-dev/ui/prompt-box/prompt-settings-popup/AgentModeSection.tsx
+++ b/src/rovo-dev/ui/prompt-box/prompt-settings-popup/AgentModeSection.tsx
@@ -23,14 +23,14 @@ interface AgentModeSectionProps {
     setAgentMode: (mode: AgentMode) => void;
 }
 
-export const getAgentModeIcon = (mode: string) => {
+export const getAgentModeIcon = (mode: string, size?: 'small' | 'medium') => {
     switch (mode) {
         case 'default':
-            return <RandomizeIcon label={'default mode'} />;
+            return <RandomizeIcon label={'default mode'} size={size} />;
         case 'plan':
-            return <ZoomInIcon label={'plan mode'} />;
+            return <ZoomInIcon label={'plan mode'} size={size} />;
         case 'ask':
-            return <AiGenerativeRemoveSilenceIcon label={'ask mode'} />;
+            return <AiGenerativeRemoveSilenceIcon label={'ask mode'} size={size} />;
         default:
             return null;
     }
diff --git a/src/rovo-dev/ui/prompt-box/prompt-settings-popup/PromptSettingsPopup.tsx b/src/rovo-dev/ui/prompt-box/prompt-settings-popup/PromptSettingsPopup.tsx
index 71c6df407..bc90843e1 100644
--- a/src/rovo-dev/ui/prompt-box/prompt-settings-popup/PromptSettingsPopup.tsx
+++ b/src/rovo-dev/ui/prompt-box/prompt-settings-popup/PromptSettingsPopup.tsx
@@ -136,7 +136,7 @@ const PromptSettingsPopup: React.FC<PromptSettingsPopupProps> = ({
                             className="prompt-button-secondary-open"
                             aria-label="Prompt settings (open)"
                         >
-                            <CrossIcon label="Close prompt settings" />
+                            <CrossIcon label="Close prompt settings" size="small" />
                         </button>
                     ) : (
                         <button
@@ -145,7 +145,7 @@ const PromptSettingsPopup: React.FC<PromptSettingsPopupProps> = ({
                             className="prompt-button-secondary"
                             aria-label="Prompt settings"
                         >
-                            <CustomizeIcon label="Prompt settings" />
+                            <CustomizeIcon label="Prompt settings" size="small" />
                         </button>
                     )}
                 </Tooltip>