fix(app): correcting text, wrapping module icons, and correcting text color on camera settings (#20061)

# Overview

Removed wrapping behavior of module icons in protocol card and robot
card
Corrected text on camera settings in run setup
Updated camera enabled text to a chip

## Test Plan and Hands on Testing

Smoke tested: 
<img width="931" height="332" alt="Screenshot 2025-11-06 at 12 35 10 PM"
src="https://github.com/user-attachments/assets/696b8acd-a14f-4b32-95c6-7643240d3ee5"
/>
<img width="931" height="149" alt="Screenshot 2025-11-06 at 4 11 08 PM"
src="https://github.com/user-attachments/assets/b37ebf6b-7a86-4b6b-95f8-98950bbbe47e"
/>


<img width="900" height="547" alt="Screenshot 2025-11-06 at 3 15 43 PM"
src="https://github.com/user-attachments/assets/d8198898-5852-4930-9830-85385138b68c"
/>

<img width="913" height="564" alt="Screenshot 2025-11-06 at 3 21 59 PM"
src="https://github.com/user-attachments/assets/7a5e8bcd-6cab-417a-9724-ac342613d165"
/>
<img width="991" height="617" alt="Screenshot 2025-11-06 at 4 19 05 PM"
src="https://github.com/user-attachments/assets/d4c4266a-45b0-4c3d-874b-5078a79c564c"
/>



## Risk assessment
low

Closes RQA-4819
Closes RQA-4825
Closes RQA-4824
Closes RQA-4830
Closes RQA-4823
Closes RQA-4835

Author: rclarke0

app/src/assets/localization/en/anonymous.json

@@ -47,6 +47,7 @@
   "language_preference_description": "The app matches your system language unless you select another language below. You can change the language later in the app settings.",
   "learn_uninstalling": "Learn more about uninstalling the app",
   "livestream_window_title": "Robot Live Camera",
+  "live_video_description_odd": "View real-time video of the deck in the App while running a protocol.",
   "loosen_screws_and_detach": "Loosen screws and detach gripper",
   "modal_instructions": "For step-by-step instructions on setting up your module, consult the Quickstart Guide that came in its box.",
   "module_calibration_failed": "<block>Module calibration was unsuccessful. Make sure the calibration adapter is fully seated on the module and try again. If you still have trouble, contact support.</block><block>{{error}}</block>",

app/src/assets/localization/en/branded.json

@@ -47,6 +47,7 @@
   "language_preference_description": "The Opentrons App matches your system language unless you select another language below. You can change the language later in the app settings.",
   "learn_uninstalling": "Learn more about uninstalling the Opentrons App",
   "livestream_window_title": "Opentrons Live Camera",
+  "live_video_description_odd": "View real-time video of the deck in the Opentrons App while running a protocol.",
   "loosen_screws_and_detach": "Loosen screws and detach Flex Gripper",
   "modal_instructions": "For step-by-step instructions on setting up your module, consult the Quickstart Guide that came in its box. You can also click the link below or scan the QR code to visit the modules section of the Opentrons Help Center.",
   "module_calibration_failed": "<block>Module calibration was unsuccessful. Make sure the calibration adapter is fully seated on the module and try again. If you still have trouble, contact Opentrons Support.</block><block>{{error}}</block>",

app/src/assets/localization/en/device_settings.json

@@ -19,7 +19,7 @@
   "are_you_sure_you_want_to_disconnect": "Are you sure you want to disconnect from {{ssid}}?",
   "attach_a_pipette_before_calibrating": "Attach a pipette in order to perform calibration",
   "authentication": "Authentication",
-  "automatically_capture_image": "Automatically capture an image of the deck if an error occurs.",
+  "automatically_capture_image": "Automatically capture an image of the deck in the event of an error.",
   "boot_scripts": "Boot scripts",
   "both": "Both",
   "brightness": "Brightness",
@@ -43,7 +43,7 @@
   "camera_preferences_description_long": "The deck camera offers live video monitoring during protocol runs and supports image capture.",
   "camera_required": "Camera is required",
   "camera_status": "Camera Status",
-  "camera_status_description": "The deck camera provides live video during protocol runs, allows manual or automated image capture of the deck, and records images automatically when errors occur for easier troubleshooting.",
+  "camera_status_description": "The deck camera offers live video monitoring during protocol runs and supports image capture—either manually, automatically, or in response to runtime errors for easier troubleshooting.",
   "cancel_software_update": "Cancel software update",
   "change_network": "Change network",
   "characters_max": "17 characters max",
@@ -205,7 +205,7 @@
   "legacy_settings": "Legacy Settings",
   "likely_incorrect_password": "Likely incorrect network password.",
   "live_video": "Live Video",
-  "live_video_description": "View real-time video of the deck during protocol runs.",
+  "live_video_description": "View real-time video of the deck while a running a protocol",
   "live_video_lc": "Live video",
   "mac_address": "MAC Address",
   "manage_oem_settings": "Manage OEM settings",

app/src/assets/localization/en/protocol_setup.json

@@ -49,7 +49,7 @@
   "camera_disabled": "Camera disabled",
   "camera_enabled": "Camera enabled",
   "camera_settings": "camera settings",
-  "camera_setup_step_description": "Set your camera preferences for this protocol run.",
+  "camera_setup_step_description": "Review camera preferences for this protocol run.",
   "camera_setup_step_title": "Camera",
   "cancel_and_restart_to_edit": "Cancel the run and restart setup to edit",
   "check_locations_and_volumes": "Check locations and volumes",

app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunSetup.tsx

@@ -418,7 +418,6 @@ export function ProtocolRunSetup({
       rightElProps: {
         stepKey: CAMERA_SETUP_STEP_KEY,
         complete: !missingSteps.includes(CAMERA_SETUP_STEP_KEY),
-        // TODO(jh, 09-29-25): Wire this enabled/disabled state to the proper endpoint.
         completeText: t('camera_enabled'),
         incompleteText: t('check_preferences'),
         incompleteElement: null,
@@ -581,14 +580,14 @@ function StepRightElement(props: StepRightElementProps): JSX.Element | null {
       <Flex flexDirection={DIRECTION_ROW} alignItems={ALIGN_CENTER}>
         <Icon
           size="1rem"
-          color={COLORS.yellow60}
+          color={COLORS.grey60}
           marginRight={SPACING.spacing8}
           name="alert-circle"
           id={`RunSetupCard_${props.stepKey}_incompleteIcon`}
         />
         <StyledText
           desktopStyle="bodyDefaultSemiBold"
-          color={COLORS.yellow60}
+          color={COLORS.grey60}
           marginRight={SPACING.spacing16}
           id={`RunSetupCard_${props.stepKey}_incompleteText`}
         >

app/src/organisms/Desktop/Devices/ProtocolRun/SetupCamera/__tests__/SetupCamera.test.tsx

@@ -74,7 +74,7 @@ describe('SetupCamera', () => {
 
     screen.getByText('Camera Status')
     screen.getByText(
-      'The deck camera provides live video during protocol runs, allows manual or automated image capture of the deck, and records images automatically when errors occur for easier troubleshooting.'
+      'The deck camera offers live video monitoring during protocol runs and supports image capture—either manually, automatically, or in response to runtime errors for easier troubleshooting.'
     )
   })
 

app/src/organisms/Desktop/Devices/ProtocolRun/SetupCamera/__tests__/SetupRunCameraSettings.test.tsx

@@ -48,7 +48,7 @@ describe('SetupRunCameraUsage', () => {
 
     screen.getByText('Error Recovery')
     screen.getByText(
-      'Automatically capture an image of the deck if an error occurs.'
+      'Automatically capture an image of the deck in the event of an error.'
     )
   })
 

app/src/organisms/Desktop/Devices/ProtocolRun/SetupCamera/index.tsx

@@ -3,6 +3,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { useNavigate } from 'react-router-dom'
 
 import {
+  Chip,
   InlineNotification,
   PrimaryButton,
   StyledText,
@@ -168,19 +169,9 @@ function CameraStatus({
             {t('camera_status')}
           </StyledText>
           {isCameraEnabled ? (
-            <StyledText
-              desktopStyle="captionRegular"
-              className={styles.camera_status_enabled}
-            >
-              {t('enabled')}
-            </StyledText>
+            <Chip text={t('enabled')} type={'success'} hasIcon={false} />
           ) : (
-            <StyledText
-              desktopStyle="captionRegular"
-              className={styles.camera_status_disabled}
-            >
-              {t('disabled')}
-            </StyledText>
+            <Chip text={t('disabled')} type={'neutral'} hasIcon={false} />
           )}
         </div>
         <StyledText desktopStyle="bodyDefaultRegular">

app/src/organisms/Desktop/Devices/RobotCard.tsx

@@ -119,7 +119,6 @@ export function RobotCard(props: RobotCardProps): JSX.Element | null {
               <AttachedInstruments robotName={robotName} />
               <Flex
                 gridGap={SPACING.spacing4}
-                flexWrap={WRAP}
                 justifyContent={JUSTIFY_SPACE_BETWEEN}
               >
                 <AttachedModules robotName={robotName} />
@@ -151,12 +150,12 @@ function AttachedModules(props: { robotName: string }): JSX.Element | null {
     <Flex
       flexDirection={DIRECTION_COLUMN}
       gridGap={SPACING.spacing4}
-      width="85px"
+      width="100%"
     >
       <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
         {t('modules')}
       </StyledText>
-      <Flex flexWrap={WRAP}>
+      <Flex>
         {attachedModules.map((module, i) => (
           <ModuleIcon
             key={`${String(module.moduleModel)}_${i}_${robotName}`}
@@ -218,12 +217,7 @@ function AttachedInstruments(props: { robotName: string }): JSX.Element {
   const leftAndRightMountsPipetteDisplayName = null
 
   return (
-    <Flex
-      flex="1"
-      flexDirection={DIRECTION_COLUMN}
-      gridGap={SPACING.spacing4}
-      minWidth="24rem"
-    >
+    <Flex flex="1" flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
       <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
         {i18n.format(t('shared:instruments'), 'capitalize')}
       </StyledText>

app/src/organisms/Desktop/Devices/RobotSettings/RobotSettingsCamera/__tests__/CameraStatusContainer.test.tsx

@@ -36,7 +36,7 @@ describe('CameraStatusContainer', () => {
     render(mockProps)
 
     screen.getByText(
-      'The deck camera provides live video during protocol runs, allows manual or automated image capture of the deck, and records images automatically when errors occur for easier troubleshooting.'
+      'The deck camera offers live video monitoring during protocol runs and supports image capture—either manually, automatically, or in response to runtime errors for easier troubleshooting.'
     )
   })