force the header in mobile mode if it is too large even if above the mobile breakpoint (fixed #2080)

commafeed-client/src/components/ActionButton.tsx

@@ -5,14 +5,15 @@ import { forwardRef, type MouseEventHandler, type ReactNode } from "react"
 import { Constants } from "@/app/constants"
 import { useActionButton } from "@/hooks/useActionButton"
 
+export type Mode = "auto" | "mobile" | "desktop"
+
 interface ActionButtonProps {
     icon: ReactNode
     className?: string
     label?: string | MessageDescriptor
     onClick?: MouseEventHandler
     variant?: ActionIconVariant & ButtonVariant
-    hideLabelOnDesktop?: boolean
+    mode?: Mode
-    showLabelOnMobile?: boolean
 }
 
 /**
@@ -25,7 +26,9 @@ export const ActionButton = forwardRef<HTMLDivElement, ActionButtonProps>((props
 
     const label = typeof props.label === "string" ? props.label : props.label && _(props.label)
     const variant = props.variant ?? "subtle"
-    const iconOnly = (mobile && !props.showLabelOnMobile) || (!mobile && props.hideLabelOnDesktop)
+
+    const mode: Mode = props.mode ?? "auto"
+    const iconOnly = mode === "mobile" || (mode === "auto" && mobile)
 
     return (
         <Box ref={ref} className="cf-action-button">

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

@@ -2,7 +2,8 @@ import { msg } from "@lingui/core/macro"
 import { useLingui } from "@lingui/react"
 import { Box, Center, CloseButton, Divider, Group, Indicator, Popover, TextInput } from "@mantine/core"
 import { useForm } from "@mantine/form"
-import { useEffect } from "react"
+import { useElementSize, useViewportSize } from "@mantine/hooks"
+import { type ReactNode, type RefCallback, useEffect } from "react"
 import {
     TbArrowDown,
     TbArrowUp,
@@ -20,7 +21,7 @@ import {
 import { markAllAsReadWithConfirmationIfRequired, reloadEntries, search, selectNextEntry, selectPreviousEntry } from "@/app/entries/thunks"
 import { useAppDispatch, useAppSelector } from "@/app/store"
 import { changeSettings } from "@/app/user/thunks"
-import { ActionButton } from "@/components/ActionButton"
+import { ActionButton, type Mode } from "@/components/ActionButton"
 import { Loader } from "@/components/Loader"
 import { useActionButton } from "@/hooks/useActionButton"
 import { useBrowserExtension } from "@/hooks/useBrowserExtension"
@@ -31,7 +32,7 @@ function HeaderDivider() {
     return <Divider orientation="vertical" />
 }
 
-function HeaderToolbar(props: { children: React.ReactNode }) {
+function HeaderToolbar(props: { children: ReactNode; ref?: RefCallback<typeof HeaderToolbar> }) {
     const { spacing } = useActionButton()
     const mobile = useMobile("480px")
     return mobile ? (
@@ -47,7 +48,7 @@ function HeaderToolbar(props: { children: React.ReactNode }) {
             {props.children}
         </Box>
     ) : (
-        <Group gap={spacing} className="cf-toolbar">
+        <Group gap={spacing} wrap="nowrap" className="cf-toolbar">
             {props.children}
         </Group>
     )
@@ -61,6 +62,13 @@ export function Header() {
     const searchFromStore = useAppSelector(state => state.entries.search)
     const { isBrowserExtensionPopup, openSettingsPage, openAppInNewTab } = useBrowserExtension()
     const dispatch = useAppDispatch()
+
+    const viewport = useViewportSize()
+    const { ref: headerRef, width: headerWidth } = useElementSize()
+    const sidebarWidth = useAppSelector(state => state.user.localSettings.sidebarWidth)
+    const headerTooLarge = headerWidth > viewport.width - sidebarWidth
+    const mode: Mode = headerTooLarge ? "mobile" : "auto"
+
     const { _ } = useLingui()
 
     const searchForm = useForm<{ search: string }>()
@@ -94,10 +102,11 @@ export function Header() {
 
     return (
         <Center className="cf-toolbar-wrapper">
-            <HeaderToolbar>
+            <HeaderToolbar ref={headerRef}>
                 <ActionButton
                     icon={<TbArrowUp size={iconSize} />}
                     label={msg`Previous`}
+                    mode={mode}
                     onClick={async () =>
                         await dispatch(
                             selectPreviousEntry({
@@ -111,6 +120,7 @@ export function Header() {
                 <ActionButton
                     icon={<TbArrowDown size={iconSize} />}
                     label={msg`Next`}
+                    mode={mode}
                     onClick={async () =>
                         await dispatch(
                             selectNextEntry({
@@ -127,11 +137,13 @@ export function Header() {
                 <ActionButton
                     icon={<TbRefresh size={iconSize} />}
                     label={msg`Refresh`}
+                    mode={mode}
                     onClick={async () => await dispatch(reloadEntries())}
                 />
                 <ActionButton
                     icon={<TbChecks size={iconSize} />}
                     label={msg`Mark all as read`}
+                    mode={mode}
                     onClick={() => dispatch(markAllAsReadWithConfirmationIfRequired())}
                 />
 
@@ -140,18 +152,20 @@ export function Header() {
                 <ActionButton
                     icon={settings.readingMode === "all" ? <TbEye size={iconSize} /> : <TbEyeOff size={iconSize} />}
                     label={settings.readingMode === "all" ? msg`All` : msg`Unread`}
+                    mode={mode}
                     onClick={toggleReadingMode}
                 />
                 <ActionButton
                     icon={settings.readingOrder === "asc" ? <TbSortAscending size={iconSize} /> : <TbSortDescending size={iconSize} />}
                     label={settings.readingOrder === "asc" ? msg`Asc` : msg`Desc`}
+                    mode={mode}
                     onClick={toggleReadingOrder}
                 />
 
                 <Popover>
                     <Popover.Target>
                         <Indicator disabled={!searchFromStore}>
-                            <ActionButton icon={<TbSearch size={iconSize} />} label={msg`Search`} />
+                            <ActionButton icon={<TbSearch size={iconSize} />} label={msg`Search`} mode={mode} />
                         </Indicator>
                     </Popover.Target>
                     <Popover.Dropdown>
@@ -169,7 +183,7 @@ export function Header() {
 
                 <HeaderDivider />
 
-                <ProfileMenu control={<ActionButton icon={<TbUser size={iconSize} />} label={profile?.name} />} />
+                <ProfileMenu control={<ActionButton icon={<TbUser size={iconSize} />} label={profile?.name} mode={mode} />} />
 
                 {isBrowserExtensionPopup && (
                     <>
@@ -178,11 +192,13 @@ export function Header() {
                         <ActionButton
                             icon={<TbSettings size={iconSize} />}
                             label={msg`Extension options`}
+                            mode={mode}
                             onClick={() => openSettingsPage()}
                         />
                         <ActionButton
                             icon={<TbExternalLink size={iconSize} />}
                             label={msg`Open CommaFeed`}
+                            mode={mode}
                             onClick={() => openAppInNewTab()}
                         />
                     </>

commafeed-client/src/pages/WelcomePage.tsx

@@ -42,7 +42,7 @@ export function WelcomePage() {
                         icon={<TbClock size={iconSize} />}
                         variant="outline"
                         onClick={async () => await login.execute({ name: "demo", password: "demo" })}
-                        showLabelOnMobile
+                        mode="desktop"
                     />
                 </Center>
             )}
@@ -100,7 +100,7 @@ function Buttons() {
                 icon={<TbKey size={iconSize} />}
                 variant="outline"
                 onClick={async () => await dispatch(redirectToLogin())}
-                showLabelOnMobile
+                mode="desktop"
             />
             {serverInfos?.allowRegistrations && (
                 <ActionButton
@@ -108,7 +108,7 @@ function Buttons() {
                     icon={<TbUserPlus size={iconSize} />}
                     variant="filled"
                     onClick={async () => await dispatch(redirectToRegistration())}
-                    showLabelOnMobile
+                    mode="desktop"
                 />
             )}
 
@@ -116,7 +116,7 @@ function Buttons() {
                 label={dark ? msg`Switch to light theme` : msg`Switch to dark theme`}
                 icon={colorScheme === "dark" ? <TbSun size={18} /> : <TbMoon size={iconSize} />}
                 onClick={() => toggleColorScheme()}
-                hideLabelOnDesktop
+                mode="mobile"
             />
 
             {isBrowserExtensionPopup && (
@@ -124,7 +124,7 @@ function Buttons() {
                     label={msg`Extension options`}
                     icon={<TbSettings size={iconSize} />}
                     onClick={() => openSettingsPage()}
-                    hideLabelOnDesktop
+                    mode="mobile"
                 />
             )}
         </Group>

commafeed-client/src/pages/app/Layout.tsx

@@ -227,7 +227,7 @@ export default function Layout(props: Readonly<LayoutProps>) {
                 )}
             </OnMobile>
             <OnDesktop>
-                <Group p="md">
+                <Group p="md" wrap="nowrap">
                     <Group justify="space-between" style={{ width: sidebarWidth - 16 }}>
                         <Box>
                             <LogoAndTitle />