fix adaptive Calendar

src/components/Calendar/calendarComponent.scss

@@ -117,11 +117,30 @@
   }
 
   &__body {
-    div {
+    &__week-days {
       display: grid;
 
       grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
 
+      @media (max-width: 680px) {
+        display: none;
+      }
+
+      p {
+        color: #9babc5;
+        font-size: 14px;
+        font-weight: 500;
+        text-align: center;
+      }
+
+      &-mobile {
+        display: none;
+        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+
+        @media (max-width: 680px) {
+          display: grid;
+        }
+
         p {
           color: #9babc5;
           font-size: 14px;
@@ -129,13 +148,14 @@
           text-align: center;
         }
       }
+    }
 
     margin: 20px 0 20px;
   }
 
   &__form {
-    display: flex;
+    display: grid;
-    flex-wrap: wrap;
+    grid-template-columns: repeat(7, 1fr);
     justify-content: space-between;
 
     button {
@@ -205,12 +225,10 @@
 
       @media (max-width: 550px) {
         width: 60px;
-        height: 35px;
       }
 
       @media (max-width: 450px) {
         width: 45px;
-        height: 35px;
       }
     }
   }
@@ -265,6 +283,11 @@
   }
   .form-box {
     background-color: #fafbfe;
+    padding: 0 10px;
+
+    @media (max-width: 450px) {
+      padding: 0;
+    }
 
     .form-hours {
       color: #6dd077;
@@ -284,6 +307,11 @@
         font-weight: 700;
         font-size: 14px;
         margin: auto;
+
+        @media (max-width: 680px) {
+          font-weight: 700;
+          font-size: 10px;
+        }
       }
     }
     .form-hours::before {

src/components/ProfileCalendar/ProfileCalendarComponent.jsx

@@ -223,7 +223,7 @@ export const ProfileCalendarComponent = React.memo(
         </div>
 
         <div className="calendar-component__body">
-          <div>
+          <div className="calendar-component__body__week-days">
             <p>Понедельник</p>
             <p>Вторник</p>
             <p>Среда</p>
@@ -232,6 +232,15 @@ export const ProfileCalendarComponent = React.memo(
             <p>Суббота</p>
             <p>Воскресенье</p>
           </div>
+          <div className="calendar-component__body__week-days-mobile">
+            <p>ПН</p>
+            <p>ВТ</p>
+            <p>СР</p>
+            <p>ЧТ</p>
+            <p>ПТ</p>
+            <p>СБ</p>
+            <p>ВС</p>
+          </div>
 
           <div className="calendar-component__form">
             {calendar.map((week) =>

src/components/ProfileCalendar/profileCalendar.scss

@@ -19,8 +19,13 @@
   .summary__info {
     padding-right: 25px;
 
-    @media (max-width: 500px) {
+    @media (max-width: 760px) {
-      padding-right: 5px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      row-gap: 25px;
+      padding: 25px;
     }
 
     .summary__person {