personal area partner with fixes report

src/pages/Summary/Summary.js

@@ -31,7 +31,7 @@ export const Summary = () => {
               <img src={arrow} alt='arrow'/>
               <p>Вернуться</p>
             </div>}
-            <div className='summary__info'>
+            <div className={openGit ? 'summary__info openGit' : 'summary__info'}>
               <div className='summary__person'>
                 <img src={urlForLocal(profileInfo.photo)} className='summary__avatar' alt='avatar'/>
                 <p className='summary__name'>{profileInfo.fio}, {profileInfo.specification} разработчик</p>
@@ -57,7 +57,15 @@ export const Summary = () => {
           </div>
           }
           {profileInfo.vc_text && !openGit &&
-          <div className='summary__experience' dangerouslySetInnerHTML={transformHtml(profileInfo.vc_text)}>
+          <div className='summary__experience'>
+            <div className='experience__block'>
+              <div className="summary__sections__head">
+                  <h3>Описание опыта работы</h3>
+                  <button>Редактировать раздел</button>
+              </div>
+              <div className="experience__content" dangerouslySetInnerHTML={{__html:profileInfo.vc_text}}>
+              </div>
+            </div>
           </div>
           }
           {openGit &&

src/pages/Summary/summary.scss

@@ -55,7 +55,7 @@
     justify-content: space-between;
 
     @media (max-width: 930px) {
-      padding: 0 40px;
+      padding: 0 25px;
     }
 
     @media (max-width: 690px) {
@@ -73,7 +73,7 @@
     align-items: center;
     column-gap: 45px;
 
-    @media (max-width: 690px) {
+    @media (max-width: 825px) {
       column-gap: 20px;
     }
 
@@ -95,6 +95,16 @@
     }
   }
 
+  .openGit {
+    .summary__name {
+      max-width: none;
+
+      @media (max-width: 490px) {
+        max-width: 280px;
+      }
+    }
+  }
+
   &__name {
     font-weight: 500;
     font-size: 16px;
@@ -102,12 +112,12 @@
     position: relative;
     white-space: nowrap;
 
-    @media (max-width: 915px) {
-      max-width: 220px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
+    //@media (max-width: 915px) {
+    //  max-width: 220px;
+    //  overflow: hidden;
+    //  white-space: nowrap;
+    //  text-overflow: ellipsis;
+    //}
 
     @media (max-width: 690px) {
       font-size: 14px;
@@ -115,8 +125,8 @@
       line-height: 15px;
     }
 
-    @media (max-width: 640px) {
-      max-width: 180px;
+    @media (max-width: 550px) {
+      max-width: 200px;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -124,7 +134,7 @@
     }
 
     @media (max-width: 450px) {
-      max-width: 120px;
+      max-width: 150px;
     }
 
     &:after {
@@ -268,6 +278,11 @@
           line-height: 32px;
           margin-bottom: 0;
         }
+
+        a:hover {
+          text-decoration: none;
+          color: #007bff;
+        }
       }
     }
   }