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

packages/ui/src/components/session-turn.css

@@ -28,22 +28,23 @@
     min-width: 0;
     gap: 28px;
     overflow-anchor: none;
-  }
 
     [data-slot="session-turn-user-badges"] {
+      position: absolute;
+      right: 0;
       display: flex;
-    flex-shrink: 0;
-    align-items: center;
       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;
@@ -58,6 +59,7 @@
       color: var(--text-base);
       background: var(--surface-raised-base);
     }
+  }
 
   [data-slot="session-turn-sticky-title"] {
     width: 100%;
@@ -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;
   }

packages/ui/src/components/session-turn.tsx

@@ -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>