fix: preserve composer padding in production

.changeset/fix-composer-padding-cascade.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Preserve composer editor padding when reset styles load later in the cascade.

e2e/smoke/emoji-polish.spec.ts

@@ -125,6 +125,14 @@ test.describe('emoji polish smoke', () => {
         compactPreviewEmojiFontSize: getComputedStyle(
           document.querySelector('[data-testid="smoke-compact-preview-block"] span[title]')!
         ).fontSize,
+        editorComposer: measure('[data-testid="smoke-editor-composer"] [data-editable-name]'),
+        editorEmoji: measure('[data-testid="smoke-editor-composer"] span[title]'),
+        editorPaddingTop: getComputedStyle(
+          document.querySelector('[data-testid="smoke-editor-composer"] [data-editable-name]')!
+        ).paddingTop,
+        editorPaddingBottom: getComputedStyle(
+          document.querySelector('[data-testid="smoke-editor-composer"] [data-editable-name]')!
+        ).paddingBottom,
         fixedCellBlackSquareFontFamily: getComputedStyle(
           document.querySelector(
             '[data-testid="smoke-emoji-fixed-cell-line"] span[title="black_large_square"]'
@@ -146,6 +154,8 @@ test.describe('emoji polish smoke', () => {
     expect(metrics.baselineEmoji).not.toBeNull();
     expect(metrics.compactPreview).not.toBeNull();
     expect(metrics.compactPreviewEmoji).not.toBeNull();
+    expect(metrics.editorComposer).not.toBeNull();
+    expect(metrics.editorEmoji).not.toBeNull();
     expect(metrics.fixedCellBlackSquareFontFamily).toContain('Twemoji');
 
     expect(metrics.pickerButton!.width).toBe(48);
@@ -177,6 +187,10 @@ test.describe('emoji polish smoke', () => {
     expect(parseFloat(metrics.compactPreviewEmojiFontSize)).toBeGreaterThan(
       parseFloat(metrics.compactPreviewTextFontSize)
     );
+    expect(metrics.editorPaddingTop).toBe('13px');
+    expect(metrics.editorPaddingBottom).toBe('13px');
+    expect(metrics.editorEmoji!.top).toBeGreaterThanOrEqual(metrics.editorComposer!.top - 2);
+    expect(metrics.editorEmoji!.bottom).toBeLessThanOrEqual(metrics.editorComposer!.bottom + 2);
 
     await captureSnapshot(page, 'emoji-polish/sticker-fit-and-baseline');
   });

src/app/components/editor/Editor.css.ts

@@ -67,17 +67,19 @@ export const EditorTextarea = style([
     height: 'auto',
     unicodeBidi: 'plaintext',
     lineHeight: config.lineHeight.T400,
-    paddingTop: toRem(13),
-    paddingBottom: toRem(13),
     selectors: {
-      [`${EditorTextareaScrollMultiline} &`]: {
+      '&&': {
+        paddingTop: toRem(13),
+        paddingBottom: toRem(13),
+      },
+      [`${EditorTextareaScrollMultiline} &&`]: {
         paddingRight: toRem(13),
         paddingBottom: 0,
       },
-      [`${EditorTextareaScroll}:first-child &`]: {
+      [`${EditorTextareaScroll}:first-child &&`]: {
         paddingLeft: toRem(13),
       },
-      [`${EditorTextareaScroll}:last-child &`]: {
+      [`${EditorTextareaScroll}:last-child &&`]: {
         paddingRight: toRem(13),
       },
       '&:focus': {
@@ -119,18 +121,20 @@ export const EditorPlaceholderTextVisual = style([
   {
     display: 'block',
     lineHeight: config.lineHeight.T400,
-    paddingTop: toRem(13),
-    paddingBottom: toRem(13),
     paddingLeft: toRem(1),
     selectors: {
-      [`${EditorTextareaScrollMultiline} &`]: {
+      '&&': {
+        paddingTop: toRem(13),
+        paddingBottom: toRem(13),
+      },
+      [`${EditorTextareaScrollMultiline} &&`]: {
         paddingRight: toRem(13),
         paddingBottom: 0,
       },
-      [`${EditorTextareaScroll}:first-child &`]: {
+      [`${EditorTextareaScroll}:first-child &&`]: {
         paddingLeft: toRem(13),
       },
-      [`${EditorTextareaScroll}:last-child &`]: {
+      [`${EditorTextareaScroll}:last-child &&`]: {
         paddingRight: toRem(13),
       },
     },

src/app/pages/SmokeMobileShell.tsx

@@ -3,6 +3,7 @@ import { Box, Button, Header, IconButton, Menu, MenuItem, Text, config } from 'f
 import { useParams } from 'react-router-dom';
 import { Modal500 } from '$components/Modal500';
 import { Page, PageNav, PageNavContent, PageRoot } from '$components/page';
+import { CustomEditor, plainToEditorInput, useEditor } from '$components/editor';
 import {
   ClockCounterClockwise,
   Smiley,
@@ -117,6 +118,27 @@ function SmokeStickerButton({
   );
 }
 
+function SmokeComposerEmojiAlignment() {
+  const editor = useEditor();
+
+  useEffect(() => {
+    editor.children = plainToEditorInput('✅ 🫩');
+    editor.onChange();
+  }, [editor]);
+
+  return (
+    <Box
+      data-testid="smoke-editor-composer"
+      direction="Column"
+      gap="200"
+      style={{ width: '100%', maxWidth: 420 }}
+    >
+      <Text size="T300">Composer emoji baseline</Text>
+      <CustomEditor editableName="SmokeComposer" editor={editor} readOnly />
+    </Box>
+  );
+}
+
 function SmokeHomeNav() {
   return (
     <PageNav>
@@ -368,6 +390,7 @@ function SmokeEmojiPolish() {
               <b>Alice:</b> {scaleSystemEmoji('Status checks ✅ 😮 🫩 👍🏽')}
             </Text>
           </Box>
+          <SmokeComposerEmojiAlignment />
         </Box>
 
         <Box