Fix theme input scrollbar line, jumbo emoji, zalgo clip, and Windows autocorrect dupe.

Make twilight/mocha scrollbar tracks transparent so the editor no longer shows a vertical strip, size standalone emoji to 100px, loosen zalgo clipping with padded overflow, and handle insertReplacementText via onDOMBeforeInput so Slate does not insert the correction twice.

src/app/styles/CustomHtml.css.ts

@@ -19,7 +19,7 @@ export const MarginSpaced = style({
 export const Paragraph = style([
   DefaultReset,
   {
-    overflow: 'hidden',
+    // Zalgo clipping is handled by MessageTextBody padding + overflow
     lineHeight: '1.5',
   },
 ]);
@@ -29,7 +29,6 @@ export const Heading = style([
   MarginSpaced,
   {
     marginTop: config.space.S400,
-    overflow: 'hidden',
     lineHeight: '1.5',
     selectors: {
       '&:first-child': {
@@ -46,7 +45,6 @@ export const BlockQuote = style([
     paddingLeft: config.space.S200,
     borderLeft: `${config.borderWidth.B700} solid ${color.SurfaceVariant.ContainerLine}`,
     fontStyle: 'italic',
-    overflow: 'hidden',
     lineHeight: '1.5',
   },
 ]);
@@ -73,7 +71,6 @@ export const Code = style([
   {
     padding: `0 ${config.space.S100}`,
     display: 'inline',
-    overflow: 'hidden',
     lineHeight: '1.5',
   },
 ]);
@@ -120,7 +117,6 @@ export const Spoiler = recipe({
       padding: `0 ${config.space.S100}`,
       backgroundColor: color.SurfaceVariant.ContainerActive,
       borderRadius: config.radii.R300,
-      overflow: 'hidden',
       lineHeight: '1.5',
       selectors: {
         '&[aria-pressed=true]': {
@@ -182,7 +178,6 @@ export const List = style([
   {
     padding: `0 ${config.space.S100}`,
     paddingLeft: config.space.S600,
-    overflow: 'hidden',
     lineHeight: '1.5',
   },
 ]);
@@ -211,7 +206,6 @@ export const Mention = recipe({
       padding: `0 ${toRem(2)}`,
       borderRadius: config.radii.R300,
       fontWeight: config.fontWeight.W500,
-      overflow: 'hidden',
       lineHeight: '1.5',
     },
   ],
@@ -238,7 +232,6 @@ export const Command = recipe({
       padding: `0 ${toRem(2)}`,
       borderRadius: config.radii.R300,
       fontWeight: config.fontWeight.W500,
-      overflow: 'hidden',
       lineHeight: '1.5',
     },
   ],
@@ -308,7 +301,6 @@ export const highlightText = style([
   {
     backgroundColor: 'yellow',
     color: 'black',
-    overflow: 'hidden',
     lineHeight: '1.5',
   },
 ]);