fix popout columns logic for long strings (#7201)

## 📝 Summary

<!--
Provide a concise summary of what this pull request is addressing.

If this PR fixes any issues, list them here by number (e.g., Fixes
#123).
-->

Issue where long strings didn't show up as popout columns, because they
had markup. Also increases the width of popout columns and ensures they
are truncated when inline for a clean table look.

before:


https://github.com/user-attachments/assets/f9a07653-9626-4ba4-99a9-2a242be5e549

after: 


https://github.com/user-attachments/assets/0a4e1a83-ed17-4572-8dc4-c01953aa87f9

## 🔍 Description of Changes

<!--
Detail the specific changes made in this pull request. Explain the
problem addressed and how it was resolved. If applicable, provide before
and after comparisons, screenshots, or any relevant details to help
reviewers understand the changes easily.
-->

## 📋 Checklist

- [x] I have read the [contributor
guidelines](https://github.com/marimo-team/marimo/blob/main/CONTRIBUTING.md).
- [ ] For large changes, or changes that affect the public API: this
change was discussed or approved through an issue, on
[Discord](https://marimo.io/discord?ref=pr), or the community
[discussions](https://github.com/marimo-team/marimo/discussions) (Please
provide a link if applicable).
- [ ] I have added tests for the changes made.
- [x] I have run the code and verified that it works as expected.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Improves table cell rendering by detecting markdown and using a
markdown renderer in popouts, refines long-string popout logic, adds
copy-to-clipboard and layout tweaks, and updates tests and smoke demos.
> 
> - **Frontend · Data Table**
> - **Popout behavior**: Treat strings as inline unless content is
entirely markup or short; respect wrapping; increase popout width
(`w-96`); use `max-w-fit` trigger; apply wrapping styles; add
copy-to-clipboard control in popout header.
> - **Markdown support**: Add `isMarkdown` (via `marked`) and
`MarkdownUrlDetector` to render markdown with `MarkdownRenderer` in
popouts; keep `UrlDetector` for non-markdown.
> - **Rendering logic**: Use `allMarkup` check; pass wrapped state
consistently; minor class adjustments.
> - **Tests**: Add `isMarkdown` test suite; extend `url-detector` tests.
>   - **Config**: Inline `streamdown` deps in Vitest server config.
> - **Smoke tests**:
> - Add `tables/markdown_example.py` and update
`tables/rich_elements.py` (new long text with URLs, formatting).
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
de7ea45. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: Light2Dark

frontend/src/components/data-table/columns.tsx

@@ -332,7 +332,7 @@ const PopoutColumn = ({
     <EmotionCacheProvider container={null}>
       <Popover>
         <PopoverTrigger
-          className={cn(cellStyles, "w-fit outline-hidden")}
+          className={cn(cellStyles, "max-w-fit outline-hidden")}
           onClick={selectCell}
           onMouseDown={(e) => {
             // Prevent cell underneath from being selected
@@ -477,6 +477,8 @@ export function renderCellValue<TData, TValue>({
   const dataType = column.columnDef.meta?.dataType;
   const dtype = column.columnDef.meta?.dtype;
 
+  const isWrapped = column.getColumnWrapping?.() === "wrap";
+
   if (dataType === "datetime" && typeof value === "string") {
     try {
       const date = new Date(value);
@@ -508,10 +510,13 @@ export function renderCellValue<TData, TValue>({
       : String(renderValue());
 
     const parts = parseContent(stringValue);
-    const hasMarkup = parts.some((part) => part.type !== "text");
-    if (hasMarkup || stringValue.length < MAX_STRING_LENGTH) {
+    const allMarkup = parts.every((part) => part.type !== "text");
+    if (allMarkup || stringValue.length < MAX_STRING_LENGTH || isWrapped) {
       return (
-        <div onClick={selectCell} className={cellStyles}>
+        <div
+          onClick={selectCell}
+          className={cn(cellStyles, isWrapped && COLUMN_WRAPPING_STYLES)}
+        >
           <UrlDetector parts={parts} />
         </div>
       );
@@ -522,9 +527,9 @@ export function renderCellValue<TData, TValue>({
         cellStyles={cellStyles}
         selectCell={selectCell}
         rawStringValue={stringValue}
-        contentClassName="max-h-64 overflow-auto whitespace-pre-wrap break-words text-sm"
+        contentClassName="max-h-64 overflow-auto whitespace-pre-wrap break-words text-sm w-96"
         buttonText="X"
-        wrapped={column.getColumnWrapping?.() === "wrap"}
+        wrapped={isWrapped}
       >
         <UrlDetector parts={parts} />
       </PopoutColumn>
@@ -575,7 +580,7 @@ export function renderCellValue<TData, TValue>({
         cellStyles={cellStyles}
         selectCell={selectCell}
         rawStringValue={rawStringValue}
-        wrapped={column.getColumnWrapping?.() === "wrap"}
+        wrapped={isWrapped}
       >
         <JsonOutput data={value} format="tree" className="max-h-64" />
       </PopoutColumn>

marimo/_smoke_tests/tables/rich_elements.py

@@ -1,6 +1,6 @@
 import marimo
 
-__generated_with = "0.15.5"
+__generated_with = "0.17.6"
 app = marimo.App(width="medium")
 
 
@@ -15,7 +15,9 @@ def _():
 
 @app.cell
 def _(mo):
-    mo.md(r"""# Printing Rich Elements""")
+    mo.md(r"""
+    # Printing Rich Elements
+    """)
     return
 
 
@@ -112,6 +114,10 @@ def simple_echo_model(messages, config):
             "lorem_ipsum_dollar_sit" * 20,
             "lorem_ipsum_dollar_sit" * 20,
         ],
+        "long_text_with_markup": [
+            "lorem link: https://www.google.com" * 4,
+            "lorem link: https://www.google.com" * 4,
+        ],
         "large_array": [
             [1] * 60,
             [2] * 60,
@@ -171,7 +177,9 @@ def _(data, mo, pl):
 
 @app.cell
 def _(mo, password):
-    mo.md(f"""### Password value: {password.value}""")
+    mo.md(f"""
+    ### Password value: {password.value}
+    """)
     return