microsoft / microsoft/vscode-documentdb
Unify body padding across webviews (VS Code injects a default 20px gutter)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 31
- Forks
- 22
- Avg merge
- 2d 20h
- Merged PRs (30d)
- 21
Description
Summary
VS Code injects a default stylesheet into every webview that applies roughly body { margin: 0; padding: 0 20px; }. None of our webviews reset or standardize this, so each view inherits the platform's 20px left/right gutter and then layers its own ad-hoc insets on top. This makes it hard to reason about spacing and prevents full-bleed elements (e.g. a footer's top border/shadow) from spanning edge-to-edge.
Current state
- The webview HTML template (
WebviewController.ts) renders a bare<body><div id="root">with no styles. - The shared
src/webviews/index.scsshas nohtml/bodyreset. - Existing views (
collectionView,documentView) rely on the default gutter implicitly (height: 100vhroot, content flows inside the 20px). - The Atlas credentials view now sets a local
body { padding: 0 }reset (src/webviews/documentdb/atlasCredentials/atlasCredentials.scss) so its pinned footer border/shadow can span edge-to-edge. This is a one-off that should be generalized.
Proposal
Decide on a single, intentional convention for webview body padding and apply it centrally (e.g. a body { padding: 0 } reset in the shared index.scss, with each view owning its own insets), then remove per-view workarounds like the Atlas local reset.
Care needed: collectionView and documentView currently assume the default gutter, so a global reset must be paired with reviewing their inner padding to avoid regressions.
Scope
Small, mechanical, but touches multiple views — deliberately not bundled into the Atlas discovery PR (#813) to keep that change focused.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with packages/vscode-ext-webview/src/host/WebviewController.ts and src/webviews/index.scss, then compare the collectionView, documentView, and atlasCredentials stylesheets. Trace which views rely on VS Code's gutter and verify their inner insets before standardizing the shared body spacing. Done means the convention is centralized, the Atlas workaround is no longer needed, and full-bleed elements retain the intended layout.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- scss, typescript
- Domain
- frontend
- Issue type
- Refactor
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100