fix: mobile styles

src/components/common/FollowingButton.tsx

@@ -88,18 +88,18 @@ export const FollowingButton: React.FC<{
       {subscription.data ? (
         <>
           <span className="group-hover:hidden inline-flex items-center">
-            <span className="i-mingcute:user-follow-fill inline-block mr-2"></span>{" "}
-            {t("Following")}
+            <span className="i-mingcute:user-follow-fill inline-block sm:mr-2"></span>{" "}
+            <span className="hidden sm:inline">{t("Following")}</span>
           </span>
           <span className="hidden group-hover:inline-flex items-center">
-            <span className="i-mingcute:user-remove-fill inline-block mr-2"></span>{" "}
-            {t("Unfollow")}
+            <span className="i-mingcute:user-remove-fill inline-block sm:mr-2"></span>{" "}
+            <span className="hidden sm:inline">{t("Unfollow")}</span>
           </span>
         </>
       ) : (
         <span className="inline-flex items-center">
-          <span className="i-mingcute:user-add-fill inline-block mr-2"></span>{" "}
-          {t("Follow")}
+          <span className="i-mingcute:user-add-fill inline-block sm:mr-2"></span>{" "}
+          <span className="hidden sm:inline">{t("Follow")}</span>
         </span>
       )}
     </Button>

src/components/common/FollowingCount.tsx

@@ -40,7 +40,7 @@ export const FollowingCount: React.FC<{
       <Button
         variant="text"
         className={
-          "xlog-site-followings align-middle text-zinc-500 ml-3" +
+          "xlog-site-followings align-middle text-zinc-500 sm:ml-3" +
           (disableList ? "" : " cursor-pointer")
         }
         onClick={() => setIsToFollowListOpen(true)}

src/components/site/SiteHeader.tsx

@@ -46,7 +46,7 @@ const HeaderLink: React.FC<{ link: HeaderLinkType }> = ({ link }) => {
       )}
     >
       {link.icon && <span>{link.icon}</span>}
-      <span>{t(link.label)}</span>
+      <span className="whitespace-nowrap">{t(link.label)}</span>
     </UniLink>
   )
 }
@@ -283,7 +283,7 @@ export const SiteHeader: React.FC<{
                 ></div>
               )}
               <div className="flex space-x-0 sm:space-x-5 space-y-2 sm:space-y-0 flex-col sm:flex-row text-sm sm:text-base">
-                <span className="xlog-site-follow-count block sm:inline-block">
+                <span className="xlog-site-follow-count block sm:inline-block whitespace-nowrap">
                   <FollowingCount siteId={site?.username} />
                 </span>
                 <span className="xlog-site-patron">

src/components/ui/Menu.tsx

@@ -41,7 +41,12 @@ export const Menu: React.FC<{
 
   return (
     <>
-      <div ref={refs.setReference} {...getReferenceProps()}>
+      <div
+        ref={refs.setReference}
+        {...getReferenceProps({
+          className: "flex items-center",
+        })}
+      >
         {target}
       </div>
       {isMounted && (