From d866268a7aeb75c601aa131925c2e8caf41c06fa Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Wed, 6 Mar 2024 00:35:04 +0800
Subject: [PATCH] chore: tweak page styles

---
 frontend/web/src/components/AnalyticsView.tsx          | 4 ++--
 frontend/web/src/components/CreateCollectionDrawer.tsx | 4 ++--
 frontend/web/src/components/CreateShortcutDrawer.tsx   | 4 ++--
 frontend/web/src/components/Header.tsx                 | 2 +-
 frontend/web/src/pages/CollectionDashboard.tsx         | 2 +-
 frontend/web/src/pages/Home.tsx                        | 2 +-
 frontend/web/src/pages/MemoDashboard.tsx               | 2 +-
 frontend/web/src/pages/ShortcutDetail.tsx              | 2 +-
 8 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/frontend/web/src/components/AnalyticsView.tsx b/frontend/web/src/components/AnalyticsView.tsx
index 486e3a8..ff0f752 100644
--- a/frontend/web/src/components/AnalyticsView.tsx
+++ b/frontend/web/src/components/AnalyticsView.tsx
@@ -23,7 +23,7 @@ const AnalyticsView: React.FC<Props> = (props: Props) => {
   }, []);
 
   return (
-    <div className={classNames("w-full", className)}>
+    <div className={classNames("relative w-full", className)}>
       {analytics ? (
         <>
           <div className="w-full">
@@ -138,7 +138,7 @@ const AnalyticsView: React.FC<Props> = (props: Props) => {
           </div>
         </>
       ) : (
-        <div className="py-12 w-full flex flex-row justify-center items-center opacity-80">
+        <div className="absolute py-12 w-full flex flex-row justify-center items-center opacity-80">
           <Icon.Loader className="mr-2 w-5 h-auto animate-spin" />
           {t("common.loading")}
         </div>
diff --git a/frontend/web/src/components/CreateCollectionDrawer.tsx b/frontend/web/src/components/CreateCollectionDrawer.tsx
index fdcf33d..8737685 100644
--- a/frontend/web/src/components/CreateCollectionDrawer.tsx
+++ b/frontend/web/src/components/CreateCollectionDrawer.tsx
@@ -171,8 +171,8 @@ const CreateCollectionDrawer: React.FC<Props> = (props: Props) => {
     <Drawer anchor="right" open={true} onClose={onClose}>
       <DialogTitle>{isCreating ? "Create Collection" : "Edit Collection"}</DialogTitle>
       <ModalClose />
-      <DialogContent className="w-full max-w-full sm:max-w-[24rem]">
-        <div className="overflow-y-auto w-full mt-2 px-3 pb-4">
+      <DialogContent className="w-full max-w-full">
+        <div className="overflow-y-auto w-full mt-2 px-4 pb-4 sm:w-[24rem]">
           <div className="w-full flex flex-col justify-start items-start mb-3">
             <span className="mb-2">
               Name <span className="text-red-600">*</span>
diff --git a/frontend/web/src/components/CreateShortcutDrawer.tsx b/frontend/web/src/components/CreateShortcutDrawer.tsx
index 481e56f..5087be3 100644
--- a/frontend/web/src/components/CreateShortcutDrawer.tsx
+++ b/frontend/web/src/components/CreateShortcutDrawer.tsx
@@ -225,8 +225,8 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
     <Drawer anchor="right" open={true} onClose={onClose}>
       <DialogTitle>{isCreating ? "Create Shortcut" : "Edit Shortcut"}</DialogTitle>
       <ModalClose />
-      <DialogContent className="w-full max-w-full sm:max-w-[24rem]">
-        <div className="overflow-y-auto w-full mt-2 px-3 pb-4">
+      <DialogContent className="w-full max-w-full">
+        <div className="overflow-y-auto w-full mt-2 px-4 pb-4 sm:w-[24rem]">
           <div className="w-full flex flex-col justify-start items-start mb-3">
             <span className="mb-2">
               Name <span className="text-red-600">*</span>
diff --git a/frontend/web/src/components/Header.tsx b/frontend/web/src/components/Header.tsx
index 4d213ac..3fa48cc 100644
--- a/frontend/web/src/components/Header.tsx
+++ b/frontend/web/src/components/Header.tsx
@@ -30,7 +30,7 @@ const Header: React.FC = () => {
   return (
     <>
       <div className="w-full bg-gray-50 dark:bg-zinc-800 border-b border-b-gray-200 dark:border-b-zinc-800">
-        <div className="w-full max-w-8xl mx-auto px-3 md:px-12 py-3 flex flex-row justify-between items-center">
+        <div className="w-full max-w-8xl mx-auto px-4 sm:px-6 md:px-12 py-3 flex flex-row justify-between items-center">
           <div className="flex flex-row justify-start items-center shrink mr-2">
             <Link to="/" className="cursor-pointer flex flex-row justify-start items-center dark:text-gray-400" unstable_viewTransition>
               <img id="logo-img" src="/logo.png" className="w-7 h-auto mr-2 -mt-0.5 dark:opacity-80 rounded-full shadow" alt="" />
diff --git a/frontend/web/src/pages/CollectionDashboard.tsx b/frontend/web/src/pages/CollectionDashboard.tsx
index 8d970aa..ba62274 100644
--- a/frontend/web/src/pages/CollectionDashboard.tsx
+++ b/frontend/web/src/pages/CollectionDashboard.tsx
@@ -45,7 +45,7 @@ const CollectionDashboard: React.FC = () => {
 
   return (
     <>
-      <div className="mx-auto max-w-8xl w-full px-3 md:px-12 pt-4 pb-6 flex flex-col justify-start items-start">
+      <div className="mx-auto max-w-8xl w-full px-4 sm:px-6 md:px-12 pt-4 pb-6 flex flex-col justify-start items-start">
         <div className="w-full flex flex-row justify-between items-center mb-4">
           <div>
             <Input
diff --git a/frontend/web/src/pages/Home.tsx b/frontend/web/src/pages/Home.tsx
index 620dd14..9e2cd30 100644
--- a/frontend/web/src/pages/Home.tsx
+++ b/frontend/web/src/pages/Home.tsx
@@ -45,7 +45,7 @@ const Home: React.FC = () => {
 
   return (
     <>
-      <div className="mx-auto max-w-8xl w-full px-3 md:px-12 pt-4 pb-6 flex flex-col justify-start items-start">
+      <div className="mx-auto max-w-8xl w-full px-4 sm:px-6 md:px-12 pt-4 pb-6 flex flex-col justify-start items-start">
         <ShortcutsNavigator />
         <div className="w-full flex flex-row justify-between items-center mb-4">
           <div className="flex flex-row justify-start items-center">
diff --git a/frontend/web/src/pages/MemoDashboard.tsx b/frontend/web/src/pages/MemoDashboard.tsx
index e1a59e0..9492f57 100644
--- a/frontend/web/src/pages/MemoDashboard.tsx
+++ b/frontend/web/src/pages/MemoDashboard.tsx
@@ -43,7 +43,7 @@ const MemoDashboard: React.FC = () => {
 
   return (
     <>
-      <div className="mx-auto max-w-8xl w-full px-3 md:px-12 pt-4 pb-6 flex flex-col justify-start items-start">
+      <div className="mx-auto max-w-8xl w-full px-4 sm:px-6 md:px-12 pt-4 pb-6 flex flex-col justify-start items-start">
         <div className="w-full flex flex-row justify-between items-center mb-4">
           <div>
             <Input
diff --git a/frontend/web/src/pages/ShortcutDetail.tsx b/frontend/web/src/pages/ShortcutDetail.tsx
index 1e56373..d55a6f2 100644
--- a/frontend/web/src/pages/ShortcutDetail.tsx
+++ b/frontend/web/src/pages/ShortcutDetail.tsx
@@ -77,7 +77,7 @@ const ShortcutDetail = () => {
 
   return (
     <>
-      <div className="mx-auto max-w-8xl w-full px-3 md:px-12 pt-4 pb-6 flex flex-col justify-start items-start">
+      <div className="mx-auto max-w-8xl w-full px-4 sm:px-6 md:px-12 pt-4 pb-6 flex flex-col justify-start items-start">
         <div className="mt-4 sm:mt-8 w-12 h-12 flex justify-center items-center overflow-clip">
           {favicon ? (
             <img className="w-full h-auto rounded-lg" src={favicon} decoding="async" loading="lazy" />