Fix CompactToggleButtons spacing and border-radius

Use padding instead of margin for button spacing, make separator
stretch to full height, and apply rounded corners only to the
first and last buttons for a cleaner grouped appearance.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: LuniMoon

newIDE/app/src/UI/CompactToggleButtons/CompactToggleButtons.module.css

@@ -10,7 +10,7 @@
 }
 
 .compactToggleButton {
-  border-radius: 4px;
+  border-radius: 0;
   color: var(--theme-text-default-color);
   background-color: var(--theme-text-field-default-background-color);
   transition: box-shadow 0.1s;
@@ -20,7 +20,7 @@
   justify-content: center;
   flex: 1;
   min-width: 0px;
-  margin: 3px;
+  padding: 3px;
   border: 0;
 }
 
@@ -41,7 +41,7 @@
 
 .separator {
   background-color: var(--theme-text-field-disabled-color);
-  height: 15px;
+  align-self: stretch;
   width: 1px;
   margin: 0 1px;
 }
@@ -53,6 +53,14 @@ svg.icon {
   transition: color 0.1s linear;
 }
 
+.compactToggleButton.first {
+  border-radius: 4px 0 0 4px;
+}
+
+.compactToggleButton.last {
+  border-radius: 0 4px 4px 0;
+}
+
 .compactToggleButton.active {
   background-color: var(--theme-icon-button-selected-background-color);
 }

newIDE/app/src/UI/CompactToggleButtons/index.js

@@ -45,6 +45,8 @@ const CompactToggleButtons = ({
             <button
               className={classNames({
                 [classes.compactToggleButton]: true,
+                [classes.first]: index === 0,
+                [classes.last]: index === buttons.length - 1,
                 [classes.active]: button.isActive,
               })}
               onClick={button.onClick}