fix(web): remove mobile copy mode overflow

Author: pallyoung

e2e/specs/settings/mobile-copy-on-select.spec.ts

@@ -272,10 +272,13 @@ test.describe("mobile copy on select", () => {
       const body = document.body;
       const doc = document.documentElement;
       const overlay = document.querySelector(".mobile-terminal-copy-mode");
+      const toolbar = document.querySelector(".mobile-terminal-copy-mode__toolbar");
       const content = document.querySelector(".mobile-terminal-copy-mode__content");
       const text = document.querySelector(".mobile-terminal-copy-mode__text");
       const sheet = document.querySelector(".mobile-sheet--terminal");
       const terminalSheet = document.querySelector(".mobile-terminal-sheet");
+      const xtermViewport = document.querySelector(".mobile-sheet--terminal .xterm-viewport");
+      const xtermRows = document.querySelector(".mobile-sheet--terminal .xterm-rows");
       const viewportWidth = window.innerWidth;
       const viewportHeight = window.innerHeight;
 
@@ -289,10 +292,17 @@ test.describe("mobile copy on select", () => {
         bodyScrollWidth: body.scrollWidth,
         bodyScrollHeight: body.scrollHeight,
         overlayRect: rect(overlay),
+        toolbarRect: rect(toolbar),
         contentRect: rect(content),
         textRect: rect(text),
         sheetRect: rect(sheet),
         terminalSheetRect: rect(terminalSheet),
+        xtermViewportRect: rect(xtermViewport),
+        xtermRowsRect: rect(xtermRows),
+        contentClientHeight: content instanceof HTMLElement ? content.clientHeight : null,
+        contentScrollHeight: content instanceof HTMLElement ? content.scrollHeight : null,
+        textClientHeight: text instanceof HTMLElement ? text.clientHeight : null,
+        textScrollHeight: text instanceof HTMLElement ? text.scrollHeight : null,
       };
     });
 
@@ -326,6 +336,10 @@ test.describe("mobile copy on select", () => {
           (beforeMetrics.terminalSheetRect?.height ?? 0)
       )
     ).toBeLessThanOrEqual(1);
+    expect(
+      afterMetrics.contentScrollHeight,
+      `copy mode content should not overflow by default:\n${JSON.stringify(afterMetrics, null, 2)}`
+    ).toBeLessThanOrEqual((afterMetrics.contentClientHeight ?? 0) + 1);
   });
 
   test("mobile long press does not enter copy mode when copy on select is disabled", async ({

packages/web/src/styles/components.css

@@ -9119,7 +9119,6 @@ textarea.input {
     display: flex;
     flex-direction: column;
     min-height: 0;
-    padding: var(--sp-3);
     box-sizing: border-box;
     overflow: hidden;
     background: color-mix(in srgb, var(--bg-terminal) 94%, var(--bg-page) 6%);
@@ -9132,6 +9131,7 @@ textarea.input {
     display: flex;
     align-items: center;
     gap: var(--sp-2);
+    padding-inline: var(--sp-3);
     padding-bottom: var(--sp-3);
   }
 
@@ -9158,6 +9158,7 @@ textarea.input {
     max-width: 100%;
     max-height: 100%;
     overflow: auto;
+    padding-inline: var(--sp-3);
     user-select: text;
     -webkit-user-select: text;
     -webkit-touch-callout: default;