feat: simple optimization for mobile

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">

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`,

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">