diff --git a/web/src/style.css b/web/src/style.css
index 92eafa9..ab56ce3 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -71,33 +71,40 @@ body {
 .app__body {
   display: flex;
   align-items: flex-start;
+  gap: 1.5rem;
+  padding: 1.5rem 1.25rem;
 }
 
 .app__main {
   flex: 1;
   min-width: 0;
   max-width: 32rem;
-  margin: 2.5rem auto;
-  padding: 0 1.25rem;
+  margin: 0 auto;
 }
 
 /* Full-bleed layout for views that need the room (e.g. the project board). */
 .app__main--wide {
   max-width: none;
-  margin: 1.5rem auto;
+  margin: 0;
 }
 
 /* --- left sidebar (signed-in app pages) ------------------------------ */
 
 .sidebar {
   flex: 0 0 15rem;
-  align-self: stretch;
+  align-self: flex-start;
   position: sticky;
-  top: 0;
-  max-height: 100vh;
+  /* Matches .app__body's top padding, so the gap holds once it starts sticking. */
+  top: 1.5rem;
+  /* Fill the screen height: viewport minus the header (~3.0625rem, .app__bar's
+     padding + line height + border) and a matching 1.5rem gap top and bottom.
+     Not just a cap -- short content leaves room at the bottom of the panel,
+     long content scrolls internally. Re-tune if .app__bar's height changes. */
+  height: calc(100vh - 6.0625rem);
   overflow-y: auto;
   padding: 1rem 0.75rem 1.5rem;
-  border-right: 1px solid var(--border);
+  border: 1px solid var(--border);
+  border-radius: 12px;
   background: var(--surface);
 }