FLOW-2583: Fix toolbar layout and icon size in prompt box sidebar - (Jira Coding Agent)

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.

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;

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>

src/rovo-dev/ui/prompt-box/prompt-input/PromptInput.tsx

@@ -381,11 +381,12 @@
                     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 @@
                                 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 @@
                                 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 @@
                                 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 @@
                                 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 @@
                         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 @@
                                 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 @@
                             onClick={() => handleSend()}
                             disabled={disableSendButton || !isWaitingForPrompt || isEmpty}
                         >
-                            <SendIcon label="Send prompt" />
+                            <SendIcon label="Send prompt" size="small" />
                         </button>
                     )}
                 </div>

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;
     }

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>