Url parameters for websocket URLs

src-web/components/core/AutoScroller.tsx

@@ -1,14 +1,15 @@
 import { useVirtualizer } from '@tanstack/react-virtual';
-import type { ReactElement, UIEvent } from 'react';
+import type { ReactElement, ReactNode, UIEvent } from 'react';
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { IconButton } from './IconButton';
 
 interface Props<T> {
   data: T[];
   render: (item: T, index: number) => ReactElement<HTMLElement>;
+  header?: ReactNode;
 }
 
-export function AutoScroller<T>({ data, render }: Props<T>) {
+export function AutoScroller<T>({ data, render, header }: Props<T>) {
   const containerRef = useRef<HTMLDivElement>(null);
   const [autoScroll, setAutoScroll] = useState<boolean>(true);
 
@@ -45,7 +46,7 @@ export function AutoScroller<T>({ data, render }: Props<T>) {
   }, [autoScroll, data.length]);
 
   return (
-    <div className="h-full w-full relative">
+    <div className="h-full w-full relative grid grid-rows-[auto_minmax(0,1fr)]">
       {!autoScroll && (
         <div className="absolute bottom-0 right-0 m-2">
           <IconButton
@@ -59,6 +60,7 @@ export function AutoScroller<T>({ data, render }: Props<T>) {
           />
         </div>
       )}
+      {header ?? <span aria-hidden/>}
       <div ref={containerRef} className="h-full w-full overflow-y-auto" onScroll={handleScroll}>
         <div
           style={{
@@ -75,7 +77,7 @@ export function AutoScroller<T>({ data, render }: Props<T>) {
                 top: 0,
                 left: 0,
                 width: '100%',
-                // height: `${virtualItem.size}px`,
+                height: `${virtualItem.size * 1000}px`,
                 transform: `translateY(${virtualItem.start}px)`,
               }}
             >

src-web/components/core/Banner.tsx

@@ -9,19 +9,17 @@ interface Props {
 
 export function Banner({ children, className, color }: Props) {
   return (
-    <div>
-      <div
-        className={classNames(
-          className,
-          `x-theme-banner--${color}`,
-          'whitespace-pre-wrap',
-          'border border-dashed border-border bg-surface',
-          'px-3 py-2 rounded select-auto',
-          'overflow-x-auto text-text',
-        )}
-      >
-        {children}
-      </div>
+    <div
+      className={classNames(
+        className,
+        `x-theme-banner--${color}`,
+        'whitespace-pre-wrap',
+        'border border-dashed border-border bg-surface',
+        'px-3 py-2 rounded select-auto',
+        'overflow-auto text-text',
+      )}
+    >
+      {children}
     </div>
   );
 }