adjust spacing and group button groups

webapp/IronCalc/src/components/Toolbar/Toolbar.tsx

@@ -105,6 +105,8 @@ function Toolbar(properties: ToolbarProperties) {
 
   return (
     <ToolbarContainer>
+      {/* History/Edit Group */}
+      <ButtonGroup>
         <StyledButton
           type="button"
           $pressed={false}
@@ -123,7 +125,12 @@ function Toolbar(properties: ToolbarProperties) {
         >
           <Redo2 />
         </StyledButton>
+      </ButtonGroup>
+
       <Divider />
+
+      {/* Format Tools Group */}
+      <ButtonGroup>
         <StyledButton
           type="button"
           $pressed={false}
@@ -132,7 +139,23 @@ function Toolbar(properties: ToolbarProperties) {
         >
           <PaintRoller />
         </StyledButton>
+        <StyledButton
+          type="button"
+          $pressed={false}
+          onClick={() => {
+            properties.onClearFormatting();
+          }}
+          disabled={!canEdit}
+          title={t("toolbar.clear_formatting")}
+        >
+          <RemoveFormatting />
+        </StyledButton>
+      </ButtonGroup>
+
       <Divider />
+
+      {/* Number Format Group */}
+      <ButtonGroup>
         <StyledButton
           type="button"
           $pressed={false}
@@ -206,7 +229,12 @@ function Toolbar(properties: ToolbarProperties) {
             <ChevronDown />
           </StyledButton>
         </FormatMenu>
+      </ButtonGroup>
+
       <Divider />
+
+      {/* Font Size Group */}
+      <ButtonGroup>
         <StyledButton
           type="button"
           $pressed={false}
@@ -230,7 +258,12 @@ function Toolbar(properties: ToolbarProperties) {
         >
           <Plus />
         </StyledButton>
+      </ButtonGroup>
+
       <Divider />
+
+      {/* Text Style Group */}
+      <ButtonGroup>
         <StyledButton
           type="button"
           $pressed={properties.bold}
@@ -267,7 +300,12 @@ function Toolbar(properties: ToolbarProperties) {
         >
           <Strikethrough />
         </StyledButton>
+      </ButtonGroup>
+
       <Divider />
+
+      {/* Color & Border Group */}
+      <ButtonGroup>
         <StyledButton
           type="button"
           $pressed={false}
@@ -300,7 +338,12 @@ function Toolbar(properties: ToolbarProperties) {
         >
           <Grid2X2 />
         </StyledButton>
+      </ButtonGroup>
+
       <Divider />
+
+      {/* Alignment Group */}
+      <ButtonGroup>
         <StyledButton
           type="button"
           $pressed={properties.horizontalAlign === "left"}
@@ -378,8 +421,12 @@ function Toolbar(properties: ToolbarProperties) {
         >
           <WrapText />
         </StyledButton>
+      </ButtonGroup>
 
       <Divider />
+
+      {/* View & Tools Group */}
+      <ButtonGroup>
         <StyledButton
           type="button"
           $pressed={false}
@@ -391,7 +438,6 @@ function Toolbar(properties: ToolbarProperties) {
         >
           {properties.showGridLines ? <Grid2x2Check /> : <Grid2x2X />}
         </StyledButton>
-      <Divider />
         <StyledButton
           type="button"
           $pressed={false}
@@ -403,19 +449,6 @@ function Toolbar(properties: ToolbarProperties) {
         >
           <Tags />
         </StyledButton>
-
-      <Divider />
-      <StyledButton
-        type="button"
-        $pressed={false}
-        onClick={() => {
-          properties.onClearFormatting();
-        }}
-        disabled={!canEdit}
-        title={t("toolbar.clear_formatting")}
-      >
-        <RemoveFormatting />
-      </StyledButton>
         <StyledButton
           type="button"
           $pressed={false}
@@ -427,6 +460,7 @@ function Toolbar(properties: ToolbarProperties) {
         >
           <ImageDown />
         </StyledButton>
+      </ButtonGroup>
 
       <ColorPicker
         color={properties.fontColor}
@@ -562,7 +596,7 @@ const Divider = styled("div")({
   width: "0px",
   height: "12px",
   borderLeft: `1px solid ${theme.palette.grey["300"]}`,
-  margin: "0px 12px",
+  margin: "0px 8px",
 });
 
 const FontSizeBox = styled("div")({
@@ -577,4 +611,10 @@ const FontSizeBox = styled("div")({
   minWidth: "24px",
 });
 
+const ButtonGroup = styled("div")({
+  display: "flex",
+  alignItems: "center",
+  gap: "4px",
+});
+
 export default Toolbar;

webapp/IronCalc/src/components/constants.tsx

@@ -1,3 +1,3 @@
-export const TOOLBAR_HEIGHT = 48;
+export const TOOLBAR_HEIGHT = 40;
 export const FORMULA_BAR_HEIGHT = 40;
 export const NAVIGATION_HEIGHT = 40;