personal area partner with fixes report

src/components/ProfileCalendar/ProfileCalendarComponent.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import ellipse from '../../images/ellipse.png'
+import arrow from '../../images/arrowCalendar.png'
 import rectangle from '../../images/rectangle__calendar.png'
 import calendarIcon from '../../images/calendar_icon.png'
 import moment from 'moment'
@@ -68,27 +68,27 @@ export const ProfileCalendarComponent = React.memo(({value, setValueHandler, rep
         <div className='calendar-component'>
             <div className='calendar-component__header'>
                 <h3>Мои отчеты</h3>
-                <div className='calendar-component__header-box'>
-                    <img src={ellipse} alt='' />
-                    <span onClick={() => {
-                        setValueHandler(prevMonth())
-                        dispatch(setRequestDate(getReports(prevMonth())))
-                    }}>
+                <div className='calendar-component__header-box' onClick={() => {
+                    setValueHandler(prevMonth())
+                    dispatch(setRequestDate(getReports(prevMonth())))
+                }}>
+                    <img src={arrow} alt='' />
+                    <span>
                         {prevMonth().format('MMMM')}
                     </span>
                 </div>
                 <div className='calendar-component__header-box'>
                     <span>{value.format('YYYY')}</span>
                 </div>
-                <div className='calendar-component__header-box'>
-                    <img src={ellipse} alt='' />
-                    <span onClick={() => {
-                        setValueHandler(nextMonth())
-                        dispatch(setRequestDate(getReports(nextMonth())))
+                <div className='calendar-component__header-box' onClick={() => {
+                    setValueHandler(nextMonth())
+                    dispatch(setRequestDate(getReports(nextMonth())))
 
-                    }}>
+                }}>
+                    <span>
                         {nextMonth().format('MMMM')}
                     </span>
+                    <img src={arrow} alt='' />
                 </div>
             </div>
 

src/components/ProfileCalendar/profileCalendar.scss

@@ -53,4 +53,22 @@
       transform: scale(1.02);
     }
   }
+
+  .summary__info {
+    @media (max-width: 800px) {
+      .summary__name {
+        margin: 0;
+        max-width: 220px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+
+    @media (max-width: 500px) {
+      .summary__name {
+        max-width: 150px;
+      }
+    }
+  }
 }