From 310654749fad79386d1ee79f4bf4d9bc0508c8ea Mon Sep 17 00:00:00 2001
From: Shruti Patel <shrutipatel@meta.com>
Date: Mon, 6 Apr 2026 21:51:01 -0700
Subject: [PATCH] Update subtitle rendering in notebook Analysis Cards (#5112)

Summary:

Matches the web UI change from D97406631 for notebook (Jupyter/Bento) rendering of Ax analysis cards.

**Before**: Subtitles were hidden behind a clickable <details>/<summary> element with an info icon -- users had to click to reveal the subtitle text.

**After**: Subtitles are now shown as visible, secondary-styled text directly beneath the title, truncated to a single line via an ellipsis. A "See more"/"See less" toggle appears automatically when the subtitle overflows.

Differential Revision: D98690381
---
 ax/core/analysis_card.py | 70 +++++++++++++++++++++++++++++-----------
 1 file changed, 52 insertions(+), 18 deletions(-)

diff --git a/ax/core/analysis_card.py b/ax/core/analysis_card.py
index 1c76068cfe9..2819eb59163 100644
--- a/ax/core/analysis_card.py
+++ b/ax/core/analysis_card.py
@@ -19,7 +19,10 @@
 from plotly.offline import get_plotlyjs
 
 # Simple HTML template for rendering a card with a title, subtitle, and body with
-# scrollable overflow.
+# scrollable overflow. Subtitles are rendered in a <div> with max-height overflow
+# so that any HTML content (tables, lists, etc.) is valid and clipped correctly
+# in the collapsed state. A "See more"/"See less" toggle appears when content
+# overflows (matching the web UI pattern).
 html_card_template = """
 <style>
 .card {{
@@ -30,34 +33,65 @@
     border-radius: 0.5em;
     padding: 10px;
 }}
-.card-header:hover {{
-    cursor: pointer;
-}}
-.card-header details summary {{
-    list-style: none;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5em;
+.card-subtitle {{
+    color: gray;
+    font-size: 0.9em;
+    margin: 4px 0 0 0;
+    line-height: 1.4em;
+    max-height: 1.4em;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }}
-.card-header details summary::-webkit-details-marker {{
+.card-subtitle-toggle {{
+    color: #1877F2;
+    cursor: pointer;
+    font-size: 0.85em;
+    background: none;
+    border: none;
+    padding: 0;
+    margin-top: 2px;
     display: none;
 }}
-.card-header details summary::after {{
-    content: "ℹ️";
-    font-size: 0.9em;
-}}
 </style>
 <div class="card">
     <div class="card-header">
-        <details>
-            <summary><b>{title_str}</b></summary>
-            <p>{subtitle_str}</p>
-        </details>
+        <b>{title_str}</b>
+        <div class="card-subtitle">{subtitle_str}</div>
+        <button class="card-subtitle-toggle">See more</button>
     </div>
     <div class="card-body">
         {body_html}
     </div>
 </div>
+<script>
+(function() {{
+    var card = document.currentScript.previousElementSibling;
+    var subtitle = card.querySelector('.card-subtitle');
+    var toggle = card.querySelector('.card-subtitle-toggle');
+    if (subtitle && toggle) {{
+        requestAnimationFrame(function() {{
+            if (subtitle.scrollHeight > subtitle.clientHeight
+                    || subtitle.scrollWidth > subtitle.clientWidth) {{
+                toggle.style.display = 'inline';
+            }}
+        }});
+        toggle.onclick = function() {{
+            if (subtitle.style.maxHeight === 'none') {{
+                subtitle.style.maxHeight = '1.4em';
+                subtitle.style.whiteSpace = 'nowrap';
+                subtitle.style.textOverflow = 'ellipsis';
+                toggle.textContent = 'See more';
+            }} else {{
+                subtitle.style.maxHeight = 'none';
+                subtitle.style.whiteSpace = 'normal';
+                subtitle.style.textOverflow = 'clip';
+                toggle.textContent = 'See less';
+            }}
+        }};
+    }}
+}})();
+</script>
 """
 
 # Simple HTML template for rendering a *group* card with a title, subtitle, and