Various small fixes (#772)

<!-- Please read
https://github.com/SableClient/Sable/blob/dev/CONTRIBUTING.md before
submitting your pull request -->

### Description

<!-- Please include a summary of the change. Please also include
relevant motivation and context. List any dependencies that are required
for this change. -->

Adds arrow brackets back to suppressed previews when editing messages.
Adds back the height attribute and adds settings for adjusting the
maximum and default incoming inline image height.
Fixed the read receipt dialog inconsistency.
Fixes the room cosmetics menu not properly updating the membership with
the new avatar.

Fixes #767 
Fixes #770 

#### Type of change

- [x] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] This change requires a documentation update

### Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings

### AI disclosure:

- [x] Partially AI assisted (clarify which code was AI assisted and
briefly explain what it does).
- [ ] Fully AI generated (explain what all the generated code does in
moderate detail).
<!-- Write any explanation required here, but do not generate the
explanation using AI!! You must prove you understand what the code in
this PR does. -->

Tests were AI generated

Author: 7w1

.changeset/fix-inline-images-behaviors.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Added a couple new settings for max incoming inline image height and default height for unspecified.

.changeset/fix-markdown-link-preview.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fixed links with suppressed previews not having the arrow brackets readded when editing a message.

.changeset/fix-read-reciept-size.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fix the inconsistent sizing for the read receipt dialog boxes.

.changeset/fix-room-avatar-settings.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fixed room avatars set in the settings cosmetics menu not applying.

src/app/components/editor/output.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest';
+import { toMatrixCustomHTML, trimCustomHtml } from '$components/editor/output';
+import { BlockType } from '$components/editor/types';
+
+describe('toMatrixCustomHTML emoticons', () => {
+  it('always serializes custom emoji images with height=32', () => {
+    const html = trimCustomHtml(
+      toMatrixCustomHTML(
+        [
+          {
+            type: BlockType.Paragraph,
+            children: [
+              {
+                type: BlockType.Emoticon,
+                key: 'mxc://example.org/emote',
+                shortcode: 'blobcat',
+                children: [{ text: '' }],
+              } as never,
+            ],
+          } as never,
+        ],
+        {}
+      )
+    );
+
+    expect(html).toContain('data-mx-emoticon');
+    expect(html).toContain('mxc://example.org/emote');
+    expect(html).toContain('height="32"');
+  });
+});

src/app/components/event-readers/EventReaders.css.ts

@@ -5,6 +5,7 @@ export const EventReaders = style([
   DefaultReset,
   {
     height: '100%',
+    width: '280px',
   },
 ]);
 
