From aec466c6f3d10711e1798c8cddd07c7405087fdb Mon Sep 17 00:00:00 2001
From: claude <claude@verso>
Date: Thu, 11 Jun 2026 16:35:11 +0000
Subject: [PATCH] Enlarge sidebar logo 20% and fix compile button corner
 rounding
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Logo (all themes): scale the Verso wordmark to 120% width, centered and
  clipped to the sidebar column — the word mark visually fills the full
  sidebar width. Uses overflow:hidden + width:120% !important + margin-left:-10%
  to override the existing inline width style.
- Compile button (Lumière): replace the all-corners border-radius:7px on the
  split button group with corner-specific rules — .compile-button gets 7px on
  the left side only, .compile-dropdown-toggle gets 7px on the right side only,
  so the shared inner edge stays flat as expected for a joined split button.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../stylesheets/pages/editor/ide-lumiere.scss | 25 +++++++++++++++----
 .../pages/project-list-ds-nav.scss            | 10 +++++---
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss b/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss
index ab6d7d979b..1854ab44f0 100644
--- a/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss
+++ b/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss
@@ -241,15 +241,22 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
 }
 
 // ── Compile button — teal gradient ────────────────────────────────────────
-// .compile-button-group wraps the Recompile button in the toolbar actions
+// .compile-button-group is a split button: main Recompile + dropdown arrow.
+// Only the outer corners get rounded; the inner shared edge stays flat.
 
 [data-lumiere='true'] .compile-button-group {
-  .btn-primary,
-  .btn {
-    border-radius: 7px !important;
+  // Main (left) button: round left side, flat right side
+  .compile-button {
+    border-radius: 7px 0 0 7px !important;
   }
 
-  .btn-primary {
+  // Dropdown arrow (right button): flat left side, round right side
+  .compile-dropdown-toggle {
+    border-radius: 0 7px 7px 0 !important;
+  }
+
+  // Teal gradient on the main compile button only
+  .compile-button.btn-primary {
     background: linear-gradient(135deg, $lum-teal 0%, darken($lum-teal, 8%) 100%) !important;
     border-color: darken($lum-teal, 10%) !important;
     box-shadow: 0 2px 8px rgba($lum-teal, 0.35) !important;
@@ -260,4 +267,12 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
       box-shadow: 0 4px 14px rgba($lum-teal, 0.45) !important;
     }
   }
+
+  // Dropdown toggle also gets the teal background (same button group, same color)
+  .compile-dropdown-toggle.btn-primary {
+    background: linear-gradient(135deg, darken($lum-teal, 5%) 0%, darken($lum-teal, 12%) 100%) !important;
+    border-color: darken($lum-teal, 10%) !important;
+    border-left-color: rgba(255, 255, 255, 0.2) !important;
+    box-shadow: 0 2px 8px rgba($lum-teal, 0.35) !important;
+  }
 }
diff --git a/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss b/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss
index 6f3b9a4315..9e9b15dd21 100644
--- a/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss
+++ b/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss
@@ -244,11 +244,13 @@ body {
         }
       }
 
-      // Let the Verso wordmark bleed past the lower section's asymmetric
-      // padding so it spans the full width of the sidebar column.
+      // The Verso wordmark bleeds past the lower section's padding to span
+      // the full sidebar column width, then the image is scaled to 120% and
+      // centered so the wordmark fills the available width (all themes).
       .ds-nav-verso-logo {
         margin-left: calc(-1 * var(--spacing-05));
         margin-right: calc(-1 * var(--spacing-08));
+        overflow: hidden;
         transition: filter 0.2s ease;
 
         &:hover {
@@ -256,7 +258,9 @@ body {
         }
 
         img {
-          width: 100%;
+          display: block;
+          width: 120% !important;
+          margin-left: -10%;
           height: auto;
         }
       }