Message Fragments: update v-layout

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

@@ -515,7 +515,7 @@ export function ChatMessage(props: {
       {/* (Optional) underlayed top decorator */}
       {props.topDecorator}
 
-      {/* Message Row: Avatar, Blocks (1 text -> blocksRenderer) */}
+      {/* Message Row: Avatar, Fragment[] */}
       <Box sx={{
         display: 'flex',
         flexDirection: !fromAssistant ? 'row-reverse' : 'row',
@@ -559,15 +559,14 @@ export function ChatMessage(props: {
           </Box>
         )}
 
+        {/* Fragments vertical (grid) layout */}
         <Box sx={{
           // v-center content if there's any gap
           my: 'auto',
           flexGrow: isEditing ? 1 : 0,
-          // outline: '1px solid blue',
 
           // v-layout
           display: 'grid',
-          justifyItems: !fromAssistant ? 'end' : 'start',
           gap: { xs: 0, md: 1 },
         }}>
 
@@ -625,7 +624,7 @@ export function ChatMessage(props: {
                   <ContentPartImageRef
                     key={'image-part-' + fragmentIndex}
                     imageRefPart={fragment.part}
-                    fragmentIndex={fragmentIndex}
+                    contentScaling={contentScaling}
                   />
                 );
 

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { Diff as TextDiff } from '@sanity/diff-match-patch';
 
-import { BlocksRenderer, editBlocksSx } from '~/modules/blocks/BlocksRenderer';
+import { BlocksRenderer, blocksRendererSx } from '~/modules/blocks/BlocksRenderer';
 
 import type { ContentScaling } from '~/common/app.theme';
 import { GoodTooltip } from '~/common/components/GoodTooltip';
@@ -70,7 +70,7 @@ export function ContentPartText(props: {
     return (
       <InlineTextarea
         initialText={messageText} onEdit={handleTextEdit}
-        sx={editBlocksSx}
+        sx={blocksRendererSx}
       />
     );
   }

src/modules/blocks/BlocksRenderer.tsx

@@ -22,24 +22,21 @@ import { areBlocksEqual, Block, parseMessageBlocks } from './blocks';
 const USER_COLLAPSED_LINES: number = 7;
 
 
-const blocksSx: SxProps = {
-  my: 'auto',
+/**
+ * This style is reused by all the Fragments (BlocksRenderer being the Text one),
+ * contained within a singe Grid (1fr) in the Message component.
+ */
+export const blocksRendererSx: SxProps = {
+  // important, as the parent container is a Grid, and this takes up to the Grid's width
+  width: '100%',
+
+  // enables children's x-scrollbars (clips to the Fragment, so sub-parts will stay within this)
+  overflowX: 'auto',
+
   // note: this will be used for non-blocks mainly (errors and other strings ourside of RenderXYX)
   lineHeight: lineHeightChatTextMd,
-} as const;
 
-export const editBlocksSx: SxProps = {
-  ...blocksSx,
-  // the parent is now within a grid layout
-  width: '100%',
-  // disabled: this was when the parent was a flexbox
-  // flexGrow: 1,
-} as const;
-
-const renderBlocksSx: SxProps = {
-  ...blocksSx,
-  flexGrow: 0,
-  overflowX: 'auto',
+  // customize the text selection color (also in edit mode)
   '& *::selection': {
     // backgroundColor: '#fc70c3',
     backgroundColor: 'primary.solidBg',
@@ -178,7 +175,7 @@ export const BlocksRenderer = React.forwardRef<HTMLDivElement, BlocksRendererPro
       ref={ref}
       onContextMenu={props.onContextMenu}
       onDoubleClick={props.onDoubleClick}
-      sx={renderBlocksSx}
+      sx={blocksRendererSx}
     >
 
       {/* Warn about user-edited system message */}