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

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

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