Make ColorPicker buttons halfwidth

ts/components/IconButton.svelte

@@ -13,11 +13,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export { className as class };
 
     export let tooltip: string | undefined = undefined;
-    export let iconSize: number = 80;
     export let active = false;
     export let disables = true;
     export let tabbable = false;
 
+    export let iconSize: number = 80;
+    export let widthMultiplier: number = 1;
+
     let buttonRef: HTMLButtonElement;
 
     const disabled = getContext<Readable<boolean>>(disabledKey);
@@ -46,7 +48,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     on:click
     on:mousedown|preventDefault
 >
-    <span> <slot /> </span>
+    <span style={`--width-multiplier: ${widthMultiplier};`}> <slot /> </span>
 </button>
 
 <style lang="scss">
@@ -66,7 +68,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         vertical-align: middle;
 
         /* constrain icon */
-        width: calc(var(--buttons-size) - 2px);
+        width: calc((var(--buttons-size) - 2px) * var(--width-multiplier));
         height: calc(var(--buttons-size) - 2px);
 
         & > :global(svg),

ts/editor/ColorButtons.svelte

@@ -12,7 +12,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import WithShortcut from "components/WithShortcut.svelte";
     import WithColorHelper from "./WithColorHelper.svelte";
 
-    import { textColorIcon, highlightColorIcon } from "./icons";
+    import { textColorIcon, highlightColorIcon, arrowIcon } from "./icons";
     import { appendInParentheses } from "./helpers";
 
     export let api = {};
@@ -52,7 +52,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                         shortcutLabel
                     )}
                     disables={false}
+                    widthMultiplier={0.5}
                 >
+                    {@html arrowIcon}
                     <ColorPicker on:change={setColor} on:mount={createShortcut} />
                 </IconButton>
             </WithShortcut>
@@ -61,23 +63,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     <WithColorHelper let:colorHelperIcon let:color let:setColor>
         <ButtonGroupItem>
-            <WithShortcut shortcut={"F7"} let:createShortcut let:shortcutLabel>
-                <IconButton
-                    tooltip={appendInParentheses(
-                        tr.editingSetForegroundColor(),
-                        shortcutLabel
-                    )}
-                    on:click={wrapWithBackcolor(color)}
-                    on:mount={createShortcut}
-                >
-                    {@html highlightColorIcon}
-                    {@html colorHelperIcon}
-                </IconButton>
-            </WithShortcut>
+            <IconButton on:click={wrapWithBackcolor(color)}>
+                {@html highlightColorIcon}
+                {@html colorHelperIcon}
+            </IconButton>
         </ButtonGroupItem>
 
         <ButtonGroupItem>
-            <IconButton tooltip={tr.editingChangeColor()} disables={false}>
+            <IconButton
+                tooltip={tr.editingChangeColor()}
+                disables={false}
+                widthMultiplier={0.5}
+            >
+                {@html arrowIcon}
                 <ColorPicker on:change={setColor} />
             </IconButton>
         </ButtonGroupItem>

ts/editor/icons.ts

@@ -30,3 +30,6 @@ export { default as micIcon } from "./mic.svg";
 export { default as bracketsIcon } from "./code-brackets.svg";
 export { default as functionIcon } from "./function-variant.svg";
 export { default as xmlIcon } from "./xml.svg";
+
+export const arrowIcon =
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="transparent" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 5l6 6 6-6"/></svg>';