fix(org): stop clipping integration descriptions and long picker values

A touch screen has no tooltip to finish a clipped sentence, so these descriptions
wrap, and a picker's value ends in an ellipsis instead of a cut character.

Author: waleedlatif1

apps/sim/platform/design-system/components/activity-row/activity-row.tsx

@@ -15,6 +15,8 @@ interface ActivityRowProps {
   count?: number
   detail?: string
   detailLead?: string
+  /** Lets the detail take more lines, for a sentence a touch screen has no tooltip to finish. */
+  wrapDetail?: boolean
   metadata?: string
   /** A glyph held beside `metadata`, such as a running spinner. */
   metadataLeading?: ReactNode
@@ -50,6 +52,7 @@ export function ActivityRow({
   count,
   detail,
   detailLead,
+  wrapDetail,
   metadata,
   metadataLeading,
   showChevron = true,
@@ -67,14 +70,18 @@ export function ActivityRow({
         </span>
         {detail && (
           <span className={styles.detail} data-type='T050'>
-            <OverflowText text={detailLead ? `${detailLead} ${detail}` : detail}>
-              {detailLead && (
-                <>
-                  <strong data-type='T051'>{detailLead}</strong>{' '}
-                </>
-              )}
-              {detail}
-            </OverflowText>
+            {wrapDetail ? (
+              detail
+            ) : (
+              <OverflowText text={detailLead ? `${detailLead} ${detail}` : detail}>
+                {detailLead && (
+                  <>
+                    <strong data-type='T051'>{detailLead}</strong>{' '}
+                  </>
+                )}
+                {detail}
+              </OverflowText>
+            )}
           </span>
         )}
       </ActivityBody>

apps/sim/platform/design-system/components/picker/picker.module.css

@@ -31,6 +31,7 @@
   flex: 1;
   min-inline-size: 0;
   overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 

apps/sim/platform/embedded/app/(shell)/_components/get-started/get-started.tsx

@@ -24,6 +24,7 @@ export function GetStarted({ steps }: GetStartedProps) {
             leading={<Icon name={step.complete ? 'I072' : STEP_ICONS[step.id]} />}
             title={step.title}
             detail={step.detail}
+            wrapDetail
             metadata={step.complete ? 'Done' : undefined}
             href={step.href}
           />

apps/sim/platform/embedded/app/(shell)/integrations/_components/integration-list/integration-list.tsx

@@ -100,6 +100,7 @@ export function IntegrationList({
                   leading={item.leading}
                   title={item.name}
                   detail={item.detail}
+                  wrapDetail
                   metadata={item.status}
                 />
               ))}