frontend: own the viewport contract in a global stylesheet

Element Plus ships no html/body reset, so the browser default
`body { margin: 8px }` applied, while the app shell was declared
`min-height: 100vh`. The document therefore measured one viewport plus
8px: a vertical scrollbar was permanently visible on the right edge even
for short pages, every page was pushed 8px off the intended 20px gutter,
and the window and .el-main both scrolled.

Add src/styles/base.css, imported once from main.ts after Element Plus,
which now owns the reset and the shell contract:

- html/body/#app/.app-shell are exactly one viewport tall with no margin;
  body never scrolls, so the window has no scrollbar
- .app-main is the single scroll container (min-height: 0, overflow-y
  auto, overflow-x hidden) with a slim low-contrast scrollbar that only
  shows when content truly exceeds the viewport
- global guards against content escaping the gutter: media max-width,
  wrapping for long code strings
- shared .page helper for a consistent per-view vertical rhythm

Also let the header menu track its content box, so its active underline
stays flush with the header separator instead of spilling past it, and
drop the now-unused RouterLink import.

This commit is contained in:

govin

2026-09-18 14:34:34 +08:00

parent ff024ed927

commit cad96e585f

4 changed files with 169 additions and 13 deletions

									
										frontend/src/main.ts
									
		+4
		
												View File
												
				@@ -6,6 +6,10 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'

				import 'element-plus/dist/index.css'

				// Global reset and application-shell layout contract. Imported after Element

				// Plus so it can override its component defaults (e.g. .el-main overflow).

				import './styles/base.css'

				import App from './App.vue'

				import router from './router'