diff --git a/src/apps/chat/components/message/ChatMessage.tsx b/src/apps/chat/components/message/ChatMessage.tsx index 8f667ef70..c08213d18 100644 --- a/src/apps/chat/components/message/ChatMessage.tsx +++ b/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[] */} )} + {/* Fragments vertical (grid) layout */} @@ -625,7 +624,7 @@ export function ChatMessage(props: { ); diff --git a/src/apps/chat/components/message/ContentPartText.tsx b/src/apps/chat/components/message/ContentPartText.tsx index 03b4768cf..fcaf21df6 100644 --- a/src/apps/chat/components/message/ContentPartText.tsx +++ b/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 ( ); } diff --git a/src/modules/blocks/BlocksRenderer.tsx b/src/modules/blocks/BlocksRenderer.tsx index ae4dd8cf8..4fa99a8a8 100644 --- a/src/modules/blocks/BlocksRenderer.tsx +++ b/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 {/* Warn about user-edited system message */}