fix hour calculation and report form

src/components/Calendar/calendarComponent.scss

@@ -1,12 +1,8 @@
 .calendar-component {
   position: relative;
-  margin-top: 30px;
-  margin-bottom: 60px;
+  margin: 30px 0;
   background-color: #f9f9f9;
-  padding-left: 68px;
-  padding-right: 54px;
-  padding-top: 48px;
-  padding-bottom: 40px;
+  padding: 20px 30px;
   font-family: "LabGrotesque", sans-serif;
 
   &__header {
@@ -98,7 +94,7 @@
   }
 
   &__rectangle {
-    margin: 36px 0;
+    margin: 20px 0;
 
     img {
       width: 100%;
@@ -122,7 +118,7 @@
       }
     }
 
-    margin-bottom: 60px;
+    margin: 20px 0 20px;
   }
 
   &__form {
@@ -203,8 +199,7 @@
 }
 @media (max-width: 968px) {
   .calendar-component {
-    margin-bottom: 40px;
-    padding: 28px 10px 48px 10px;
+    padding: 28px 10px;
 
     &__header {
       &-box {
@@ -300,3 +295,15 @@
     height: 14px;
   }
 }
+
+@media (max-width: 575.98px) {
+  .selectDateRange {
+    font-size: 14px;
+    text-align: center;
+    column-gap: 8px;
+
+    .select {
+      padding: 4px;
+    }
+  }
+}

src/components/Calendar/calendarHelper.js

@@ -25,6 +25,7 @@ export function calendarHelper(value) {
 }
 
 export function getReports(value) {
+  // получение отчетов с видимой области
   const startDay = value
     .clone()
     .startOf("month")
@@ -56,12 +57,7 @@ export function getCreatedDate(day) {
   }
 }
 
-export function correctDay(day) {
-  if (day < 10) {
-    return `0${day}`;
-  }
-  return day;
-}
+export const correctDay = (day) => (day < 10 ? `0${day}` : day);
 
 export function currentMonth() {
   const currentMonth = moment().format("MMMM");