From af78068f48a92775f30118bb0b540dd61335cd20 Mon Sep 17 00:00:00 2001
From: Enrico Ros <enrico.ros@gmail.com>
Date: Mon, 30 Dec 2024 12:42:46 -0800
Subject: [PATCH] Beam Fusion: sticky header

---
 src/modules/beam/gather/Fusion.tsx         | 1 +
 src/modules/beam/gather/FusionControls.tsx | 5 ++++-
 src/modules/beam/scatter/BeamRay.tsx       | 4 ++--
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/modules/beam/gather/Fusion.tsx b/src/modules/beam/gather/Fusion.tsx
index c0fe677579..bffb9e3108 100644
--- a/src/modules/beam/gather/Fusion.tsx
+++ b/src/modules/beam/gather/Fusion.tsx
@@ -117,6 +117,7 @@ export function Fusion(props: {
         factory={factory}
         isFusing={isFusing}
         isInterrupted={isStopped}
+        isMobile={props.isMobile}
         isUsable={isUsable}
         llmLabel={llmLabel}
         llmVendorIcon={llmVendorIcon}
diff --git a/src/modules/beam/gather/FusionControls.tsx b/src/modules/beam/gather/FusionControls.tsx
index 923e179cfe..045b821d29 100644
--- a/src/modules/beam/gather/FusionControls.tsx
+++ b/src/modules/beam/gather/FusionControls.tsx
@@ -9,6 +9,8 @@ import StopRoundedIcon from '@mui/icons-material/StopRounded';
 import { GoodTooltip } from '~/common/components/GoodTooltip';
 import { TooltipOutlined } from '~/common/components/TooltipOutlined';
 
+import { rayControlsMobileSx, rayControlsSx } from '../scatter/BeamRay';
+
 import type { BFusion } from './beam.gather';
 import type { FusionFactorySpec } from './instructions/beam.gather.factories';
 
@@ -20,6 +22,7 @@ function FusionControls(props: {
   factory: FusionFactorySpec,
   isFusing: boolean,
   isInterrupted: boolean,
+  isMobile: boolean,
   isUsable: boolean,
   llmLabel: string,
   llmVendorIcon?: React.FunctionComponent<SvgIconProps>,
@@ -28,7 +31,7 @@ function FusionControls(props: {
   onToggleGenerate: () => void,
 }) {
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+    <Box sx={props.isMobile ? rayControlsMobileSx : rayControlsSx}>
 
       {/* LLM Icon with Tooltip */}
       {!!props.llmVendorIcon && (
diff --git a/src/modules/beam/scatter/BeamRay.tsx b/src/modules/beam/scatter/BeamRay.tsx
index eaf348ef80..b6fd6ba69f 100644
--- a/src/modules/beam/scatter/BeamRay.tsx
+++ b/src/modules/beam/scatter/BeamRay.tsx
@@ -41,12 +41,12 @@ import { useMessageAvatarLabel } from '~/common/util/dMessageUtils';
   textAlign: 'center',
 };*/
 
-const rayControlsSx: SxProps = {
+export const rayControlsSx: SxProps = {
   // layout
   display: 'flex', alignItems: 'center', gap: 1,
 };
 
-const rayControlsMobileSx: SxProps = {
+export const rayControlsMobileSx: SxProps = {
   ...rayControlsSx,
 
   // anchor top