From 4e2e3abc30f35c28792967c7c1c6982759c45cba Mon Sep 17 00:00:00 2001 From: govin Date: Fri, 18 Sep 2026 18:47:50 +0800 Subject: [PATCH] frontend: let the paper's paragraph rows span the panel MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The writing surface was capped at 900px and centred, on the reasoning that a narrower text column reads better. That is true of a document viewer, but this page is also the editing surface: each paragraph's heading sits on the left of its row and its edit button on the right, and capping the sheet left those two floating in the middle of the panel — 385px of nothing on each side at 1920, and worse on a wider screen. It reads as a broken layout, not a measure. The sheet now fills the card. Measured in a browser at 2560/1920/1440/1280/1024 wide, the row spans the panel with a 37px inset on both sides at every width, the edit button lands on the right inset, and nothing overflows horizontally. Note for later: prose now uses the full width too, which is 106 字/行 at 1920 and 149 字/行 at 2560. If that proves too long to read comfortably, the fix is a max-width on `.paragraph-body` alone — the heading, the edit button and the row's hover highlight would stay full width. --- frontend/src/views/papers/PaperDetailView.vue | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/frontend/src/views/papers/PaperDetailView.vue b/frontend/src/views/papers/PaperDetailView.vue index 9c88fb6..0b8ae2b 100644 --- a/frontend/src/views/papers/PaperDetailView.vue +++ b/frontend/src/views/papers/PaperDetailView.vue @@ -416,12 +416,18 @@ onMounted(load) } /* The writing surface: a sheet, not a table — the paper's own typography is - what the template describes, so the container stays out of the way. */ + what the template describes, so the container stays out of the way. + * + * Full width, deliberately. A centred, capped text column reads well in a + * document viewer, but this page is also the editing surface: every paragraph + * carries its own heading and its edit button, and those belong on the panel's + * edges. Capped at 900px they floated in the middle of a wide screen with + * several hundred pixels of nothing on either side, which looks like a broken + * layout rather than a considered measure. */ .sheet { display: flex; flex-direction: column; - max-width: 900px; - margin: 0 auto; + min-width: 0; } .references {