diff --git a/.changeset/fix-small-styling-fixes.md b/.changeset/fix-small-styling-fixes.md new file mode 100644 index 000000000..c9d4c3e49 --- /dev/null +++ b/.changeset/fix-small-styling-fixes.md @@ -0,0 +1,5 @@ +--- +default: patch +--- + +Fix missing filename breaking edits, and missing a fallback, and codeblock titles overflowing diff --git a/src/app/components/RenderMessageContent.tsx b/src/app/components/RenderMessageContent.tsx index 9591b2565..6cdb15c92 100644 --- a/src/app/components/RenderMessageContent.tsx +++ b/src/app/components/RenderMessageContent.tsx @@ -1,3 +1,4 @@ +import type { CSSProperties } from 'react'; import { memo, useMemo, useCallback } from 'react'; import type { IPreviewUrlResponse } from '$types/matrix-sdk'; import { MsgType } from '$types/matrix-sdk'; @@ -75,7 +76,8 @@ const isSableChatEmbedCandidate = (url: string): boolean => /^https:\/\//i.test(url) && (/\.preview\.sable\.css(\?|#|$)/i.test(url) || isHttpsFullSableCssUrl(url)); -const CAPTION_STYLE = { marginTop: config.space.S200 }; +const CAPTION_STYLE: CSSProperties = { marginTop: config.space.S200, maxWidth: '100%' }; +const TEXT_STYLE: CSSProperties = { maxWidth: '100%' }; function RenderMessageContentInternal({ displayName, @@ -216,6 +218,7 @@ function RenderMessageContentInternal({ ); @@ -293,6 +297,7 @@ function RenderMessageContentInternal({ renderBody={renderBody} renderUrlsPreview={messageUrlsPreview} renderBundledPreviews={messageBundlePreview} + style={TEXT_STYLE} /> ); } diff --git a/src/app/components/message/MsgTypeRenderers.tsx b/src/app/components/message/MsgTypeRenderers.tsx index 7d420655c..9ef884a43 100644 --- a/src/app/components/message/MsgTypeRenderers.tsx +++ b/src/app/components/message/MsgTypeRenderers.tsx @@ -426,7 +426,7 @@ export function MImage({ content, renderImageContent, outlined }: MImageProps) { }} > {renderImageContent({ - body: content.filename || 'Image', + body: content.filename || content.body || 'Image', info: imgInfo, mimeType: imgInfo?.mimetype, url: mxcUrl, diff --git a/src/app/features/room/message/MessageEditor.tsx b/src/app/features/room/message/MessageEditor.tsx index 10dbca6d7..bc0566ad5 100644 --- a/src/app/features/room/message/MessageEditor.tsx +++ b/src/app/features/room/message/MessageEditor.tsx @@ -292,9 +292,10 @@ export const MessageEditor = as<'div', MessageEditorProps>( content.format = contentBody.format; content.formatted_body = contentBody.formatted_body; content['m.new_content'] = newContent; - if (oldContent.info !== undefined && oldContent.filename?.length > 0) { - content.filename = oldContent.filename; - content['m.new_content'].filename = oldContent.filename; + if (oldContent.info !== undefined && oldContent.msgtype !== 'm.text') { + content.filename = 'filename' in oldContent ? oldContent.filename : oldContent.body; + content['m.new_content'].filename = + 'filename' in oldContent ? oldContent.filename : oldContent.body; content.info = oldContent.info; content['m.new_content'].info = oldContent.info; diff --git a/src/app/features/room/message/styles.css.ts b/src/app/features/room/message/styles.css.ts index f8946e188..031adf300 100644 --- a/src/app/features/room/message/styles.css.ts +++ b/src/app/features/room/message/styles.css.ts @@ -3,6 +3,7 @@ import { DefaultReset, config, toRem } from 'folds'; export const MessageBase = style({ position: 'relative', + maxWidth: '100%', }); export const MessageBaseBubbleCollapsed = style({ paddingTop: 0,