Merge branch 'dev' into desktop-poilsh-styles-ui-ux

packages/app/src/pages/layout.tsx

@@ -1415,7 +1415,7 @@ export default function Layout(props: ParentProps) {
       <div
         data-session-id={props.session.id}
         class="group/session relative w-full rounded-md cursor-default transition-colors pl-2 pr-3
-               hover:bg-surface-raised-base-hover focus-within:bg-surface-raised-base-hover has-[.active]:bg-surface-base-active"
+               hover:bg-surface-raised-base-hover focus-within:bg-surface-raised-base-hover has-[[data-expanded]]:bg-surface-raised-base-hover has-[.active]:bg-surface-base-active"
       >
         <Show
           when={hoverEnabled()}
@@ -1426,7 +1426,7 @@ export default function Layout(props: ParentProps) {
           }
         >
           <HoverCard openDelay={150} closeDelay={100} placement="right" gutter={28} trigger={item}>
-            <Show when={hoverReady()} fallback={<div>Loading messages…</div>}>
+            <Show when={hoverReady()} fallback={<div class="text-12-regular text-text-weak">Loading messages…</div>}>
               <MessageNav
                 messages={hoverMessages() ?? []}
                 current={undefined}

packages/ui/src/components/hover-card.css

@@ -8,7 +8,7 @@
   z-index: 50;
   min-width: 200px;
   max-width: 320px;
-  border-radius: var(--radius-md);
+  border-radius: 8px;
   background-color: var(--surface-raised-stronger-non-alpha);
   pointer-events: auto;
 
@@ -31,7 +31,7 @@
   }
 
   [data-slot="hover-card-body"] {
-    padding: 12px;
+    padding: 4px;
   }
 }
 

packages/ui/src/components/message-nav.css

@@ -76,6 +76,7 @@
 
 [data-slot="message-nav-title-preview"] {
   font-size: 14px; /* text-14-regular */
+  color: var(--text-base);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;