diff --git a/client/src/webpages/dashboard/mrt/manual_review_job/v2/ManualReviewJobContentView.tsx b/client/src/webpages/dashboard/mrt/manual_review_job/v2/ManualReviewJobContentView.tsx
index dc88bd8..1c500b8 100644
--- a/client/src/webpages/dashboard/mrt/manual_review_job/v2/ManualReviewJobContentView.tsx
+++ b/client/src/webpages/dashboard/mrt/manual_review_job/v2/ManualReviewJobContentView.tsx
@@ -131,7 +131,7 @@ export default function ManualReviewJobContentView(props: {
   );
 
   return (
-    <div className="flex flex-col overflow-x-scroll">
+    <div className="flex flex-col">
       <div className="flex flex-row items-start py-4 space-x-4">
         {/* Split the data into two columns: non-media fields and media fields*/}
         <div className="max-w-full min-w-[50%] grow">
diff --git a/client/src/webpages/dashboard/mrt/manual_review_job/v2/ManualReviewJobFieldsComponent.tsx b/client/src/webpages/dashboard/mrt/manual_review_job/v2/ManualReviewJobFieldsComponent.tsx
index 347011a..ef1bd1f 100644
--- a/client/src/webpages/dashboard/mrt/manual_review_job/v2/ManualReviewJobFieldsComponent.tsx
+++ b/client/src/webpages/dashboard/mrt/manual_review_job/v2/ManualReviewJobFieldsComponent.tsx
@@ -14,6 +14,7 @@ import ReactAudioPlayer from 'react-audio-player';
 import { Link } from 'react-router-dom';
 
 import ComponentLoading from '../../../../../components/common/ComponentLoading';
+import CollapsibleText from '@/webpages/dashboard/mrt/manual_review_job/v2/components/CollapsibleText';
 
 import {
   GQLContentItem,
@@ -190,12 +191,23 @@ function TableRowComponent(props: {
         </div>
       );
     }
+    case 'STRING': {
+      return (
+        <div className="flex flex-col whitespace-normal align-top text-start">
+          {label ? (
+            <div className="pr-3 font-bold text-slate-500 whitespace-nowrap">
+              {label}
+            </div>
+          ) : null}
+          <CollapsibleText text={String(value)} />
+        </div>
+      );
+    }
     case 'BOOLEAN':
     case 'GEOHASH':
     case 'ID':
     case 'NUMBER':
     case 'POLICY_ID':
-    case 'STRING':
     case 'EMAIL_ADDRESS': {
       // EMAIL_ADDRESS renders as plain text for now; a follow-up could make
       // it a mailto/pivot link the way IP_ADDRESS pivots on the IP.
@@ -528,7 +540,7 @@ function FieldComponent(props: {
     case 'EMAIL_ADDRESS':
     case 'DATETIME':
       return (
-        <div className="py-0" key={data.name}>
+        <div className="py-0 min-w-0" key={data.name}>
           {!hideLabels ? (
             <div className="pb-px align-top text-start whitespace-nowrap">
               <ContentFieldLabelComponent data={data} />
@@ -646,7 +658,7 @@ function ContainerComponent(props: {
         type: data.container!.valueScalarType,
       };
       return (
-        <div key={i} className="align-top text-start whitespace-nowrap">
+        <div key={i} className="align-top text-start min-w-0">
           {/*Talk to ethan about how to avoid casting here*/}
           <TableRowComponent
             data={itemData as TableRowComponentData}
@@ -689,14 +701,14 @@ function ContainerComponent(props: {
         </div>
       ) : null}
       <div
-        className={` ${
+        className={`${
           data.container!.valueScalarType === 'IMAGE' ||
           data.container!.valueScalarType === 'VIDEO' ||
           data.container!.valueScalarType === 'AUDIO' ||
           data.container!.valueScalarType === 'MEDIA'
-            ? ''
-            : 'flex-col'
-        } flex overflow-x-scroll border-slate-200 rounded p-1.5 ${
+            ? 'flex overflow-x-scroll'
+            : 'flex flex-col'
+        } border-slate-200 rounded p-1.5 ${
           transparentBackground ? '' : 'bg-slate-100'
         } ${expanded ? 'max-h-96 overflow-y-auto' : 'overflow-y-hidden'}`}
       >
diff --git a/client/src/webpages/dashboard/mrt/manual_review_job/v2/components/CollapsibleText.test.tsx b/client/src/webpages/dashboard/mrt/manual_review_job/v2/components/CollapsibleText.test.tsx
new file mode 100644
index 0000000..94a54d2
--- /dev/null
+++ b/client/src/webpages/dashboard/mrt/manual_review_job/v2/components/CollapsibleText.test.tsx
@@ -0,0 +1,114 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+
+import '@testing-library/jest-dom/extend-expect';
+
+import CollapsibleText from '@/webpages/dashboard/mrt/manual_review_job/v2/components/CollapsibleText';
+
+describe('CollapsibleText', () => {
+  it('renders short text in full without a Read more button', () => {
+    render(<CollapsibleText text="hello world" />);
+    expect(screen.getByText('hello world')).toBeInTheDocument();
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('collapses text exceeding maxGraphemes and shows Read more', () => {
+    const longText = 'a'.repeat(2001);
+    render(<CollapsibleText text={longText} />);
+    // The full text is in the DOM (CSS line-clamp hides overflow visually, not in the DOM).
+    expect(screen.getByText(longText)).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /read more/i }),
+    ).toBeInTheDocument();
+  });
+
+  it('expands to full text and toggles to Read less on click', () => {
+    const longText = 'a'.repeat(2001);
+    render(<CollapsibleText text={longText} />);
+    const moreButton = screen.getByRole('button', { name: /read more/i });
+    fireEvent.click(moreButton);
+    expect(
+      screen.getByRole('button', { name: /read less/i }),
+    ).toBeInTheDocument();
+    // Full text is now rendered (not clamped).
+    expect(screen.getByText(longText)).toBeInTheDocument();
+  });
+
+  it('collapses again on Read less click', () => {
+    const longText = 'a'.repeat(2001);
+    render(<CollapsibleText text={longText} />);
+    fireEvent.click(screen.getByRole('button', { name: /read more/i }));
+    fireEvent.click(screen.getByRole('button', { name: /read less/i }));
+    expect(
+      screen.getByRole('button', { name: /read more/i }),
+    ).toBeInTheDocument();
+  });
+
+  it('counts graphemes, not UTF-16 code units (emoji with skin tone)', () => {
+    // 👨🏿 is a single grapheme but 4 UTF-16 code units. A naive `.length`
+    // check would collapse at 501 such graphemes (length 2004 > 2000), but
+    // a correct grapheme count (501) stays under the threshold → no collapse.
+    const grapheme = '👨🏿';
+    const underThresholdByGrapheme = grapheme.repeat(501);
+    expect(underThresholdByGrapheme.length).toBeGreaterThan(2000);
+    render(<CollapsibleText text={underThresholdByGrapheme} />);
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+
+    // 2001 graphemes (8016 UTF-16 code units) does exceed the grapheme
+    // threshold → collapses.
+    const overThresholdByGrapheme = grapheme.repeat(2001);
+    render(<CollapsibleText text={overThresholdByGrapheme} />);
+    expect(
+      screen.getByRole('button', { name: /read more/i }),
+    ).toBeInTheDocument();
+  });
+
+  it('respects a custom maxGraphemes threshold', () => {
+    // 11 chars, under default maxGraphemes (2000) but over custom maxGraphemes (10).
+    render(<CollapsibleText text="12345678901" maxGraphemes={10} />);
+    expect(
+      screen.getByRole('button', { name: /read more/i }),
+    ).toBeInTheDocument();
+  });
+
+  it('respects a custom maxLines threshold for wrapping text', () => {
+    const wrappingText = 'wrap '.repeat(20).trim();
+    const { container, rerender } = render(
+      <div style={{ width: 80 }}>
+        <CollapsibleText text={wrappingText} maxGraphemes={10} maxLines={2} />
+      </div>,
+    );
+    const clampedDiv = container.querySelector(
+      'div[style*="-webkit-box"]',
+    ) as HTMLElement;
+    expect(clampedDiv.style.webkitLineClamp).toBe('2');
+
+    rerender(
+      <div style={{ width: 80 }}>
+        <CollapsibleText text={wrappingText} maxGraphemes={10} maxLines={3} />
+      </div>,
+    );
+    expect(clampedDiv.style.webkitLineClamp).toBe('3');
+  });
+
+  it('does not collapse text at exactly maxGraphemes', () => {
+    render(<CollapsibleText text={'a'.repeat(2000)} />);
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('resets to collapsed when the text prop changes', () => {
+    // Simulates navigating between review jobs that reuse the same field name
+    // (React reuses the CollapsibleText instance). Expanding one long value,
+    //then rendering a different long value, must restore the collapsed state.
+    const { rerender } = render(<CollapsibleText text={'a'.repeat(2001)} />);
+    fireEvent.click(screen.getByRole('button', { name: /read more/i }));
+    expect(
+      screen.getByRole('button', { name: /read less/i }),
+    ).toBeInTheDocument();
+
+    rerender(<CollapsibleText text={'b'.repeat(2001)} />);
+    expect(
+      screen.getByRole('button', { name: /read more/i }),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/client/src/webpages/dashboard/mrt/manual_review_job/v2/components/CollapsibleText.tsx b/client/src/webpages/dashboard/mrt/manual_review_job/v2/components/CollapsibleText.tsx
new file mode 100644
index 0000000..4046528
--- /dev/null
+++ b/client/src/webpages/dashboard/mrt/manual_review_job/v2/components/CollapsibleText.tsx
@@ -0,0 +1,89 @@
+import { memo, useEffect, useMemo, useState } from 'react';
+
+type CollapsibleTextProps = {
+  text: string;
+  maxLines?: number;
+  maxGraphemes?: number;
+};
+
+/**
+ * Count graphemes using Intl.Segmenter (handles all scripts correctly),
+ * stopping early once the count is known to exceed `threshold`. This avoids
+ * segmenting an entire pathological paste (e.g. a 1MB string) when we only
+ * need to know whether it crosses the collapse threshold.
+ */
+function exceedsGraphemeThreshold(text: string, threshold: number): boolean {
+  const segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
+  let count = 0;
+  for (const _ of segmenter.segment(text)) {
+    count += 1;
+    if (count > threshold) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Renders text with wrapping. When the text exceeds `maxGraphemes`, it is
+ * collapsed to `maxLines` visible lines with a "Read more" / "Read less"
+ * toggle. Short text renders in full with no toggle.
+ *
+ * Memoized: props are primitives (string, number), so React.memo's shallow
+ * comparison prevents re-renders (and re-segmentation) when a parent re-renders
+ * but the text hasn't changed — important for thread histories with many copies
+ * of the same message.
+ */
+function CollapsibleTextImpl({
+  text,
+  maxLines = 12,
+  maxGraphemes = 2000,
+}: CollapsibleTextProps) {
+  const isCollapsible = useMemo(
+    () => exceedsGraphemeThreshold(text, maxGraphemes),
+    [text, maxGraphemes],
+  );
+  const [expanded, setExpanded] = useState(false);
+
+  // When the text prop changes (e.g. navigating between review jobs that reuse
+  // the same field name → React reuses this component instance), reset to the
+  // collapsed state so newly loaded long content doesn't inherit the previous
+  // job's expanded view.
+  useEffect(() => {
+    setExpanded(false);
+  }, [text]);
+
+  if (!isCollapsible) {
+    return (
+      <div className="whitespace-normal break-words text-start">{text}</div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col text-start">
+      <div
+        className="whitespace-normal break-words overflow-hidden"
+        // Inline style rather than Tailwind's line-clamp-N so the line count
+        // is fully dynamic (Tailwind's JIT won't generate line-clamp-${maxLines}
+        // from a template literal). This is exactly what line-clamp compiles to.
+        style={{
+          display: '-webkit-box',
+          WebkitBoxOrient: 'vertical',
+          WebkitLineClamp: expanded ? 'none' : maxLines,
+        }}
+      >
+        {text}
+      </div>
+      <button
+        type="button"
+        className="self-start pt-1 font-semibold text-blue-500 cursor-pointer"
+        onClick={() => setExpanded((e) => !e)}
+      >
+        {expanded ? 'Read less' : 'Read more'}
+      </button>
+    </div>
+  );
+}
+
+const CollapsibleText = memo(CollapsibleTextImpl);
+export default CollapsibleText;