(maka) 01/02: fix(desktop): let transcript prose reach the turn column edge

[as...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

Astro-Han pushed a commit to branch fix/desktop-transcript-prose-measure
in repository https://gitbox.apache.org/repos/asf/maka.git

commit fd604b98649f5e7d4c330f8dde45ee4df728c0ef
Author: AstroHan <le...@outlook.com>
AuthorDate: Thu Aug 27 16:22:12 2026 +0800

    fix(desktop): let transcript prose reach the turn column edge
    
    The turn column is --maka-transcript-measure (800px), but Astryx's Markdown
    applies its own 680px prose cap with start alignment, so every paragraph
    stopped 120px short of the tool cards and the user bubble in the same turn —
    one turn with two right edges, and a widening window only made the gap more
    visible.
    
    Pass contentWidth: 100% from MarkdownBody so the container is the single
    reading-measure authority. Each caller already clamps its own width: the
    transcript at the transcript measure, Daily Review at its report column, the
    artifact panel at the panel.
    
    Covered by an E2E that sends a paragraph at a 1400px viewport and asserts the
    prose right edge meets the turn right edge; it reports exactly 120px without
    the fix.
    
    Generated-by: Claude Code
---
 apps/desktop/e2e/transcript-measure.spec.ts | 67 +++++++++++++++++++++++++++++
 apps/desktop/src/renderer/maka-tokens.css   | 10 +++--
 packages/ui/src/markdown-body.tsx           |  8 ++++
 3 files changed, 81 insertions(+), 4 deletions(-)

diff --git a/apps/desktop/e2e/transcript-measure.spec.ts b/apps/desktop/e2e/transcript-measure.spec.ts
new file mode 100644
index 000000000..abbcf78fa
--- /dev/null
+++ b/apps/desktop/e2e/transcript-measure.spec.ts
@@ -0,0 +1,67 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { expect, test, COMPOSER_INPUT } from './fixtures';
+
+/**
+ * One turn has one right edge. The turn column is `--maka-transcript-measure`
+ * (800px) wide, so on a window wider than that the column stops short of the
+ * viewport by design — but everything inside it, prose included, must stop at
+ * the same place. Astryx's Markdown caps prose at its own 680px default, which
+ * left every paragraph 120px short of the tool cards and the user bubble in the
+ * same turn.
+ */
+test('assistant prose reaches the transcript column edge on a wide window', async ({
+  window: page,
+}) => {
+  await page.setViewportSize({ width: 1400, height: 800 });
+  const composer = page.locator(COMPOSER_INPUT);
+  await composer.fill(
+    Array.from(
+      { length: 40 },
+      (_, index) => `measure-word-${String(index).padStart(3, '0')}`,
+    ).join(' '),
+  );
+  await composer.press('Enter');
+
+  await expect(page.getByRole('button', { name: '重新生成' })).toHaveCount(1, {
+    timeout: 20_000,
+  });
+
+  const answer = page.getByRole('article', { name: 'Maka 的回答' }).last();
+  const paragraph = answer.locator('[role="paragraph"]').first();
+  await expect(paragraph).toBeVisible();
+
+  const edges = await paragraph.evaluate((element) => {
+    const turn = element.closest('.maka-turn');
+    if (!turn) throw new Error('assistant paragraph is not inside a turn');
+    const turnRect = turn.getBoundingClientRect();
+    const proseRect = element.getBoundingClientRect();
+    return {
+      turnWidth: turnRect.width,
+      turnRight: turnRect.right,
+      proseRight: proseRect.right,
+    };
+  });
+
+  // The window is wider than the column, so the column itself is at its cap —
+  // otherwise the edges would agree for the uninteresting reason.
+  expect(edges.turnWidth).toBeGreaterThan(700);
+  expect(edges.turnRight - edges.proseRight).toBeLessThanOrEqual(1);
+});
diff --git a/apps/desktop/src/renderer/maka-tokens.css b/apps/desktop/src/renderer/maka-tokens.css
index 6780d4319..1662f6cfc 100644
--- a/apps/desktop/src/renderer/maka-tokens.css
+++ b/apps/desktop/src/renderer/maka-tokens.css
@@ -943,10 +943,12 @@
      fallbacks are redundant. */
   --maka-chat-measure: 680px;
 
-  /* Astryx's AI Chat conversation uses an 800px message area while Markdown
-     keeps prose at 680px and lets code/tables fill the wider container. Keep
-     that exception transcript-scoped so the shared Maka surfaces above do not
-     change width as a side effect of making source evidence readable. */
+  /* Astryx's AI Chat conversation uses an 800px message area. Keep that
+     exception transcript-scoped so the shared Maka surfaces above do not
+     change width as a side effect of making source evidence readable.
+     Everything inside a turn — prose, tool cards, code, the user bubble —
+     resolves to this one measure; `MarkdownBody` passes `contentWidth: 100%`
+     so Astryx's own 680px prose cap cannot fork a second right edge. */
   --maka-transcript-measure: 800px;
 
   /* === settings ==========================================================
diff --git a/packages/ui/src/markdown-body.tsx b/packages/ui/src/markdown-body.tsx
index 2ea84a971..9d9145914 100644
--- a/packages/ui/src/markdown-body.tsx
+++ b/packages/ui/src/markdown-body.tsx
@@ -151,6 +151,14 @@ export function MarkdownBody(props: {
     >
       <AstryxMarkdown
         autolink="gfm"
+        // The container owns the reading measure, not Markdown. Astryx caps
+        // prose at 680px while leaving code and tables to fill the container,
+        // so inside the 800px transcript column (`--maka-transcript-measure`)
+        // every paragraph stopped 120px short of the tool cards and the user
+        // bubble beside it — one turn with two right edges. Filling the column
+        // keeps a single measure per surface: the transcript, the Daily Review
+        // column, and the artifact panel each already clamp their own width.
+        contentWidth="100%"
         // Chosen by the caller, and defaulting to document rhythm.
         //
         // The transcript passes `compact`: Astryx's default heading spacing


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@maka.apache.org
For additional commands, e-mail: commits-help@maka.apache.org