From a76725edf5d79803b764582201a783716b3406b7 Mon Sep 17 00:00:00 2001
From: Gubar Nikita <dacentspartanec@gmail.com>
Date: Thu, 1 Aug 2024 12:23:17 +0300
Subject: [PATCH] fix adaptive Calendar

---
 .../Calendar/calendarComponent.scss           | 38 ++++++++++++++++---
 .../ProfileCalendarComponent.jsx              | 11 +++++-
 .../ProfileCalendar/profileCalendar.scss      |  9 ++++-
 3 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/src/components/Calendar/calendarComponent.scss b/src/components/Calendar/calendarComponent.scss
index 76a82abb..e66d47e4 100644
--- a/src/components/Calendar/calendarComponent.scss
+++ b/src/components/Calendar/calendarComponent.scss
@@ -117,25 +117,45 @@
   }
 
   &__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;
+          font-weight: 500;
+          text-align: center;
+        }
+      }
     }
 
     margin: 20px 0 20px;
   }
 
   &__form {
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    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 {
diff --git a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx
index 8fec8c6b..2452fdfa 100644
--- a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx
+++ b/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) =>
diff --git a/src/components/ProfileCalendar/profileCalendar.scss b/src/components/ProfileCalendar/profileCalendar.scss
index adcc8688..cf16b619 100644
--- a/src/components/ProfileCalendar/profileCalendar.scss
+++ b/src/components/ProfileCalendar/profileCalendar.scss
@@ -19,8 +19,13 @@
   .summary__info {
     padding-right: 25px;
 
-    @media (max-width: 500px) {
-      padding-right: 5px;
+    @media (max-width: 760px) {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      row-gap: 25px;
+      padding: 25px;
     }
 
     .summary__person {