fix: responsive upload avatar (#10392)

* fix: responsive upload avatar

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* Update ImageUploader.tsx

Move title to the DialogContent title prop instead of the content.

---------

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: Alex van Andel <me@alexvanandel.com>

packages/ui/components/image-uploader/ImageUploader.tsx

@@ -173,14 +173,7 @@ export default function ImageUploader({
           {buttonMsg}
         </Button>
       </DialogTrigger>
-      <DialogContent>
-        <div className="mb-4 sm:flex sm:items-start">
-          <div className="mt-3 text-center sm:mt-0 sm:text-left">
-            <h3 className="font-cal text-emphasis text-lg leading-6" id="modal-title">
-              {t("upload_target", { target })}
-            </h3>
-          </div>
-        </div>
+      <DialogContent title={t("upload_target", { target })}>
         <div className="mb-4">
           <div className="cropper mt-6 flex flex-col items-center justify-center p-8">
             {!result && (
@@ -210,7 +203,7 @@ export default function ImageUploader({
             </label>
           </div>
         </div>
-        <DialogFooter>
+        <DialogFooter className="relative">
           <DialogClose color="primary" onClick={() => showCroppedImage(croppedAreaPixels)}>
             {t("save")}
           </DialogClose>