considerably improve styling of upload modal on mobile

src/components/user_card/user_card.scss

@@ -491,6 +491,8 @@
 .edit-image {
   .panel-body {
     text-align: center;
+    display: flex;
+    flex-direction: column;
   }
 
   .current-avatar {
@@ -499,9 +501,19 @@
 
   .image-container {
     display: flex;
-    margin: 0 1em 0.5em;
+    align-self: center;
+    margin: 0 0 1em;
+    max-height: 30em;
+    max-width: 100%;
+    flex: 1 0 20em;
+    aspect-ratio: 1;
     gap: 0.5em;
 
+    &.-banner {
+      aspect-ratio: 3;
+      max-width: 100%;
+    }
+
     .new-image {
       display: flex;
       flex-direction: column;
@@ -509,6 +521,7 @@
 
     .cropper {
       flex: 1;
+      overflow-x: auto;
     }
 
     > * {
@@ -546,4 +559,16 @@
       aspect-ratio: unset;
     }
   }
+
+  #modal.-mobile & {
+    #pick-image {
+      height: 3em;
+    }
+
+    .image-container {
+      &.-banner {
+        max-height: 10em;
+      }
+    }
+  }
 }

src/components/user_card/user_card.vue

@@ -455,8 +455,7 @@
             >
               <template #default="inputProps">
                 <input
-                  v-model="newFields[i].name"
-                  :placeholder="$t('settings.profile_fields.name')"
+                  v-model="newFields[i].name" :placeholder="$t('settings.profile_fields.name')"
                   v-bind="propsToNative(inputProps)"
                   class="input"
                 >
@@ -653,7 +652,13 @@
         <template #header>
           {{ editImage === 'avatar' ? $t('settings.change_avatar') : $t('settings.change_banner') }}
         </template>
-        <div class="image-container">
+        <p>
+          {{ editImage === 'avatar' ? $t('settings.avatar_size_instruction') : $t('settings.banner_size_instruction' ) }}
+        </p>
+        <div
+          class="image-container"
+          :class="{ '-banner': editImage === 'banner' }"
+        >
           <image-cropper
             ref="cropper"
             class="cropper"
@@ -669,9 +674,6 @@
         >
           {{ $t('settings.upload_picture') }}
         </button>
-        <p class="visibility-notice">
-          {{ editImage === 'avatar' ? $t('settings.avatar_size_instruction') : $t('settings.banner_size_instruction' ) }}
-        </p>
         <template #footer>
           <button
             class="button-default btn"