refactor: move stuff from profile to within the crop popup itself

components/Settings/UserSettings/Profile.vue

@@ -24,14 +24,12 @@
 
     </div>
   </div>
-  <div v-if="isCropPopupVisible" id="crop-popup-container">
-    <CropPopup
-      :imageSrc="cropImageSrc"
-      :onCrop="handleCrop"
-      :onClose="closeCropPopup"
-      id="crop-popup-preview"
-    />
-  </div>
+  <CropPopup
+    v-if="isCropPopupVisible"
+    :imageSrc="cropImageSrc"
+    :onCrop="handleCrop"
+    :onClose="closeCropPopup"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -168,21 +166,4 @@ function closeCropPopup() {
 #profile-popup {
   margin-left: 2dvw;
 }
-
-#crop-popup-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 10;
-  background: rgba(0,0,0,0.5);
-}
-
-#crop-popup-preview {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
 </style>