From bb420db1783c10f7ad8a5fc6da5a0569fda5f682 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Thu, 16 Mar 2023 01:25:26 +0000
Subject: [PATCH] fix: mobile styles

---
 src/components/common/FollowingButton.tsx | 12 ++++++------
 src/components/common/FollowingCount.tsx  |  2 +-
 src/components/site/SiteHeader.tsx        |  4 ++--
 src/components/ui/Menu.tsx                |  7 ++++++-
 4 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/common/FollowingButton.tsx b/src/components/common/FollowingButton.tsx
index 2cafee4f..22b6816f 100644
--- a/src/components/common/FollowingButton.tsx
+++ b/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>
diff --git a/src/components/common/FollowingCount.tsx b/src/components/common/FollowingCount.tsx
index a2e80f34..11ca49a8 100644
--- a/src/components/common/FollowingCount.tsx
+++ b/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)}
diff --git a/src/components/site/SiteHeader.tsx b/src/components/site/SiteHeader.tsx
index 1f48fe93..28f661c4 100644
--- a/src/components/site/SiteHeader.tsx
+++ b/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">
diff --git a/src/components/ui/Menu.tsx b/src/components/ui/Menu.tsx
index 5d76f316..e9ef1f70 100644
--- a/src/components/ui/Menu.tsx
+++ b/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 && (