fix toast position in iphone

src/components/features/ToastSlot.svelte

@@ -42,18 +42,20 @@
 </script>
 
 <Stack
-  class="fixed lg:right-10 lg:bottom-10 lg:left-auto lg:top-auto lg:translate-x-0 top-4 left-4 transition-all ease-in-out duration-300"
+  class="fixed lg:right-10 lg:bottom-10 lg:left-auto lg:top-auto lg:translate-x-0 top-4 left-0 right-0 lg:px-0 px-4 lg:transform-none transition-all ease-in-out duration-300 gap-3 z-10"
 >
   {#each toastItem as item}
+  <div class="flex justify-center" on:click|stopPropagation|preventDefault>
     <div
       in:slide
       out:fade
-      class="bg-white drop-shadow-lg rounded-lg p-3 border border-gray-400 backdrop-blur-sm flex gap-2 text-neutral-800"
+      class="bg-white shadow-xl rounded-lg p-3 border border-gray-400 backdrop-blur-sm flex flex-row gap-2 text-neutral-800"
     >
       <svelte:component this={getIcon(item.type)} class={getIconColor(item.type)} />
       <div>
         {item.message}
       </div>
     </div>
+  </div>
   {/each}
 </Stack>

src/lib/index.ts

@@ -27,16 +27,23 @@ export async function domToBlob(dom: HTMLElement) {
   });
 }
 
-export async function copyImage(dom: HTMLElement) {
-  const blob = await domToBlob(dom);
-  await copyBlobToClipBoard(blob, "image/png");
+export async function copyImage(dom: HTMLElement, blob: Blob | null = null) {
+  let currentBlob = blob;
+  if (currentBlob === null) {
+    currentBlob = await domToBlob(dom);
+  }
+  await copyBlobToClipBoard(currentBlob, "image/png");
 }
 
 export function downloadFromBlob(blob: Blob) {
   const url = URL.createObjectURL(blob);
   const anchor = document.createElement("a");
   anchor.href = url;
-  anchor.download = Date.now() + ".png";
+  anchor.download = "Smiiily_" + window.crypto.randomUUID() + ".png";
   anchor.click();
   URL.revokeObjectURL(url);
 }
+
+export function isSafari() {
+  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+}

src/routes/+page.svelte

@@ -3,20 +3,28 @@
   import ControlPanel from "~/components/features/ControlPanel/index.svelte";
   import MainBlock from "~/components/features/MainBlock/index.svelte";
   import { dropShadowTypes, gradients, paddingTypes, roundnessTypes } from "~/constants";
-  import { copyImage, domToBlob, downloadFromBlob } from "~/lib";
+  import { copyImage, domToBlob, downloadFromBlob, isSafari } from "~/lib";
   import { toastStore } from "~/stores";
 
   let gradientIndex = 0;
   let selectImageUrl = "";
   let padding = paddingTypes.small;
   let roundness = roundnessTypes.small;
   let dropShadow = dropShadowTypes.small;
-  let cardRef: HTMLDivElement;
+  let mainBlockRef: HTMLDivElement;
+  let selectImageBlob: Blob | null = null;
 
   const changeGradientHandler = (index: number) => {
     gradientIndex = index;
   };
 
+  const updateSelectImageBlob = async () => {
+    if (!isSafari()) {
+      return;
+    }
+    selectImageBlob = selectImageUrl ? await domToBlob(mainBlockRef) : null;
+  };
+
   const imageSelectHandler = async (e: CustomEvent<{ file: File }>) => {
     const file = e.detail.file;
     if (!file) {
@@ -31,26 +39,29 @@
     }
   };
 
-  const changePaddingHandler = (paddingKey: keyof typeof paddingTypes) => {
+  const changePaddingHandler = async (paddingKey: keyof typeof paddingTypes) => {
     padding = paddingTypes[paddingKey];
+    await updateSelectImageBlob();
   };
 
-  const changeRoundnessHandler = (roundnessKey: keyof typeof roundnessTypes) => {
+  const changeRoundnessHandler = async (roundnessKey: keyof typeof roundnessTypes) => {
     roundness = roundnessTypes[roundnessKey];
+    await updateSelectImageBlob();
   };
 
-  const changeDropShadowHandler = (dropShadowKey: keyof typeof dropShadowTypes) => {
+  const changeDropShadowHandler = async (dropShadowKey: keyof typeof dropShadowTypes) => {
     dropShadow = dropShadowTypes[dropShadowKey];
+    await updateSelectImageBlob();
   };
 
   const copyHandler = async () => {
-    if (!cardRef || !selectImageUrl) {
+    if (!mainBlockRef || !selectImageUrl) {
       toastStore.show("Please select an image first!", "error", 5000);
       return;
     }
 
     try {
-      await copyImage(cardRef);
+      await copyImage(mainBlockRef, selectImageBlob);
       toastStore.show("Copied to clipboard!", "success", 5000);
     } catch (error) {
       toastStore.show("Failed to Copy Image!", "error", 5000);
@@ -59,10 +70,10 @@
   };
 
   const saveHandler = async () => {
-    if (!cardRef) {
+    if (!mainBlockRef) {
       return;
     }
-    const blob = await domToBlob(cardRef);
+    const blob = await domToBlob(mainBlockRef);
     downloadFromBlob(blob);
   };
 
@@ -98,7 +109,7 @@
       class="min-w-5xl flex lg:flex-row flex-col lg:space-x-10 space-x-0 space-y-10 lg:space-y-0"
     >
       <MainBlock
-        ref={(el) => (cardRef = el)}
+        ref={(el) => (mainBlockRef = el)}
         {selectImageUrl}
         {gradient}
         {padding}