frontend: let the paper's paragraph rows span the panel
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.
This commit is contained in:
@@ -416,12 +416,18 @@ onMounted(load)
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* The writing surface: a sheet, not a table — the paper's own typography is
|
/* 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 {
|
.sheet {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
max-width: 900px;
|
min-width: 0;
|
||||||
margin: 0 auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.references {
|
.references {
|
||||||
|
|||||||
Reference in New Issue
Block a user