Place user profile pick next to name in user dialog

dashboard/src/components/UserDialog.vue

@@ -237,14 +237,16 @@ defineExpose({
       <fieldset :disabled="busy">
         <input type="submit" style="display: none;" />
 
-        <div style="width: 128px;">
-          <ImagePicker :src="avatarUrl" fallback-src="/img/avatar-default-symbolic.svg" :size="512" :save-handler="onAvatarSet" display-width="128px"/>
-        </div>
+        <div style="display: flex; gap: 20px">
+          <div style="width: 80px;">
+            <ImagePicker :src="avatarUrl" fallback-src="/img/avatar-default-symbolic.svg" :size="512" :save-handler="onAvatarSet" display-width="80px"/>
+          </div>
 
-        <FormGroup>
-          <label for="displayNameInput">{{ $t('users.user.fullName') }}</label>
-          <TextInput id="displayNameInput" v-model="displayName" :disabled="(user && user.source) ? true : null" :placeholder="$t('users.user.displayNamePlaceholder')"/>
-        </FormGroup>
+          <FormGroup style="flex-grow: 1">
+            <label for="displayNameInput">{{ $t('users.user.fullName') }}</label>
+            <TextInput id="displayNameInput" v-model="displayName" :disabled="(user && user.source) ? true : null" :placeholder="$t('users.user.displayNamePlaceholder')"/>
+          </FormGroup>
+        </div>
 
         <FormGroup>
           <label for="emailInput" :has-error="formError.email">{{ $t('users.user.primaryEmail') }} <sup><a href="https://docs.cloudron.io/profile/#primary-email" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>