From fd50241e8463e39cd1a1b1c158cb852434e2ec66 Mon Sep 17 00:00:00 2001
From: Raunak Bhagat <r@rabh.io>
Date: Fri, 21 Aug 2026 21:57:10 -0700
Subject: [PATCH] fix(web): sit the New Project button properly beside its
 title

The button was a size smaller than the row it shares with the "Projects"
title, so it read as an afterthought rather than that section's action.

Spacing moves with it: the section header carries its own top padding and
right inset now, and the title its own vertical padding, instead of the
gaps being spread across the sidebar body and header.
---
 web/lib/opal/src/layouts/sidebar/styles.css | 8 ++++----
 web/src/sections/sidebar/AppSidebar.tsx     | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/lib/opal/src/layouts/sidebar/styles.css b/web/lib/opal/src/layouts/sidebar/styles.css
index 14916b5d25b..6a1fe425e1a 100644
--- a/web/lib/opal/src/layouts/sidebar/styles.css
+++ b/web/lib/opal/src/layouts/sidebar/styles.css
@@ -83,7 +83,7 @@
    --------------------------------------------------------------------------- */
 
 .opal-sidebar-header {
-  @apply flex flex-col gap-4 pb-2;
+  @apply flex flex-col gap-4;
 }
 
 .opal-sidebar-header__topbar {
@@ -152,7 +152,7 @@
 }
 
 .opal-sidebar-body__content {
-  @apply flex-1 flex flex-col px-2 gap-2;
+  @apply flex-1 flex flex-col px-2;
 }
 .opal-sidebar-root__inner[data-folded="true"] .opal-sidebar-body__content {
   @apply hidden;
@@ -167,9 +167,9 @@
    --------------------------------------------------------------------------- */
 
 .opal-sidebar-section__header {
-  @apply pl-2 pb-1 pt-2 flex flex-row justify-between items-center;
+  @apply pt-3 pl-2 pr-1 flex flex-row justify-between items-center;
 }
 
 .opal-sidebar-section__title {
-  @apply flex p-0.5;
+  @apply flex px-0.5 py-1.5;
 }
diff --git a/web/src/sections/sidebar/AppSidebar.tsx b/web/src/sections/sidebar/AppSidebar.tsx
index 8e21d742116..a3de55a33a1 100644
--- a/web/src/sections/sidebar/AppSidebar.tsx
+++ b/web/src/sections/sidebar/AppSidebar.tsx
@@ -672,7 +672,7 @@ export default function AppSidebar() {
                     <OpalButton
                       icon={SvgFolderPlus}
                       prominence="tertiary"
-                      size="sm"
+                      size="md"
                       tooltip="New Project"
                       onClick={() => createProjectModal.toggle(true)}
                     />