From 0c08f6beb02a78f1b9e3457aec28e4c5fee11ea2 Mon Sep 17 00:00:00 2001
From: CasualDeveloper <10153929+CasualDeveloper@users.noreply.github.com>
Date: Fri, 26 Dec 2025 00:06:09 +0800
Subject: [PATCH] feat(tui): allow session names to wrap to two lines in dialog

- Replace overflow hidden with wrapMode word to enable text wrapping
- Add maxHeight=2 to limit to two lines
- Add flexWrap=wrap on option container to allow content flow
- Change truncation from 61 to 122 chars (~2 lines worth)

Closes #6165
---
 packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx b/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx
index 618bf3b3cb6..7c5de5d24eb 100644
--- a/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx
+++ b/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx
@@ -1,6 +1,6 @@
 import { InputRenderable, RGBA, ScrollBoxRenderable, TextAttributes } from "@opentui/core"
 import { useTheme, selectedForeground } from "@tui/context/theme"
-import { entries, filter, flatMap, groupBy, pipe, take } from "remeda"
+import { entries, filter, flatMap, groupBy, pipe } from "remeda"
 import { batch, createEffect, createMemo, For, Show, type JSX, on } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useKeyboard, useTerminalDimensions } from "@opentui/solid"
@@ -271,6 +271,7 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
                       <box
                         id={JSON.stringify(option.value)}
                         flexDirection="row"
+                        flexWrap="wrap"
                         onMouseMove={() => {
                           setStore("input", "mouse")
                         }}
@@ -357,11 +358,10 @@ function Option(props: {
         flexGrow={1}
         fg={props.active ? fg : props.current ? theme.primary : theme.text}
         attributes={props.active ? TextAttributes.BOLD : undefined}
-        overflow="hidden"
-        wrapMode="none"
-        paddingLeft={3}
+        wrapMode="word"
+        maxHeight={2}
       >
-        {Locale.truncate(props.title, 61)}
+        {Locale.truncate(props.title, 122)}
         <Show when={props.description}>
           <span style={{ fg: props.active ? fg : theme.textMuted }}> {props.description}</span>
         </Show>