better mobile support

components/ImageEditor.vue

@@ -2,7 +2,7 @@
   <div class="flex flex-col md:flex-row items-center justify-center">
     <div class="flex flex-col justify-center items-center px-4">
       <p class="text-yellow-400 font-semibold text-xl mb-2">upload</p>
-      <div class="border border-dashed border-yellow-300 mx-8 p-5 text-white rounded-md w-96 backdrop-filter backdrop-blur-md">
+      <div class="border border-dashed border-yellow-300 p-5 md:mx-8 text-white rounded-md w-96 backdrop-filter backdrop-blur-md">
         <div class="container flex flex-col items-center">
           <img ref="uploadPreview" class="w-32 h-32 object-contain mb-4 rounded-full" :src="image" />
           <input ref="uploadFile" class="flex flex-row items-center justify-center" type="file" accept="image/*" @change="imageChange" />
@@ -11,7 +11,7 @@
     </div>
     <div class="flex flex-col justify-center items-center px-4 mt-8 md:mt-0">
       <p class="text-yellow-400 font-semibold text-xl mb-2">output</p>
-      <div class="border border-dashed border-yellow-300 mx-8 p-5 text-white rounded-md w-96 backdrop-filter backdrop-blur-md">
+      <div class="border border-dashed border-yellow-300 p-5 md:mx-8 text-white rounded-md w-96 backdrop-filter backdrop-blur-md">
         <div class="container flex flex-col items-center">
           <canvas ref="outputCanvas" class="mb-4 w-32 h-32" width="250" height="250"></canvas>
           <a

pages/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="relative mx-8">
+    <div class="mb-8">
       <div class="max-w-5xl mx-auto mt-14">
         <div class="text-white text-center my-8">
           <h1 class="font-bold text-4xl">Fake Twitter NFT Avatar</h1>