diff --git a/frontend/src/backtests/BacktestPage.tsx b/frontend/src/backtests/BacktestPage.tsx
index 85116d6..b7f7bff 100644
--- a/frontend/src/backtests/BacktestPage.tsx
+++ b/frontend/src/backtests/BacktestPage.tsx
@@ -368,6 +368,8 @@ export function BacktestPage({
               render: (value, r) => (
                 <Button
                   theme="borderless"
+                  className="backtest-name-button"
+                  title={String(value)}
                   onClick={() => openRun(r!.backtest_run_id)}
                 >
                   {String(value)}
@@ -419,6 +421,8 @@ export function BacktestPage({
               render: (v, d) => (
                 <Button
                   theme="borderless"
+                  className="backtest-name-button"
+                  title={String(v)}
                   onClick={() => void perform(() => loadDraft(d!.id))}
                 >
                   {String(v)}
diff --git a/frontend/src/backtests/style.css b/frontend/src/backtests/style.css
index 73347fa..789de23 100644
--- a/frontend/src/backtests/style.css
+++ b/frontend/src/backtests/style.css
@@ -86,3 +86,16 @@
     gap: 8px;
   }
 }
+
+/* Bound the button and its flex content independently so long names stay in their column. */
+.backtest-page .backtest-name-button {
+  max-width: 100%;
+  min-width: 0;
+}
+.backtest-page .backtest-name-button .semi-button-content {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}