fix(ui): keep MobileSheet titles on the sheet centerline

design-system/packages/ui/src/mobile/MobileSheet/MobileSheet.meta.ts

@@ -26,5 +26,6 @@ export const mobileSheetMeta = {
     "space.2",
     "space.3",
     "space.4",
+    "space.12",
   ],
 } as const satisfies ComponentMeta;

design-system/packages/ui/src/mobile/MobileSheet/MobileSheet.module.css

@@ -50,17 +50,17 @@
   }
 
   .header {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
+    display: grid;
+    align-items: center;
+    grid-template-columns: minmax(var(--openbitfun-space-12), 1fr) minmax(0, auto) minmax(var(--openbitfun-space-12), 1fr);
     gap: var(--openbitfun-space-3);
     flex: 0 0 auto;
     padding: var(--openbitfun-space-3) var(--openbitfun-space-4) var(--openbitfun-space-2);
     text-align: center;
   }
 
-  .heading { min-inline-size: 0; flex: 1; }
-  .headerAction { flex: 0 0 auto; margin-block-start: calc(var(--openbitfun-space-1) * -1); }
+  .heading { min-inline-size: 0; grid-column: 2; }
+  .headerAction { grid-column: 3; justify-self: end; }
 
   .title {
     min-inline-size: 0;

design-system/packages/ui/tests/mobile.test.mjs

@@ -143,6 +143,26 @@ test("mobile sheet keeps its closed server-rendering contract", () => {
   assert.equal(sheet, "");
 });
 
+test("mobile sheet header keeps the title on the sheet centerline beside header actions", async () => {
+  const styles = await readFile(
+    new URL("../src/mobile/MobileSheet/MobileSheet.module.css", import.meta.url),
+    "utf8",
+  );
+  const headerRule = styles.match(/\.header\s*\{[^}]*display:[^}]+\}/)?.[0];
+  const headingRule = styles.match(/\.heading\s*\{[^}]+\}/)?.[0];
+  const headerActionRule = styles.match(/\.headerAction\s*\{[^}]+\}/)?.[0];
+
+  assert.ok(headerRule, "missing MobileSheet header display rule");
+  assert.match(headerRule, /display:\s*grid/);
+  assert.match(
+    headerRule,
+    /grid-template-columns:\s*minmax\([^,]+,\s*1fr\)\s+minmax\(0,\s*auto\)\s+minmax\([^,]+,\s*1fr\)/,
+  );
+  assert.match(headingRule ?? "", /grid-column:\s*2/);
+  assert.match(headerActionRule ?? "", /grid-column:\s*3/);
+  assert.match(headerActionRule ?? "", /justify-self:\s*end/);
+});
+
 test("mobile confirmation sheets present custom icons without a decorative tile", async () => {
   const styles = await readFile(
     new URL("../src/mobile/MobileConfirmSheet/MobileConfirmSheet.module.css", import.meta.url),

src/mobile-web/src/components/WorkspaceFiles.scss

@@ -51,7 +51,7 @@
 .runtime-file-editor[data-openbitfun-part="surface"] {
   inline-size: 100%; max-inline-size: none; block-size: 100dvh; max-block-size: 100dvh;
   margin: 0; border: 0; border-radius: 0; box-shadow: none;
-  [data-openbitfun-part="header"] { align-items: center; padding-top: max(16px, env(safe-area-inset-top)); border-bottom: 1px solid var(--openbitfun-color-border-subtle); }
+  [data-openbitfun-part="header"] { display: flex; align-items: center; padding-top: max(16px, env(safe-area-inset-top)); border-bottom: 1px solid var(--openbitfun-color-border-subtle); }
   [data-openbitfun-part="heading"] { text-align: left; }
   [data-openbitfun-part="body"] { display: flex; flex: 1; min-height: 0; flex-direction: column; padding: 0; overflow: hidden; }
   [data-openbitfun-component="mobile-textarea"] { flex: 1; min-height: 0; border: 0; border-radius: 0; }

src/mobile-web/src/styles/components/chat-input.scss

@@ -501,6 +501,7 @@
 }
 
 .chat-composer-sheet > [data-openbitfun-part='header'] {
+  display: flex;
   align-items: center;
   text-align: left;
 }

src/mobile-web/tests/mobile-ui-components.test.mjs

@@ -101,6 +101,17 @@ test('settings sheet title stays on the sheet centerline beside the close action
   assert.doesNotMatch(closeRule ?? "", /margin-left:\s*auto/);
 });
 
+test('left-aligned sheet headers keep flex after MobileSheet centers by default', async () => {
+  const composer = await readFile(path.join(sourceDirectory, 'styles/components/chat-input.scss'), 'utf8');
+  const files = await readFile(path.join(sourceDirectory, 'components/WorkspaceFiles.scss'), 'utf8');
+  const composerHeader = composer.match(/\.chat-composer-sheet\s*>\s*\[data-openbitfun-part='header'\]\s*\{[^}]+\}/)?.[0];
+  const editorHeader = files.match(/\[data-openbitfun-part="header"\]\s*\{[^}]+\}/)?.[0];
+
+  assert.match(composerHeader ?? "", /display:\s*flex/);
+  assert.match(composerHeader ?? "", /text-align:\s*left/);
+  assert.match(editorHeader ?? "", /display:\s*flex/);
+});
+
 test('pairing and settings styles follow component parts instead of obsolete native anatomy', async () => {
   const harmony = await readFile(path.join(sourceDirectory, 'styles/components/harmony-native.scss'), 'utf8');
   const overlays = await readFile(path.join(sourceDirectory, 'components/SessionOverlays.tsx'), 'utf8');