fix: polish mobile header

JimmyLv · Mar 5, 2023 · af1e57d · af1e57d · vercel · Mar 5, 2023
1 parent 7bb7ff0
commit af1e57d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -31,7 +31,7 @@ export default function Header() {
           </h2>
         </a>
       </div>
-      <div className="flex items-center space-x-5">
+      <div className="flex items-center space-x-2 sm:space-x-5">
         <div
           id="tooltip-light"
           role="tooltip"
@@ -48,16 +48,25 @@ export default function Header() {
           target="_blank"
           className="flex items-center space-x-2"
         >
-          🔥 <span className="hidden sm:block">给我提</span>反馈？
+          🔥 <span className="hidden sm:block">给我提</span>反馈
+          <span className="hidden sm:block">？</span>
         </a>
         <a
           href={BASE_DOMAIN + "/ios"}
           rel="noreferrer noopener"
           target="_blank"
           className="flex items-center space-x-2"
         >
-          <Image src="/shortcuts.png" alt="logo" width={33} height={33} />
-          <span className="relin-paragraph-target text-slate-500 hidden sm:block">(iOS版)</span>
+          <Image
+            src="/shortcuts.png"
+            alt="logo"
+            width={33}
+            height={33}
+            className="max-w-none"
+          />
+          <span className="relin-paragraph-target hidden text-slate-500 sm:block">
+            (iOS版)
+          </span>
         </a>
         <a
           href="https://github.com/JimmyLv/BiliGPT"

diff --git a/components/SignIn.tsx b/components/SignIn.tsx
@@ -24,7 +24,7 @@ export default function SignIn() {
           <UserDropdown />
         ) : (
           <motion.button
-            className="rounded-full border border-black bg-black p-1.5 px-4 text-sm text-white transition-all hover:bg-white hover:text-black"
+            className="rounded-full border border-black bg-black p-1.5 px-1 text-sm text-white transition-all hover:bg-white hover:text-black md:px-4"
             onClick={() => setShowSignInModal(true)}
             {...FADE_IN_ANIMATION_SETTINGS}
           >