improvements to the PWA and mobile layout

components/LinkViews/LinkComponents/LinkActions.tsx

@@ -65,7 +65,7 @@ export default function LinkActions({
   return (
     <>
       <div
-        className={`dropdown dropdown-left absolute ${
+        className={`dropdown dropdown-end dropdown-bottom absolute ${
           position || "top-3 right-3"
         } z-20`}
       >

components/ModalContent/EditCollectionModal.tsx

@@ -110,7 +110,7 @@ export default function EditCollectionModal({
           className="btn btn-accent dark:border-violet-400 text-white w-fit ml-auto"
           onClick={submit}
         >
-          Save
+          Save Changes
         </button>
       </div>
     </Modal>

components/ModalContent/EditCollectionSharingModal.tsx

@@ -445,7 +445,7 @@ export default function EditCollectionSharingModal({
             className="btn btn-accent dark:border-violet-400 text-white w-fit ml-auto mt-3"
             onClick={submit}
           >
-            Save
+            Save Changes
           </button>
         )}
       </div>

components/ModalContent/EditLinkModal.tsx

@@ -157,7 +157,7 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
           className="btn btn-accent dark:border-violet-400 text-white"
           onClick={submit}
         >
-          Save
+          Save Changes
         </button>
       </div>
     </Modal>

components/ProfilePhoto.tsx

@@ -45,7 +45,7 @@ export default function ProfilePhoto({
     <div
       className={`avatar skeleton rounded-full drop-shadow-md ${
         className || ""
-      } ${large || "w-8 h-8"}`}
+      } ${large ? "w-28 h-28" : "w-8 h-8"}`}
     >
       <div className="rounded-full w-full h-full ring-2 ring-neutral-content">
         <Image

pages/settings/account.tsx

@@ -192,8 +192,8 @@ export default function Account() {
             ) : undefined}
           </div>
 
-          <div className="sm:row-span-2 sm:justify-self-center mx-auto my-3">
-            <p className="mb-2 text-center">Profile Photo</p>
+          <div className="sm:row-span-2 sm:justify-self-center my-3">
+            <p className="mb-2 sm:text-center">Profile Photo</p>
             <div className="w-28 h-28 flex items-center justify-center rounded-full relative">
               <ProfilePhoto
                 priority={true}
@@ -349,8 +349,8 @@ export default function Account() {
         <SubmitButton
           onClick={submit}
           loading={submitLoader}
-          label="Save"
-          className="mt-2 mx-auto lg:mx-0"
+          label="Save Changes"
+          className="mt-2 w-full sm:w-fit"
         />
 
         <div>
@@ -375,7 +375,7 @@ export default function Account() {
 
         <Link
           href="/settings/delete"
-          className="mx-auto lg:mx-0 text-white flex items-center gap-2 py-1 px-3 rounded-md text-lg tracking-wide select-none font-semibold duration-100 w-fit bg-red-500 hover:bg-red-400 cursor-pointer"
+          className="text-white w-full sm:w-fit flex items-center gap-2 py-2 px-4 rounded-md text-lg tracking-wide select-none font-semibold duration-100 bg-red-500 hover:bg-red-400 cursor-pointer"
         >
           <p className="text-center w-full">Delete Your Account</p>
         </Link>

pages/settings/appearance.tsx

@@ -97,7 +97,7 @@ export default function Appearance() {
         {/* <SubmitButton
           onClick={submit}
           loading={submitLoader}
-          label="Save"
+          label="Save Changes"
           className="mt-2 mx-auto lg:mx-0"
         /> */}
       </div>

pages/settings/archive.tsx

@@ -85,8 +85,8 @@ export default function Archive() {
       <SubmitButton
         onClick={submit}
         loading={submitLoader}
-        label="Save"
-        className="mt-2 mx-auto lg:mx-0"
+        label="Save Changes"
+        className="mt-2 w-full sm:w-fit"
       />
     </SettingsLayout>
   );

pages/settings/password.tsx

@@ -77,8 +77,8 @@ export default function Password() {
         <SubmitButton
           onClick={submit}
           loading={submitLoader}
-          label="Save"
-          className="mt-2 mx-auto lg:mx-0"
+          label="Save Changes"
+          className="mt-2 w-full sm:w-fit"
         />
       </div>
     </SettingsLayout>

public/site.webmanifest

@@ -22,5 +22,6 @@
   "theme_color":"#000000",
   "background_color":"#000000",
   "display":"standalone",
+  "orientation": "portrait",
   "start_url": "/dashboard"
 }