@@ -18,4 +19,6 @@ export const Header = style({
 export const Content = style({
   paddingLeft: config.space.S200,
   paddingBottom: config.space.S400,
+  width: '100%',
+  minWidth: 0,
 });

src/app/components/event-readers/EventReaders.tsx

@@ -58,9 +58,14 @@ export const EventReaders = as<'div', EventReadersProps>(
             <Icon src={Icons.Cross} />
           </IconButton>
         </Header>
-        <Box grow="Yes">
-          <Box className={css.Content} direction="Column">
-            <Scroll visibility="Hover" hideTrack size="300">
+        <Box grow="Yes" style={{ width: '100%', minWidth: 0 }}>
+          <Box
+            grow="Yes"
+            className={css.Content}
+            direction="Column"
+            style={{ width: '100%', minWidth: 0 }}
+          >
+            <Scroll visibility="Hover" hideTrack size="300" style={{ width: '100%' }}>
               {latestEventReaders.map((readerId) => {
                 const name = getName(readerId);
                 const avatarMxcUrl = room.getMember(readerId)?.getMxcAvatarUrl();
@@ -79,7 +84,7 @@ export const EventReaders = as<'div', EventReadersProps>(
                 return (
                   <MenuItem
                     key={readerId}
-                    style={{ padding: `0 ${config.space.S200}` }}
+                    style={{ padding: `0 ${config.space.S200}`, width: '100%' }}
                     radii="400"
                     onClick={(event) => {
                       openProfile(

src/app/components/member-tile/MemberTile.tsx

@@ -29,7 +29,7 @@ export const MemberTile = as<'button', MemberTileProps>(
     const name = getName(room, member, nicknames);
     const presence = useUserPresence(member.userId ?? '');
 
-    const avatarMxcUrl = member.getMxcAvatarUrl();
+    const avatarMxcUrl = member.getMxcAvatarUrl() ?? mx.getUser(member.userId)?.avatarUrl;
     const avatarUrl = avatarMxcUrl
       ? mx.mxcUrlToHttp(avatarMxcUrl, 100, 100, 'crop', undefined, false, useAuthentication)
       : undefined;

src/app/components/message/Reply.tsx

@@ -26,6 +26,8 @@ import { useIgnoredUsers } from '$hooks/useIgnoredUsers';
 import { nicknamesAtom } from '$state/nicknames';
 import { useMatrixClient } from '$hooks/useMatrixClient';
 import { useMemberEventParser } from '$hooks/useMemberEventParser';
+import { useSetting } from '$state/hooks/settings';
+import { settingsAtom } from '$state/settings';
 
 import { useMentionClickHandler } from '$hooks/useMentionClickHandler';
 import { useTranslation } from 'react-i18next';
@@ -139,6 +141,14 @@ export const Reply = as<'div', ReplyProps>(
     const nicknames = useAtomValue(nicknamesAtom);
     const useAuthentication = useMediaAuthentication();
     const settingsLinkBaseUrl = useSettingsLinkBaseUrl();
+    const [incomingInlineImagesDefaultHeight] = useSetting(
+      settingsAtom,
+      'incomingInlineImagesDefaultHeight'
+    );
+    const [incomingInlineImagesMaxHeight] = useSetting(
+      settingsAtom,
+      'incomingInlineImagesMaxHeight'
+    );
 
     const fallbackBody = isRedacted ? <MessageDeletedContent /> : <MessageFailedContent />;
 
@@ -190,6 +200,8 @@ export const Reply = as<'div', ReplyProps>(
         useAuthentication,
         nicknames,
         handleMentionClick: mentionClickHandler,
+        incomingInlineImagesDefaultHeight,
+        incomingInlineImagesMaxHeight,
       });
       bodyJSX = parse(sanitizedHtml, parserOpts) as JSX.Element;
     } else if (hasPlainTextReply) {

src/app/components/upload-card/UploadCardRenderer.tsx

@@ -31,6 +31,8 @@ import { roomUploadAtomFamily } from '$state/room/roomInputDrafts';
 import { useObjectURL } from '$hooks/useObjectURL';
 import { useMediaConfig } from '$hooks/useMediaConfig';
 import { useSettingsLinkBaseUrl } from '$features/settings/useSettingsLinkBaseUrl';
+import { useSetting } from '$state/hooks/settings';
+import { settingsAtom } from '$state/settings';
 import { UploadCard, UploadCardError, UploadCardProgress } from './UploadCard';
 import * as css from './UploadCard.css';
 import { DescriptionEditor } from './UploadDescriptionEditor';
@@ -397,15 +399,31 @@ export function UploadCardRenderer({
   const spoilerClickHandler = useSpoilerClickHandler();
   const useAuthentication = useMediaAuthentication();
   const settingsLinkBaseUrl = useSettingsLinkBaseUrl();
+  const [incomingInlineImagesDefaultHeight] = useSetting(
+    settingsAtom,
+    'incomingInlineImagesDefaultHeight'
+  );
+  const [incomingInlineImagesMaxHeight] = useSetting(settingsAtom, 'incomingInlineImagesMaxHeight');
   const htmlReactParserOptions = useMemo<HTMLReactParserOptions>(
     () =>
       getReactCustomHtmlParser(mx, roomId, {
         settingsLinkBaseUrl,
         linkifyOpts,
         useAuthentication,
         handleSpoilerClick: spoilerClickHandler,
+        incomingInlineImagesDefaultHeight,
+        incomingInlineImagesMaxHeight,
       }),
-    [linkifyOpts, mx, roomId, settingsLinkBaseUrl, spoilerClickHandler, useAuthentication]
+    [
+      linkifyOpts,
+      mx,
+      roomId,
+      settingsLinkBaseUrl,
+      spoilerClickHandler,
+      useAuthentication,
+      incomingInlineImagesDefaultHeight,
+      incomingInlineImagesMaxHeight,
+    ]
   );
   return (
     <UploadCard