fixes

src/pages/Summary/Summary.js

@@ -34,7 +34,7 @@ export const Summary = () => {
             <div className='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>
+                <p className='summary__name'>{profileInfo.fio}, {profileInfo.specification} разработчик</p>
               </div>
               {!openGit &&
               <button className='summary__git' onClick={() => setOpenGit(true)}>Git</button>

src/pages/Summary/summary.scss

@@ -62,6 +62,10 @@
       padding: 0 20px;
       min-height: 80px;
     }
+
+    @media (max-width: 500px) {
+      padding: 0 5px;
+    }
   }
 
   &__person {
@@ -72,6 +76,10 @@
     @media (max-width: 690px) {
       column-gap: 20px;
     }
+
+    @media (max-width: 550px) {
+      column-gap: 10px;
+    }
   }
 
   &__avatar {
@@ -92,6 +100,14 @@
     font-size: 16px;
     line-height: 32px;
     position: relative;
+    white-space: nowrap;
+
+    @media (max-width: 915px) {
+      max-width: 220px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
 
     @media (max-width: 690px) {
       font-size: 14px;
@@ -99,6 +115,18 @@
       line-height: 15px;
     }
 
+    @media (max-width: 640px) {
+      max-width: 180px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      margin: 0;
+    }
+
+    @media (max-width: 450px) {
+      max-width: 120px;
+    }
+
     &:after {
       content: '';
       position: absolute;