From 4aab07119be51ef22ea500e9dbf3fdd081931d7d Mon Sep 17 00:00:00 2001
From: Stephen Zhou <hi@hyoban.cc>
Date: Sat, 30 Dec 2023 11:19:09 +0800
Subject: [PATCH] fix: some dashboard style on mobile (#1210)

---
 .../settings/navigation/page-component.tsx    | 52 ++++++++--------
 .../social-platforms/page-component.tsx       | 61 ++++++++++---------
 src/components/dashboard/PagesManager.tsx     |  8 +--
 3 files changed, 63 insertions(+), 58 deletions(-)

diff --git a/src/app/[locale]/dashboard/[subdomain]/settings/navigation/page-component.tsx b/src/app/[locale]/dashboard/[subdomain]/settings/navigation/page-component.tsx
index b0ef478d..882f6344 100644
--- a/src/app/[locale]/dashboard/[subdomain]/settings/navigation/page-component.tsx
+++ b/src/app/[locale]/dashboard/[subdomain]/settings/navigation/page-component.tsx
@@ -38,31 +38,33 @@ const SortableNavigationItem = ({
           <i className="i-mingcute-dot-grid-fill" />
         </button>
       </div>
-      <Input
-        label={t("Label") || ""}
-        required
-        id={`${item.id}-label`}
-        value={item.label}
-        onChange={(e: ChangeEvent<HTMLInputElement>) =>
-          updateItem(item.id, { label: e.target.value })
-        }
-      />
-      <Input
-        label={t("URL") || ""}
-        required
-        id={`${item.id}-url`}
-        type="text"
-        value={item.url}
-        pattern="(https?://|/)(.*)?"
-        title="URL must start with / or http:// or https://"
-        onChange={(e: ChangeEvent<HTMLInputElement>) =>
-          updateItem(item.id, { url: e.target.value })
-        }
-      />
-      <div className="flex items-end relative top-[-5px]">
-        <Button onClick={() => removeItem(item.id)} variantColor="red">
-          {t("Remove")}
-        </Button>
+      <div className="flex flex-wrap gap-5">
+        <Input
+          label={t("Label") || ""}
+          required
+          id={`${item.id}-label`}
+          value={item.label}
+          onChange={(e: ChangeEvent<HTMLInputElement>) =>
+            updateItem(item.id, { label: e.target.value })
+          }
+        />
+        <Input
+          label={t("URL") || ""}
+          required
+          id={`${item.id}-url`}
+          type="text"
+          value={item.url}
+          pattern="(https?://|/)(.*)?"
+          title="URL must start with / or http:// or https://"
+          onChange={(e: ChangeEvent<HTMLInputElement>) =>
+            updateItem(item.id, { url: e.target.value })
+          }
+        />
+        <div className="flex items-end relative top-[-5px]">
+          <Button onClick={() => removeItem(item.id)} variantColor="red">
+            {t("Remove")}
+          </Button>
+        </div>
       </div>
     </div>
   )
diff --git a/src/app/[locale]/dashboard/[subdomain]/settings/social-platforms/page-component.tsx b/src/app/[locale]/dashboard/[subdomain]/settings/social-platforms/page-component.tsx
index c7269378..f6364ac0 100644
--- a/src/app/[locale]/dashboard/[subdomain]/settings/social-platforms/page-component.tsx
+++ b/src/app/[locale]/dashboard/[subdomain]/settings/social-platforms/page-component.tsx
@@ -47,34 +47,39 @@ const SortableNavigationItem = ({
           <i className="i-mingcute-dot-grid-fill" />
         </button>
       </div>
-      <Input
-        label={t("Platform") || ""}
-        required
-        id={`${item.id}-platform`}
-        value={item.platform}
-        onChange={(e: ChangeEvent<HTMLInputElement>) =>
-          updateItem(item.id, { platform: e.target.value })
-        }
-        options={Object.keys(PlatformsSyncMap)}
-      />
-      <Input
-        label={t("ID")}
-        required
-        id={`${item.id}-identity`}
-        type="text"
-        value={item.identity}
-        placeholder={PlatformsSyncMap[item.platform]?.identityFormatTemplate}
-        onChange={(e: ChangeEvent<HTMLInputElement>) =>
-          updateItem(item.id, { identity: e.target.value })
-        }
-      />
-      <div className="flex items-end pb-2">
-        <Platform platform={item.platform} username={item.identity}></Platform>
-      </div>
-      <div className="flex items-end relative top-[-5px]">
-        <Button onClick={() => removeItem(item.id)} variantColor="red">
-          {t("Remove")}
-        </Button>
+      <div className="flex flex-wrap gap-5">
+        <Input
+          label={t("Platform") || ""}
+          required
+          id={`${item.id}-platform`}
+          value={item.platform}
+          onChange={(e: ChangeEvent<HTMLInputElement>) =>
+            updateItem(item.id, { platform: e.target.value })
+          }
+          options={Object.keys(PlatformsSyncMap)}
+        />
+        <Input
+          label={t("ID")}
+          required
+          id={`${item.id}-identity`}
+          type="text"
+          value={item.identity}
+          placeholder={PlatformsSyncMap[item.platform]?.identityFormatTemplate}
+          onChange={(e: ChangeEvent<HTMLInputElement>) =>
+            updateItem(item.id, { identity: e.target.value })
+          }
+        />
+        <div className="flex items-end pb-2">
+          <Platform
+            platform={item.platform}
+            username={item.identity}
+          ></Platform>
+        </div>
+        <div className="flex items-end relative top-[-5px]">
+          <Button onClick={() => removeItem(item.id)} variantColor="red">
+            {t("Remove")}
+          </Button>
+        </div>
       </div>
     </div>
   )
diff --git a/src/components/dashboard/PagesManager.tsx b/src/components/dashboard/PagesManager.tsx
index fe259da9..0ae23518 100644
--- a/src/components/dashboard/PagesManager.tsx
+++ b/src/components/dashboard/PagesManager.tsx
@@ -340,13 +340,13 @@ export const PagesManager = ({ type }: { type: NoteType }) => {
                 <Link
                   key={page.transactionHash || page.draftKey}
                   href={getPageEditLink(page)}
-                  className="group relative hover:bg-zinc-100 rounded-lg py-4 px-3 transition-colors -mx-3 flex space-x-4"
+                  className="group relative hover:bg-zinc-100 rounded-lg py-4 px-3 transition-colors -mx-3 flex max-sm:flex-col gap-4"
                 >
                   <PostCover
                     uniqueKey={`${page.characterId}-${page.noteId}`}
                     images={page.metadata?.content.images}
                     title={page.metadata?.content?.title}
-                    className="rounded-lg w-48"
+                    className="rounded-lg sm:w-48"
                   />
                   <div className="min-w-0 flex-1 flex flex-col justify-between">
                     <div className="xlog-post-title font-bold text-base text-zinc-700">
@@ -432,7 +432,7 @@ export const PagesManager = ({ type }: { type: NoteType }) => {
                       )}
                     </div>
                   </div>
-                  <div className="shrink-0 flex self-center">
+                  <div className="shrink-0 flex gap-2 sm:self-center sm:ml-auto">
                     <button
                       className={cn(
                         `text-gray-400 relative z-10 w-8 h-8 rounded inline-flex group-hover:visible justify-center items-center`,
@@ -476,8 +476,6 @@ export const PagesManager = ({ type }: { type: NoteType }) => {
                         } text-lg`}
                       />
                     </button>
-                  </div>
-                  <div className="w-10 shrink-0 flex self-center ml-auto">
                     <Menu>
                       {({ open, close }) => (
                         <>