fix(opal): stop hidden Hoverable items from swallowing clicks

An `appear-on-hover` item only set `opacity: 0`, so at rest it was invisible
but still hit-testable. In the sidebar that put a transparent popover trigger
above the row's navigation overlay, which is `z-99` to the actions slot's
`z-100`: clicking the right edge of a row opened the menu instead of opening
the chat.

This is why the classes it replaced worked — both `display: none` and
`visibility: hidden` take the element out of hit-testing, and opacity does
not. Every opacity rule now moves `pointer-events` with it.

Local mode is deliberately excluded. It reveals on its own hover, so an item
that could not be hovered could never be revealed.

Also forwards `style` to the send button's spinner. Opal's iconWrapper sizes
icons through `style`, not classes, so dropping it left the loader at its own
default size. LineItem sizes with classes instead, which is why the file
picker's loader does not need this.

Author: raunakab

web/lib/opal/src/core/animations/styles.css

@@ -19,13 +19,23 @@
     opacity: 0;
   }
 
+  /* An invisible item must not intercept clicks aimed at what sits under it.
+     Local mode is excluded: it reveals on its own hover, so taking its pointer
+     events away would leave it permanently hidden. */
+  .hoverable-item[data-hoverable-variant="appear-on-hover"]:not(
+    [data-hoverable-local]
+  ) {
+    pointer-events: none;
+  }
+
   /* Group mode — Root :hover controls descendant item visibility via CSS.
      Exclude local-mode items so they aren't revealed by an ancestor root. */
   [data-hover-group]:hover
     .hoverable-item[data-hoverable-variant="appear-on-hover"]:not(
       [data-hoverable-local]
     ) {
     opacity: 1;
+    pointer-events: auto;
   }
 
   /* Local mode — item handles its own :hover */
@@ -40,6 +50,7 @@
     [data-hoverable-local]
   ) {
   opacity: 1;
+  pointer-events: auto;
 }
 
 /* Group focus — any focusable descendant of the Root receives keyboard focus,
@@ -49,11 +60,13 @@
     [data-hoverable-local]
   ) {
   opacity: 1;
+  pointer-events: auto;
 }
 
 /* Local focus — item (or a focusable descendant) receives keyboard focus */
 .hoverable-item[data-hoverable-variant="appear-on-hover"]:has(:focus-visible) {
   opacity: 1;
+  pointer-events: auto;
 }
 
 /* ---------------------------------------------------------------------------
@@ -71,6 +84,7 @@
       [data-hoverable-local]
     ) {
     opacity: 0;
+    pointer-events: none;
   }
 
   /* Local mode */
@@ -85,6 +99,7 @@
     [data-hoverable-local]
   ) {
   opacity: 0;
+  pointer-events: none;
 }
 
 /* Group focus */
@@ -93,6 +108,7 @@
     [data-hoverable-local]
   ) {
   opacity: 0;
+  pointer-events: none;
 }
 
 /* Local focus */

web/src/sections/input/BaseInputBar.tsx

@@ -371,9 +371,10 @@ const BaseInputBar = memo(
                 <Button
                   icon={
                     sandboxInitializing
-                      ? ({ className }) => (
+                      ? ({ className, style }) => (
                           <SvgLoader
                             className={cn(className, "animate-spin")}
+                            style={style}
                           />
                         )
                       : SvgArrowUp