From 0eae815e4d39de136edf5833de2c1f724c4482ee Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Wed, 18 Jan 2023 16:35:41 +0000
Subject: [PATCH] feat: simple optimization for mobile

---
 src/components/dashboard/PagesManager.tsx  | 25 +++++++++++-----------
 src/components/ui/Tabs.tsx                 |  4 ++--
 src/pages/dashboard/[subdomain]/editor.tsx |  2 +-
 3 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/components/dashboard/PagesManager.tsx b/src/components/dashboard/PagesManager.tsx
index 0b8282ba..08973147 100644
--- a/src/components/dashboard/PagesManager.tsx
+++ b/src/components/dashboard/PagesManager.tsx
@@ -326,9 +326,9 @@ export const PagesManager: React.FC<{
       <header className="mb-8">
         <div className="flex justify-between items-center mb-4">
           <h2 className="text-2xl font-bold">{title}</h2>
-          <div className="flex justify-center items-center">
+          <div className="flex justify-center items-center space-x-4">
             <Button
-              className={clsx(`space-x-2 inline-flex mr-4`)}
+              className={clsx(`space-x-2 inline-flex`)}
               onClick={() =>
                 router.push(
                   `/dashboard/${subdomain}/editor?type=${
@@ -351,18 +351,17 @@ export const PagesManager: React.FC<{
               </svg>
               <span>New {isPost ? "Post" : "Page"}</span>
             </Button>
-            <Tooltip
-              label="Import markdown file with front matter supported"
-              placement="bottom"
-            >
-              <Button
-                className={clsx(`space-x-2 inline-flex`)}
-                onClick={importFile}
+            <span className="hidden sm:inline-flex">
+              <Tooltip
+                label="Import markdown file with front matter supported"
+                placement="bottom"
               >
-                <span className="i-bxs:duplicate inline-block"></span>
-                <span>Import</span>
-              </Button>
-            </Tooltip>
+                <Button className={clsx(`space-x-2`)} onClick={importFile}>
+                  <span className="i-bxs:duplicate inline-block"></span>
+                  <span>Import</span>
+                </Button>
+              </Tooltip>
+            </span>
           </div>
         </div>
         <div className="text-sm text-zinc-500 leading-relaxed">
diff --git a/src/components/ui/Tabs.tsx b/src/components/ui/Tabs.tsx
index 95417575..67ed2548 100644
--- a/src/components/ui/Tabs.tsx
+++ b/src/components/ui/Tabs.tsx
@@ -12,7 +12,7 @@ export type TabItem = {
 
 export const Tabs: React.FC<{ items: TabItem[] }> = ({ items }) => {
   return (
-    <div className="flex border-b space-x-5 mb-8">
+    <div className="flex border-b space-x-5 mb-8 overflow-x-scroll">
       {items.map((item) => {
         if (item.hidden) return null
 
@@ -22,7 +22,7 @@ export const Tabs: React.FC<{ items: TabItem[] }> = ({ items }) => {
             onClick={item.onClick}
             key={item.text}
             className={clsx(
-              `border-b-2 inline-flex items-center h-10`,
+              `border-b-2 inline-flex items-center h-10 whitespace-nowrap`,
               item.active
                 ? `border-accent text-black font-medium`
                 : `text-gray-500  border-transparent hover:border-gray-300`,
diff --git a/src/pages/dashboard/[subdomain]/editor.tsx b/src/pages/dashboard/[subdomain]/editor.tsx
index 1cc7ba08..b4a12eef 100644
--- a/src/pages/dashboard/[subdomain]/editor.tsx
+++ b/src/pages/dashboard/[subdomain]/editor.tsx
@@ -431,7 +431,7 @@ export default function SubdomainEditor() {
                 />
               </div>
             </header>
-            <div className="h-screen pt-14 flex w-full">
+            <div className="h-screen pt-14 flex w-full min-w-[840px]">
               <div className="h-full overflow-auto w-full">
                 <div className="h-full mx-auto pt-5 flex flex-col">
                   <div className="px-5 h-12">