tui: increase session width to accommodate longer code blocks and improve readability

This commit is contained in:
Adam 2025-12-16 16:56:34 -06:00
parent a0f9f8dabb
commit db2abc1b2c
No known key found for this signature in database
GPG key ID: 9CB48779AF150E75
3 changed files with 9 additions and 9 deletions

View file

@ -632,7 +632,7 @@ export default function Page() {
<div <div
classList={{ classList={{
"relative shrink-0 py-3 flex flex-col gap-6 flex-1 min-h-0 w-full": true, "relative shrink-0 py-3 flex flex-col gap-6 flex-1 min-h-0 w-full": true,
"max-w-146 mx-auto": !wide(), "max-w-200 mx-auto": !wide(),
}} }}
> >
<Switch> <Switch>
@ -656,7 +656,7 @@ export default function Page() {
container: container:
"w-full " + "w-full " +
(wide() (wide()
? "max-w-146 mx-auto px-6" ? "max-w-200 mx-auto px-6"
: visibleUserMessages().length > 1 : visibleUserMessages().length > 1
? "pr-6 pl-18" ? "pr-6 pl-18"
: "px-6"), : "px-6"),
@ -666,7 +666,7 @@ export default function Page() {
</div> </div>
</Match> </Match>
<Match when={true}> <Match when={true}>
<div class="size-full flex flex-col pb-45 justify-end items-start gap-4 flex-[1_0_0] self-stretch max-w-146 mx-auto px-6"> <div class="size-full flex flex-col pb-45 justify-end items-start gap-4 flex-[1_0_0] self-stretch max-w-200 mx-auto px-6">
<div class="text-20-medium text-text-weaker">New session</div> <div class="text-20-medium text-text-weaker">New session</div>
<div class="flex justify-center items-center gap-3"> <div class="flex justify-center items-center gap-3">
<Icon name="folder" size="small" /> <Icon name="folder" size="small" />
@ -692,7 +692,7 @@ export default function Page() {
</Match> </Match>
</Switch> </Switch>
<div class="absolute inset-x-0 bottom-8 flex flex-col justify-center items-center z-50"> <div class="absolute inset-x-0 bottom-8 flex flex-col justify-center items-center z-50">
<div class="w-full max-w-146 px-6"> <div class="w-full max-w-200 px-6">
<PromptInput <PromptInput
ref={(el) => { ref={(el) => {
inputRef = el inputRef = el
@ -806,7 +806,7 @@ export default function Page() {
</DragOverlay> </DragOverlay>
</DragDropProvider> </DragDropProvider>
<Show when={tabs().active()}> <Show when={tabs().active()}>
<div class="absolute inset-x-0 px-6 max-w-146 flex flex-col justify-center items-center z-50 mx-auto bottom-8"> <div class="absolute inset-x-0 px-6 max-w-200 flex flex-col justify-center items-center z-50 mx-auto bottom-8">
<PromptInput <PromptInput
ref={(el) => { ref={(el) => {
inputRef = el inputRef = el

View file

@ -327,13 +327,13 @@ export default function () {
<div <div
classList={{ classList={{
"@container relative shrink-0 pt-14 flex flex-col gap-10 min-h-0 w-full": true, "@container relative shrink-0 pt-14 flex flex-col gap-10 min-h-0 w-full": true,
"mx-auto max-w-146": !wide(), "mx-auto max-w-200": !wide(),
}} }}
> >
<div <div
classList={{ classList={{
"w-full flex justify-start items-start min-w-0": true, "w-full flex justify-start items-start min-w-0": true,
"max-w-146 mx-auto px-6": wide(), "max-w-200 mx-auto px-6": wide(),
"pr-6 pl-18": !wide() && messages().length > 1, "pr-6 pl-18": !wide() && messages().length > 1,
"px-6": !wide() && messages().length === 1, "px-6": !wide() && messages().length === 1,
}} }}
@ -356,7 +356,7 @@ export default function () {
container: container:
"w-full pb-20 " + "w-full pb-20 " +
(wide() (wide()
? "max-w-146 mx-auto px-6" ? "max-w-200 mx-auto px-6"
: messages().length > 1 : messages().length > 1
? "pr-6 pl-18" ? "pr-6 pl-18"
: "px-6"), : "px-6"),

View file

@ -32,7 +32,7 @@
[data-component="session-message-rail"][data-wide] [data-slot="session-message-rail-full"] { [data-component="session-message-rail"][data-wide] [data-slot="session-message-rail-full"] {
margin-top: 0.125rem; margin-top: 0.125rem;
left: calc(((100% - min(100%, 36.5rem)) / 2) - 1.5rem); left: calc(((100% - min(100%, 50rem)) / 2) - 1.5rem);
transform: translateX(-100%); transform: translateX(-100%);
} }