reduce spacing between buttons to fix toolbar not fitting on a single line on mobile

commafeed-client/src/components/ButtonToolbar.tsx

@@ -0,0 +1,5 @@
+import { Group } from "@mantine/core"
+
+export function ButtonToolbar(props: { children: React.ReactNode }) {
+    return <Group spacing={14}>{props.children}</Group>
+}

commafeed-client/src/components/content/FeedEntryFooter.tsx

@@ -6,6 +6,7 @@ import { markEntriesUpToEntry, markEntry, starEntry, tagEntry } from "app/slices
 import { useAppDispatch, useAppSelector } from "app/store"
 import { Entry } from "app/types"
 import { ActionButton } from "components/ActionButtton"
+import { ButtonToolbar } from "components/ButtonToolbar"
 import { useEffect, useState } from "react"
 import { TbArrowBarToDown, TbExternalLink, TbEyeCheck, TbEyeOff, TbShare, TbStar, TbStarOff, TbTag } from "react-icons/tb"
 import { ShareButtons } from "./ShareButtons"
@@ -43,7 +44,7 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
 
     return (
         <Group position="apart">
-            <Group>
+            <ButtonToolbar>
                 {props.entry.markable && (
                     <ActionButton
                         icon={props.entry.read ? <TbEyeOff size={18} /> : <TbEyeCheck size={18} />}
@@ -93,7 +94,7 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
                 <a href={props.entry.url} target="_blank" rel="noreferrer">
                     <ActionButton icon={<TbExternalLink size={18} />} label={t`Open link`} />
                 </a>
-            </Group>
+            </ButtonToolbar>
 
             <ActionButton
                 icon={<TbArrowBarToDown size={18} />}

commafeed-client/src/components/header/Header.tsx

@@ -1,10 +1,11 @@
 import { t } from "@lingui/macro"
-import { ActionIcon, Center, Divider, Group, Indicator, Popover, TextInput } from "@mantine/core"
+import { ActionIcon, Center, Divider, Indicator, Popover, TextInput } from "@mantine/core"
 import { useForm } from "@mantine/form"
 import { reloadEntries, search } from "app/slices/entries"
 import { changeReadingMode, changeReadingOrder } from "app/slices/user"
 import { useAppDispatch, useAppSelector } from "app/store"
 import { ActionButton } from "components/ActionButtton"
+import { ButtonToolbar } from "components/ButtonToolbar"
 import { Loader } from "components/Loader"
 import { useEffect } from "react"
 import { TbArrowDown, TbArrowUp, TbEye, TbEyeOff, TbRefresh, TbSearch, TbUser, TbX } from "react-icons/tb"
@@ -38,7 +39,7 @@ export function Header() {
     if (!settings) return <Loader />
     return (
         <Center>
-            <Group>
+            <ButtonToolbar>
                 <ActionButton icon={<TbRefresh size={iconSize} />} label={t`Refresh`} onClick={() => dispatch(reloadEntries())} />
                 <MarkAllAsReadButton iconSize={iconSize} />
 
@@ -81,7 +82,7 @@ export function Header() {
                 <HeaderDivider />
 
                 <ProfileMenu control={<ActionButton icon={<TbUser size={iconSize} />} label={profile?.name} />} />
-            </Group>
+            </ButtonToolbar>
         </Center>
     )
 }