monadical/opencode
14
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

fix(desktop): Improve User Message Badges for Big Titles and Small Screens (#8037)

Browse Source
This commit is contained in:
Daniel Polito
2026-01-12 17:22:03 -03:00
committed by GitHub
parent f2504d8eb2
commit b4f33485a7
2 changed files with 26 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
packages/ui/src/components/session-turn.css
View File

@@ -28,35 +28,37 @@
min-width: 0; min-width: 0;
gap: 28px; gap: 28px;
overflow-anchor: none; overflow-anchor: none;
}
[data-slot="session-turn-user-badges"] { [data-slot="session-turn-user-badges"] {
display: flex; position: absolute;
flex-shrink: 0; right: 0;
align-items: center; display: flex;
gap: 6px; gap: 6px;
opacity: 0; padding-left: 16px;
transition: opacity 0.15s ease; background: linear-gradient(to right, transparent, var(--background-stronger) 12px);
pointer-events: none; opacity: 0;
transition: opacity 0.15s ease;
pointer-events: none;
}
&[data-visible="true"] { &:hover [data-slot="session-turn-user-badges"] {
opacity: 1; opacity: 1;
pointer-events: auto; pointer-events: auto;
} }
}
[data-slot="session-turn-badge"] { [data-slot="session-turn-badge"] {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding: 2px 6px; padding: 2px 6px;
border-radius: 4px; border-radius: 4px;
font-family: var(--font-family-mono); font-family: var(--font-family-mono);
font-size: var(--font-size-x-small); font-size: var(--font-size-x-small);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: var(--line-height-normal); line-height: var(--line-height-normal);
white-space: nowrap; white-space: nowrap;
color: var(--text-base); color: var(--text-base);
background: var(--surface-raised-base); background: var(--surface-raised-base);
}
} }
[data-slot="session-turn-sticky-title"] { [data-slot="session-turn-sticky-title"] {
@@ -81,8 +83,6 @@
[data-slot="session-turn-message-header"] { [data-slot="session-turn-message-header"] {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
gap: 12px;
align-self: stretch; align-self: stretch;
height: 32px; height: 32px;
} }

5
packages/ui/src/components/session-turn.tsx
View File

@@ -374,7 +374,6 @@ export function SessionTurn(
diffLimit: diffInit, diffLimit: diffInit,
status: rawStatus(), status: rawStatus(),
duration: duration(), duration: duration(),
userMessageHovered: false,
}) })
createEffect( createEffect(
@@ -475,8 +474,6 @@ export function SessionTurn(
data-slot="session-turn-message-container" data-slot="session-turn-message-container"
class={props.classes?.container} class={props.classes?.container}
style={{ "--sticky-header-height": `${store.stickyHeaderHeight}px` }} style={{ "--sticky-header-height": `${store.stickyHeaderHeight}px` }}
onMouseEnter={() => setStore("userMessageHovered", true)}
onMouseLeave={() => setStore("userMessageHovered", false)}
> >
<Switch> <Switch>
<Match when={isShellMode()}> <Match when={isShellMode()}>
@@ -496,7 +493,7 @@ export function SessionTurn(
</Match> </Match>
</Switch> </Switch>
</div> </div>
<div data-slot="session-turn-user-badges" data-visible={store.userMessageHovered}> <div data-slot="session-turn-user-badges">
<Show when={(msg() as UserMessage).agent}> <Show when={(msg() as UserMessage).agent}>
<span data-slot="session-turn-badge">{(msg() as UserMessage).agent}</span> <span data-slot="session-turn-badge">{(msg() as UserMessage).agent}</span>
</Show> </Show>