feat: improve mobile board experience

apps/nextjs/src/components/layout/header/button.tsx

@@ -25,7 +25,7 @@ const headerButtonActionIconProps: ActionIconProps = {
   variant: "subtle",
   style: { border: "none" },
   color: "gray",
-  size: "lg",
+  size: 44,
 };
 
 export const HeaderButton = forwardRef<HTMLButtonElement, HeaderButtonProps>((props, ref) => {
@@ -34,15 +34,15 @@ export const HeaderButton = forwardRef<HTMLButtonElement, HeaderButtonProps>((pr
       <ActionIcon
         ref={ref as ForwardedRef<HTMLAnchorElement>}
         component={Link}
-        {...props}
         {...headerButtonActionIconProps}
+        {...props}
       >
         {props.children}
       </ActionIcon>
     );
   }
   return (
-    <ActionIcon ref={ref} {...props} {...headerButtonActionIconProps}>
+    <ActionIcon ref={ref} {...headerButtonActionIconProps} {...props}>
       {props.children}
     </ActionIcon>
   );

apps/nextjs/src/components/layout/header/responsive-user.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+
+import { useIsMobileBoard } from "../../board/use-mobile-board";
+
+export const ResponsiveUserButton = ({
+  hideOnMobileBoard,
+  children,
+}: PropsWithChildren<{ hideOnMobileBoard: boolean }>) => {
+  const isMobileBoard = useIsMobileBoard();
+  return hideOnMobileBoard && isMobileBoard ? null : children;
+};