From f87548032bc5fa1d939ebfb3323e621d5fa5efd8 Mon Sep 17 00:00:00 2001 From: Rogee Date: Tue, 22 Sep 2026 17:07:13 +0800 Subject: [PATCH] fix: make editor a fixed workbench layout --- src/app/styles.css | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/app/styles.css b/src/app/styles.css index f94eaff..38110e3 100644 --- a/src/app/styles.css +++ b/src/app/styles.css @@ -7,22 +7,23 @@ } * { box-sizing: border-box; } -body { margin: 0; min-width: 960px; background: #eef2f6; } -.app-shell { min-height: 100vh; display: flex; flex-direction: column; } +html, body, #app { height: 100%; } +body { margin: 0; min-width: 960px; overflow: hidden; background: #eef2f6; } +.app-shell { height: 100vh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } button, input, textarea { font: inherit; } button { border: 1px solid #aeb9c6; border-radius: 5px; background: #fff; color: #1b2533; padding: 0.45rem 0.75rem; cursor: pointer; } button:hover:not(:disabled) { background: #e8f0fa; border-color: #527da9; } button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible, [data-id]:focus-visible { outline: 3px solid #1677c8; outline-offset: 2px; } button:disabled { cursor: not-allowed; opacity: 0.45; } button.danger { color: #9d241e; } -.app-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 30px; padding: 0 0.65rem; background: #1d2b3a; color: #f5f8fb; border-bottom: 1px solid #0d1722; } +.app-header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 30px; padding: 0 0.65rem; background: #1d2b3a; color: #f5f8fb; border-bottom: 1px solid #0d1722; } .eyebrow { display: none; } h1, h2 { margin: 0; } .app-header h1 { font-size: 0.9rem; line-height: 1; font-weight: 600; } .document-state { display: flex; align-items: center; gap: 0.45rem; font-size: 0.72rem; } .state-pill { border-radius: 2px; background: #2f7454; padding: 0.15rem 0.4rem; white-space: nowrap; } .state-pill.dirty { background: #a55c1d; } -.menu-bar { display: flex; align-items: stretch; height: 20px; padding: 0 0.25rem; background: #eceff2; border-bottom: 1px solid #b5bdc7; color: #263442; } +.menu-bar { flex: 0 0 auto; display: flex; align-items: stretch; height: 20px; padding: 0 0.25rem; background: #eceff2; border-bottom: 1px solid #b5bdc7; color: #263442; } .menu-item { position: relative; } .menu-item summary { list-style: none; cursor: default; padding: 0 0.62rem; height: 19px; line-height: 19px; font-size: 0.74rem; user-select: none; } .menu-item summary::-webkit-details-marker { display: none; } @@ -32,7 +33,7 @@ h1, h2 { margin: 0; } .menu-popup button:hover:not(:disabled) { background: #dceaf8; border-color: transparent; } .menu-popup-note { min-width: 12rem; } .menu-popup-note span { color: #657487; } -.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; padding: 0 0.5rem; background: #f7f8f9; border-bottom: 1px solid #c9d3de; } +.toolbar { flex: 0 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; padding: 0 0.5rem; background: #f7f8f9; border-bottom: 1px solid #c9d3de; } .toolbar-main { min-height: 60px; } .toolbar-secondary { min-height: 33px; background: #eef1f4; } .toolbar-tertiary { min-height: 28px; gap: 0; background: #e7ebef; } @@ -46,8 +47,8 @@ h1, h2 { margin: 0; } .file-button { display: inline-flex; align-items: center; border: 1px solid #aeb9c6; border-radius: 5px; background: #fff; padding: 0.45rem 0.75rem; cursor: pointer; } .file-button:hover { background: #e8f0fa; border-color: #527da9; } .file-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } -.workspace { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: calc(100vh - 208px); } -.inspector { padding: 1rem; background: #f7f9fb; border-right: 1px solid #c9d3de; overflow-y: auto; } +.workspace { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 280px minmax(0, 1fr); overflow: hidden; } +.inspector { min-height: 0; padding: 1rem; background: #f7f9fb; border-right: 1px solid #c9d3de; overflow-y: auto; overflow-x: hidden; } .panel { margin-bottom: 0.8rem; padding: 0.8rem; border: 1px solid #d1dae4; border-radius: 7px; background: #fff; box-shadow: 0 1px 2px #1725370d; } .panel h2, .panel summary { font-size: 0.98rem; font-weight: 650; margin-bottom: 0.65rem; } .panel label { display: block; margin: 0.55rem 0; font-size: 0.83rem; color: #4d5b6b; } @@ -62,7 +63,7 @@ h1, h2 { margin: 0; } .help-text, #selection-empty { color: #657487; font-size: 0.8rem; line-height: 1.45; } .report-panel summary { cursor: pointer; } #parse-report { margin: 0; max-height: 260px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: #405267; font-size: 0.72rem; line-height: 1.4; } -.paper-workspace { min-width: 0; padding: 1rem 1.25rem 2rem; overflow: auto; } +.paper-workspace { min-width: 0; min-height: 0; padding: 1rem 1.25rem 2rem; overflow: auto; overscroll-behavior: contain; } .paper-toolbar { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.45rem; color: #31455b; } .paper-toolbar h2 { font-size: 1.05rem; } #layout-summary { color: #657487; font-size: 0.8rem; } @@ -76,7 +77,7 @@ h1, h2 { margin: 0; } .paper-page svg [data-id] { cursor: pointer; } .paper-page svg [data-id].selected { fill: #b42318; stroke: #b42318; stroke-width: 0.5; paint-order: stroke; } .paper-page svg [data-layer="assistive"] { pointer-events: none; } -.app-footer { min-height: 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.15rem 0.75rem; background: #fff; border-top: 1px solid #c9d3de; color: #526477; font-size: 0.68rem; } +.app-footer { flex: 0 0 auto; min-height: 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.15rem 0.75rem; background: #fff; border-top: 1px solid #c9d3de; color: #526477; font-size: 0.68rem; } .footer-metrics { display: flex; align-items: center; gap: 0.7rem; min-width: 0; overflow: hidden; white-space: nowrap; } .footer-metric { padding-right: 0.65rem; border-right: 1px solid #d8dee5; } .footer-metric:last-child { border-right: 0; }