Uniformly use isMobile: boolean

src/apps/chat/components/message/ChatMessage.tsx

@@ -103,7 +103,7 @@ export function ChatMessage(props: {
   diffPreviousText?: string,
   fitScreen: boolean,
   hasInReferenceTo?: boolean;
-  isMobile?: boolean,
+  isMobile: boolean,
   isBottom?: boolean,
   isImagining?: boolean,
   isSpeaking?: boolean,
@@ -621,6 +621,7 @@ export function ChatMessage(props: {
 
             contentScaling={adjContentScaling}
             fitScreen={props.fitScreen}
+            isMobile={props.isMobile}
             messageOriginLLM={messageOriginLLM}
             messageRole={messageRole}
             optiAllowSubBlocksMemo={!!messagePendingIncomplete}

src/apps/chat/components/message/fragments-attachment-doc/DocAttachmentFragment.tsx

@@ -37,7 +37,7 @@ export function DocAttachmentFragment(props: {
   setEditedText: (fragmentId: DMessageFragmentId, value: string) => void,
   messageRole: DMessageRole,
   contentScaling: ContentScaling,
-  isMobile?: boolean,
+  isMobile: boolean,
   zenMode: boolean,
   disableMarkdownText: boolean,
   onFragmentDelete: (fragmentId: DMessageFragmentId) => void,
@@ -90,7 +90,7 @@ export function DocAttachmentFragment(props: {
   const { liveFileControlButton, liveFileActions } = useLiveFileSync(
     fragment.liveFileId ?? null,
     workspaceId,
-    props.isMobile === true,
+    props.isMobile,
     fragmentDocPart.data.text,
     handleReplaceDocFragmentText,
     handleReplaceFragmentLiveFileId,
@@ -277,6 +277,7 @@ export function DocAttachmentFragment(props: {
           fromRole={props.messageRole}
           contentScaling={props.contentScaling}
           fitScreen={props.isMobile}
+          isMobile={props.isMobile}
           codeRenderVariant='plain'
           textRenderVariant={props.disableMarkdownText ? 'text' : 'markdown'}
         />

src/apps/chat/components/message/fragments-attachment-doc/DocumentAttachmentFragments.tsx

@@ -19,7 +19,7 @@ export function DocumentAttachmentFragments(props: {
   attachmentFragments: DMessageAttachmentFragment[],
   messageRole: DMessageRole,
   contentScaling: ContentScaling,
-  isMobile?: boolean,
+  isMobile: boolean,
   zenMode: boolean,
   disableMarkdownText: boolean,
   onFragmentDelete: (fragmentId: DMessageFragmentId) => void,

src/apps/chat/components/message/fragments-content/ContentFragments.tsx

@@ -45,6 +45,7 @@ export function ContentFragments(props: {
 
   contentScaling: ContentScaling,
   fitScreen: boolean,
+  isMobile: boolean,
   messageOriginLLM?: string,
   messageRole: DMessageRole,
   optiAllowSubBlocksMemo?: boolean,
@@ -173,6 +174,7 @@ export function ContentFragments(props: {
               messageOriginLLM={props.messageOriginLLM}
               contentScaling={props.contentScaling}
               fitScreen={props.fitScreen}
+              isMobile={props.isMobile}
               disableMarkdownText={props.disableMarkdownText}
               enhanceCodeBlocks={props.enhanceCodeBlocks}
               // renderTextDiff={textDiffs || undefined}

src/apps/chat/components/message/fragments-content/ContentPartPlaceholder.tsx

@@ -21,6 +21,7 @@ export function ContentPartPlaceholder(props: {
       fromRole={props.messageRole}
       contentScaling={props.contentScaling}
       fitScreen={false}
+      isMobile={false /* assumption that the Placeholder Part doesn't react to size, and we assume desktop */}
       showAsDanger={props.showAsDanger}
       showAsItalic={props.showAsItalic}
       textRenderVariant='text'

src/apps/chat/components/message/fragments-content/ContentPartText_AutoBlocks.tsx

@@ -21,6 +21,7 @@ export function ContentPartText_AutoBlocks(props: {
   messageOriginLLM?: string,
 
   contentScaling: ContentScaling,
+  isMobile: boolean,
   fitScreen: boolean,
   disableMarkdownText: boolean,
   enhanceCodeBlocks: boolean,
@@ -58,6 +59,7 @@ export function ContentPartText_AutoBlocks(props: {
       fromRole={props.messageRole}
       contentScaling={props.contentScaling}
       fitScreen={props.fitScreen}
+      isMobile={props.isMobile}
       showUnsafeHtml={props.showUnsafeHtml}
       renderSanityTextDiffs={props.renderTextDiff}
       codeRenderVariant={props.enhanceCodeBlocks ? 'enhanced' : 'outlined'}

src/apps/draw/gallery/ZeroGallery.tsx

@@ -4,6 +4,9 @@ import { Card } from '@mui/joy';
 
 import { AutoBlocksRenderer } from '~/modules/blocks/AutoBlocksRenderer';
 
+import { useIsMobile } from '~/common/components/useMatchMedia';
+import { useUIContentScaling } from '~/common/state/store-ui';
+
 
 const zeroGalleryMd = `
 ### {{title}}
@@ -20,10 +23,16 @@ Your past creations will appear here once you start drawing.
 
 
 export function ZeroGallery(props: { domain: 'draw' | 'app' }) {
+
+  // external state
+  const isMobile = useIsMobile();
+  const contentScaling = useUIContentScaling();
+
   const text = zeroGalleryMd.replace('{{title}}', props.domain === 'draw'
     ? 'Empty Gallery'
     : 'No App Media',
   );
+
   return (
     <Card variant='soft' sx={{
       maxWidth: 'max(50%, 340px)',
@@ -43,8 +52,9 @@ export function ZeroGallery(props: { domain: 'draw' | 'app' }) {
       <AutoBlocksRenderer
         text={text}
         fromRole='assistant'
-        contentScaling='sm'
-        fitScreen
+        contentScaling={contentScaling}
+        fitScreen={isMobile}
+        isMobile={isMobile}
         textRenderVariant='markdown'
       />
       {/*</Typography>*/}

src/apps/settings-modal/ShortcutsModal.tsx

@@ -5,6 +5,7 @@ import { AutoBlocksRenderer } from '~/modules/blocks/AutoBlocksRenderer';
 import { GoodModal } from '~/common/components/GoodModal';
 import { platformAwareKeystrokes } from '~/common/components/KeyStroke';
 import { useIsMobile } from '~/common/components/useMatchMedia';
+import { useUIContentScaling } from '~/common/state/store-ui';
 
 
 const shortcutsMd = platformAwareKeystrokes(`
@@ -40,16 +41,17 @@ const shortcutsMd = platformAwareKeystrokes(`
 export function ShortcutsModal(props: { onClose: () => void }) {
 
   // external state
-  const isMobile
-    = useIsMobile();
+  const isMobile = useIsMobile();
+  const contentScaling = useUIContentScaling();
 
   return (
     <GoodModal open title='Desktop Shortcuts' onClose={props.onClose}>
       <AutoBlocksRenderer
         text={shortcutsMd}
         fromRole='assistant'
-        contentScaling='sm'
+        contentScaling={contentScaling}
         fitScreen={isMobile}
+        isMobile={isMobile}
         textRenderVariant='markdown'
       />
     </GoodModal>

src/common/components/ExplainerCarousel.tsx

@@ -16,6 +16,7 @@ import { ShortcutKey, useGlobalShortcuts } from '~/common/components/shortcuts/u
 import { animationTextShadowLimey } from '~/common/util/animUtils';
 import { hasGoogleAnalytics } from '~/common/components/GoogleAnalytics';
 import { useIsMobile } from '~/common/components/useMatchMedia';
+import { useUIContentScaling } from '~/common/state/store-ui';
 
 
 // configuration
@@ -126,6 +127,7 @@ export function ExplainerCarousel(props: {
 
   // external state
   const isMobile = useIsMobile();
+  const contentScaling = useUIContentScaling();
 
   // derived state
   const { onFinished } = props;
@@ -232,8 +234,9 @@ export function ExplainerCarousel(props: {
             <AutoBlocksRenderer
               text={mdText}
               fromRole='assistant'
-              contentScaling='md'
+              contentScaling={contentScaling /* was: 'md' */}
               fitScreen={isMobile}
+              isMobile={isMobile}
               textRenderVariant='markdown'
             />
           </Box>

src/modules/aifn/digrams/DiagramsModal.tsx

@@ -227,6 +227,7 @@ export function DiagramsModal(props: { config: DiagramConfig, onClose: () => voi
             fromRole='assistant'
             contentScaling={adjustContentScaling(contentScaling, -1)}
             fitScreen={isMobile}
+            isMobile={isMobile}
             blocksProcessor='diagram'
             codeRenderVariant='plain'
             textRenderVariant='text'

src/modules/beam/gather/BeamFusionGrid.tsx

@@ -111,6 +111,7 @@ export function BeamFusionGrid(props: {
           key={'fusion-' + fusionId}
           beamStore={props.beamStore}
           fusionId={fusionId}
+          isMobile={props.isMobile}
         />
       ))}
 

src/modules/beam/gather/Fusion.tsx

@@ -28,6 +28,7 @@ import { useBeamCardScrolling } from '../store-module-beam';
 export function Fusion(props: {
   beamStore: BeamStoreApi,
   fusionId: string,
+  isMobile: boolean,
 }) {
 
   // external state
@@ -144,6 +145,7 @@ export function Fusion(props: {
             <ChatMessageMemo
               message={fusion.outputDMessage}
               fitScreen={true}
+              isMobile={props.isMobile}
               hideAvatar
               showUnsafeHtml={true}
               adjustContentScaling={-1}

src/modules/beam/gather/instructions/ChatGenerateInstruction.tsx

@@ -9,6 +9,7 @@ import type { VChatMessageIn } from '~/modules/llms/llm.client';
 import { bareBonesPromptMixer } from '~/modules/persona/pmix/pmix';
 
 import { DMessage, messageFragmentsReduceText, messageSingleTextOrThrow } from '~/common/stores/chat/chat.message';
+import { getIsMobile } from '~/common/components/useMatchMedia';
 import { getUXLabsHighPerformance } from '~/common/state/store-ux-labs';
 
 import type { BaseInstruction, ExecutionInputState } from './beam.gather.execution';
@@ -76,11 +77,13 @@ export async function executeChatGenerate(_i: ChatGenerateInstruction, inputs: E
 
       case 'chat-message':
       default:
+        const isMobile = getIsMobile(); // no need to react to this
         // recreate the UI for this
         inputs.updateInstructionComponent(
           <ChatMessage
             message={inputs.intermediateDMessage}
-            fitScreen={true}
+            fitScreen={isMobile}
+            isMobile={isMobile}
             hideAvatar
             adjustContentScaling={-1}
             sx={!getBeamCardScrolling() ? beamCardMessageSx : beamCardMessageScrollingSx}

src/modules/beam/scatter/BeamRay.tsx

@@ -111,7 +111,8 @@ function RayControls(props: {
 
 export function BeamRay(props: {
   beamStore: BeamStoreApi,
-  hadImportedRays: boolean
+  hadImportedRays: boolean,
+  isMobile: boolean,
   isRemovable: boolean,
   rayId: string,
   rayIndexWeak: number,
@@ -207,6 +208,7 @@ export function BeamRay(props: {
             <ChatMessageMemo
               message={ray.message}
               fitScreen={true}
+              isMobile={props.isMobile}
               hideAvatar
               showUnsafeHtml={true}
               adjustContentScaling={-1}

src/modules/beam/scatter/BeamRayGrid.tsx

@@ -46,6 +46,7 @@ export function BeamRayGrid(props: {
           rayIndexWeak={index}
           beamStore={props.beamStore}
           hadImportedRays={props.hadImportedRays}
+          isMobile={props.isMobile}
           isRemovable={raysCount > SCATTER_RAY_MIN}
           rayId={rayId}
           // linkedLlmId={props.linkedLlmId}

src/modules/blocks/AutoBlocksRenderer.tsx

@@ -35,7 +35,9 @@ export function AutoBlocksRenderer(props: {
   fromRole: DMessageRole;
 
   contentScaling: ContentScaling;
-  fitScreen?: boolean;
+  fitScreen: boolean;
+  isMobile: boolean;
+
   showAsDanger?: boolean;
   showAsItalic?: boolean;
   showUnsafeHtml?: boolean;