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

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