login: smoother profile form aligning (fixes #9944) (#9945)

Co-authored-by: dogi <dogi@users.noreply.github.com>

Author: Mutugiii

package.json

@@ -1,7 +1,7 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.22.88",
+  "version": "0.22.89",
   "myplanet": {
     "latest": "v0.55.91",
     "min": "v0.53.91"

src/app/users/users-update/users-update.component.html

@@ -133,8 +133,8 @@
         </div>
       </form>
     </div>
-    <div *ngIf="!submissionMode">
-      <div style="text-align: center;">
+    <div *ngIf="!submissionMode" class="profile-image-column">
+      <div class="profile-image-content">
         <img *ngIf="showImagePreview" class="profile-image-update" [src]="previewSrc"><br>
         <div class="action-buttons">
           <button mat-raised-button color="secondary" (click)="fileInput.click()"><span i18n>Choose Image</span></button>

src/app/users/users-update/users-update.scss

@@ -1,5 +1,15 @@
 @use '../../variables' as v;
 
+@mixin form-grid($columns) {
+  display: grid;
+  grid-template-columns: repeat($columns, minmax(0, 1fr));
+  gap: 1rem;
+
+  mat-form-field {
+    width: 100%;
+  }
+}
+
 .view-container {
   display: flex;
   flex-wrap: wrap;
@@ -28,26 +38,17 @@
 
 .profile-names {
   grid-area: form-names;
-
-  mat-form-field {
-    margin-right: 1rem;
-  }
+  @include form-grid(3);
 }
 
 .profile-contacts {
   grid-area: form-contacts;
-
-  mat-form-field {
-    margin-right: 1rem;
-  }
+  @include form-grid(3);
 }
 
 .profile-dropdowns {
   grid-area: form-dropdowns;
-
-  mat-form-field {
-    margin-right: 1rem;
-  }
+  @include form-grid(2);
 }
 
 .radio-group {
@@ -61,6 +62,16 @@
   justify-content: center;
 }
 
+.profile-image-column {
+  flex: 1;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.profile-image-content {
+  text-align: center;
+}
+
 .profile-image-section {
   display: grid;
   grid-template-columns: 1fr 2fr;
@@ -82,6 +93,10 @@
 }
 
 @media (max-width: v.$screen-sm) {
+  .profile-names, .profile-contacts, .profile-dropdowns, .radio-group {
+    grid-template-columns: 1fr;
+  }
+
   .profile-image-section{
     display: flex;
     flex-direction: column;
@@ -91,3 +106,9 @@
     margin-top: 1rem;
   }
 }
+
+@media (min-width: calc(#{v.$screen-sm} + 1px)) and (max-width: v.$screen-md) {
+  .profile-names, .profile-contacts, .profile-dropdowns {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}