Let decision-approaches wrap at narrow widths and sync key-resource scopes.

The info-box checkboxes overflowed in a squeezed column; wrapping them and offering those scopes as chips on every approach keeps the sidebar and Applicable Scope selection in sync without publishing unchecked keys as defaults.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/components/cards/Selection/Selection.view.tsx

@@ -84,14 +84,14 @@ export function SelectionView({
       onKeyDown={onKeyDown}
     >
       <div className="flex min-w-0 flex-1 flex-col gap-1">
-        <div className="flex items-center gap-1">
-          <span className="text-medium-label text-[var(--color-content-invert-secondary)]">
+        <div className="flex min-w-0 items-center gap-1">
+          <span className="min-w-0 break-words text-medium-label text-[var(--color-content-invert-secondary)]">
             {label}
           </span>
           {showInfoIcon ? <InfoIcon /> : null}
         </div>
         {supportText ? (
-          <p className="text-x-small-paragraph text-[var(--color-content-invert-tertiary)]">
+          <p className="min-w-0 break-words text-x-small-paragraph text-[var(--color-content-invert-tertiary)]">
             {supportText}
           </p>
         ) : null}

app/components/controls/Checkbox/Checkbox.view.tsx

@@ -17,7 +17,7 @@ export function CheckboxView({
 }: CheckboxViewProps) {
   return (
     <label
-      className={`inline-flex items-center gap-[8px] cursor-pointer select-none ${
+      className={`inline-flex max-w-full min-w-0 items-center gap-[8px] cursor-pointer select-none ${
         disabled ? "opacity-60 cursor-not-allowed" : ""
       } ${className}`}
       onMouseDown={(e) => e.preventDefault()}
@@ -51,7 +51,7 @@ export function CheckboxView({
       {label && (
         <span
           id={labelId}
-          className="text-[14px] leading-[18px]"
+          className="min-w-0 flex-1 text-[14px] leading-[18px] whitespace-normal break-words"
           style={{ color: labelColor }}
         >
           {label}

app/components/controls/Chip/Chip.view.tsx

@@ -99,6 +99,7 @@ function ChipView({
 
   const baseClasses = `
     inline-flex
+    max-w-full
     items-center
     justify-center
     rounded-[var(--measures-radius-full,9999px)]
@@ -264,7 +265,7 @@ function ChipView({
       onClick={handleClick}
       {...sharedA11y}
     >
-      <span className="flex items-center justify-center">{label}</span>
+      <span className="min-w-0 truncate">{label}</span>
       {onRemove && !isDisabled && (
         <button
           type="button"

app/components/controls/InfoMessageBox/InfoMessageBox.view.tsx

@@ -45,30 +45,30 @@ function InfoMessageBoxView({
 
   return (
     <div
-      className={`flex flex-col gap-[12px] p-[var(--spacing-measures-spacing-500,20px)] rounded-[var(--measures-radius-300,12px)] border-l-2 border-solid border-[var(--color-border-default-secondary,#1f1f1f)] bg-[var(--color-content-inverse-secondary,#1f1f1f)] w-full min-w-0 ${className}`}
+      className={`flex w-full min-w-0 items-start gap-[var(--measures-spacing-200,8px)] p-[var(--spacing-measures-spacing-500,20px)] rounded-[var(--measures-radius-300,12px)] border-l-2 border-solid border-[var(--color-border-default-secondary,#1f1f1f)] bg-[var(--color-content-inverse-secondary,#1f1f1f)] ${className}`}
       role="region"
       aria-label={title}
     >
-      <div className="flex items-center gap-[var(--measures-spacing-200,8px)] min-w-0">
-        <div
-          className="relative shrink-0 size-6 flex items-center justify-center"
-          data-name="Asset / Icon / exclamation"
-        >
-          {icon ?? <ExclamationIconInline />}
-        </div>
-        <p className="text-small-label text-[var(--color-content-default-primary,white)] min-w-0">
+      <div
+        className="relative shrink-0 size-6 flex items-center justify-center"
+        data-name="Asset / Icon / exclamation"
+      >
+        {icon ?? <ExclamationIconInline />}
+      </div>
+      <div className="flex min-w-0 flex-1 flex-col gap-[12px]">
+        <p className="text-small-label text-[var(--color-content-default-primary,white)] min-w-0 break-words">
           {title}
         </p>
-      </div>
-      <div className="flex flex-col gap-[12px] [&_label]:gap-[6px] [&_label_span]:text-x-small-paragraph [&_label_span]:opacity-80 pl-8">
-        <CheckboxGroup
-          mode="standard"
-          value={checkedIds}
-          onChange={handleChange}
-          options={options}
-          aria-label={title}
-          className="flex flex-col gap-[12px] !space-y-0"
-        />
+        <div className="flex min-w-0 w-full flex-col gap-[12px] [&_label]:w-full [&_label]:min-w-0 [&_label]:gap-[6px] [&_label_span]:text-x-small-paragraph [&_label_span]:opacity-80">
+          <CheckboxGroup
+            mode="standard"
+            value={checkedIds}
+            onChange={handleChange}
+            options={options}
+            aria-label={title}
+            className="flex w-full min-w-0 flex-col gap-[12px] !space-y-0"
+          />
+        </div>
       </div>
     </div>
   );