make so cropping isn't behind header; delete profile image from storage when deleted

src/components/GiftedPhotoDialog.vue

@@ -4,7 +4,7 @@
       <div class="text-lg text-center font-light relative z-50">
         <div
           id="ViewHeading"
-          class="text-center font-bold absolute top-0 left-0 right-0 px-4 py-2 bg-black/50 text-white leading-none"
+          class="text-center font-bold absolute top-0 left-0 right-0 px-4 py-0.5 bg-black/50 text-white leading-none"
         >
           <span v-if="uploading"> Uploading... </span>
           <span v-else-if="blob"> Look Good? </span>
@@ -12,7 +12,7 @@
         </div>
 
         <div
-          class="text-lg text-center p-2 leading-none absolute right-0 top-0 text-white"
+          class="text-lg text-center px-2 py-0.5 leading-none absolute right-0 top-0 text-white"
           @click="close()"
         >
           <fa icon="xmark" class="w-[1em]"></fa>

src/views/AccountViewView.vue

@@ -614,7 +614,6 @@ import {
 } from "@/libs/endorserServer";
 import { Buffer } from "buffer/";
 import EntityIcon from "@/components/EntityIcon.vue";
-import {Contact} from "@/db/tables/contacts";
 
 interface IAccount {
   did: string;
@@ -626,7 +625,7 @@ interface IAccount {
 const inputFileNameRef = ref<Blob>();
 
 @Component({
-  components: {EntityIcon, GiftedPhotoDialog, QuickNav, TopMessage },
+  components: { EntityIcon, GiftedPhotoDialog, QuickNav, TopMessage },
 })
 export default class AccountViewView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
@@ -1384,14 +1383,18 @@ export default class AccountViewView extends Vue {
             group: "alert",
             type: "danger",
             title: "Error",
-            text: "There was a problem deleting the image.",
+            text: "There was a problem deleting the image. Contact support if you want it removed from the servers.",
           },
-          5000,
+          -1,
         );
         // keep the imageUrl in localStorage so the user can try again if they want
-        return;
       }
 
+      await db.open();
+      db.settings.update(MASTER_SETTINGS_KEY, {
+        profileImageUrl: undefined,
+      });
+
       this.profileImageUrl = undefined;
     } catch (error) {
       console.error("Error deleting image:", error);
@@ -1399,6 +1402,11 @@ export default class AccountViewView extends Vue {
       if ((error as any).response.status === 404) {
         console.log("The image was already deleted:", error);
 
+        await db.open();
+        db.settings.update(MASTER_SETTINGS_KEY, {
+          profileImageUrl: undefined,
+        });
+
         this.profileImageUrl = undefined;
 
         // it already doesn't exist so we won't say anything to the user

src/views/ContactQRScanShowView.vue

@@ -82,7 +82,12 @@ import { useClipboard } from "@vueuse/core";
 import { NotificationIface } from "@/constants/app";
 import { accountsDB, db } from "@/db/index";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import {deriveAddress, getContactPayloadFromJwtUrl, nextDerivationPath, SimpleSigner} from "@/libs/crypto";
+import {
+  deriveAddress,
+  getContactPayloadFromJwtUrl,
+  nextDerivationPath,
+  SimpleSigner,
+} from "@/libs/crypto";
 import QuickNav from "@/components/QuickNav.vue";
 import { Account } from "@/db/tables/accounts";
 import {