Merge pull request #24703 from overleaf/mj-ide-align-icon

[web] Editor redesign: Align logo and home button with rail tabs

GitOrigin-RevId: 837651bb55348a043ec16afeffb508bc1d723689

services/web/frontend/stylesheets/bootstrap-5/pages/editor/rail.scss

@@ -106,6 +106,7 @@
   padding: var(--spacing-02);
   background: var(--ide-rail-background);
   border-right: 1px solid var(--ide-rail-border-colour);
+  width: 40px;
 }
 
 .ide-rail-content {
@@ -131,7 +132,6 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-02);
-  width: 40px;
 }
 
 .ide-rail-tab-dropdown {

services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar-redesign.scss

@@ -35,6 +35,7 @@
   justify-content: space-between;
   box-sizing: border-box;
   height: $toolbar-height;
+  padding: 0 var(--spacing-02);
 
   .ide-redesign-toolbar-menu {
     display: flex;
@@ -44,7 +45,7 @@
   .ide-redesign-toolbar-home-button {
     width: $home-button-size;
     height: $home-button-size;
-    margin: math.div($toolbar-height - $home-button-size, 2);
+    margin: math.div($toolbar-height - $home-button-size, 2) 0;
   }
 
   .ide-redesign-toolbar-button-subdued {
@@ -132,7 +133,7 @@
 .ide-redesign-toolbar-actions {
   display: flex;
   gap: var(--spacing-04);
-  padding: 0 var(--spacing-05);
+  padding-left: var(--spacing-05);
 }
 
 .ide-redesign-toolbar-button-container {