move avatar and cover image labels above controls in profile edit layout

Author: Awakich

projects/social_platform/src/app/office/profile/edit/edit.component.html

@@ -82,10 +82,17 @@ <h1 class="profile__title">редактирование профиля</h1>
     <div class="profile__wrapper">
       @if(editingStep === 'main'){
       <div class="profile__wrapper--main">
+        <div class="profile__main-text--grid">
+          <label for="avatar" class="field-label" style="text-align: center">фото</label>
+
+          <label class="field-label text-body-12" for="coverImageAddress" style="text-align: center"
+            >обложка для профиля</label
+          >
+        </div>
+
         <div class="profile__row">
           @if (profileForm.get("avatar"); as avatar) {
           <div>
-            <label for="avatar" class="field-label" style="text-align: center">фото</label>
             <fieldset class="profile__avatar">
               <app-avatar-control
                 id="avatar"
@@ -103,12 +110,6 @@ <h1 class="profile__title">редактирование профиля</h1>
           </div>
           } @if (profileForm.get("coverImageAddress"); as coverImageAddress) {
           <fieldset class="profile__file">
-            <label
-              class="field-label text-body-12"
-              for="coverImageAddress"
-              style="text-align: center"
-              >обложка для профиля</label
-            >
             <app-upload-file
               formControlName="coverImageAddress"
               accept=".jpg,.png,.jpeg"

projects/social_platform/src/app/office/profile/edit/edit.component.scss

@@ -193,6 +193,12 @@
   }
 }
 
+.profile__main-text--grid {
+  display: grid;
+  grid-template-columns: 0.1fr 2fr 1fr 1fr;
+  grid-gap: 20px;
+}
+
 .profile__main--grid {
   display: grid;
   grid-template-columns: 3fr 3fr 4fr;