From e642ee6b5421e1530351c082d6e0419f96aa455d Mon Sep 17 00:00:00 2001
From: Alina Bogdanova <alinna-bog@yandex-team.ru>
Date: Fri, 8 Aug 2025 11:27:20 +0300
Subject: [PATCH] feat: adopt calendar to mobile version

---
 src/components/CalendarView/Calendar.scss    | 22 ++++++++++++++------
 src/components/CalendarView/CalendarView.tsx |  8 ++++---
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/components/CalendarView/Calendar.scss b/src/components/CalendarView/Calendar.scss
index 6d1a6045..87520146 100644
--- a/src/components/CalendarView/Calendar.scss
+++ b/src/components/CalendarView/Calendar.scss
@@ -4,17 +4,18 @@
 $block: '.#{variables.$ns}calendar';
 
 #{$block} {
-    --_--calendar-padding: var(--g-date-calendar-padding, 8px);
+    --_--calendar-padding-x: var(--g-date-calendar-padding-x, 16px);
+    --_--calendar-padding-y: var(--g-date-calendar-padding-y, 8px);
     --_--calendar-day-size: var(--g-date-calendar-day-size, 28px);
     --_--calendar-days-gap: var(--g-date-calendar-days-gap, 2px);
 
     --_--calendar-width: calc(
         7 * var(--_--calendar-day-size) + 6 * var(--_--calendar-days-gap) + 2 *
-            var(--_--calendar-padding)
+            var(--_--calendar-padding-x)
     );
     --_--calendar-grid-height: calc(
         7 * var(--_--calendar-day-size) + 5 * var(--_--calendar-days-gap) +
-            var(--_--calendar-padding)
+            var(--_--calendar-padding-y)
     );
 
     display: inline-block;
@@ -33,8 +34,9 @@ $block: '.#{variables.$ns}calendar';
 
     &__header {
         display: flex;
+        justify-content: space-between;
 
-        padding: var(--_--calendar-padding) var(--_--calendar-padding) 0;
+        padding: var(--_--calendar-padding-y) var(--_--calendar-padding-x) 0;
     }
 
     &__years-label {
@@ -42,7 +44,10 @@ $block: '.#{variables.$ns}calendar';
     }
 
     &__controls {
-        margin-inline-start: auto;
+        display: flex;
+        flex-shrink: 1;
+        justify-content: flex-end;
+        gap: var(--g-spacing-2);
     }
 
     &__control-icon {
@@ -71,7 +76,7 @@ $block: '.#{variables.$ns}calendar';
         box-sizing: border-box;
         width: 100%;
         height: 100%;
-        padding: 0 var(--_--calendar-padding) var(--_--calendar-padding);
+        padding: 0 var(--_--calendar-padding-x) var(--_--calendar-padding-y);
 
         @keyframes calendar-forward {
             from {
@@ -239,6 +244,7 @@ $block: '.#{variables.$ns}calendar';
 
         font-weight: var(--g-text-subheader-font-weight);
         cursor: pointer;
+        text-transform: capitalize;
 
         border-radius: 4px;
         outline: none;
@@ -306,4 +312,8 @@ $block: '.#{variables.$ns}calendar';
             background-color: var(--g-color-base-generic);
         }
     }
+
+    &__mode-label {
+        text-transform: capitalize;
+    }
 }
diff --git a/src/components/CalendarView/CalendarView.tsx b/src/components/CalendarView/CalendarView.tsx
index a41d6338..5aa02e98 100644
--- a/src/components/CalendarView/CalendarView.tsx
+++ b/src/components/CalendarView/CalendarView.tsx
@@ -45,6 +45,8 @@ export const CalendarView = React.forwardRef<CalendarInstance, CalendarViewProps
         state,
     );
 
+    const buttonView = props.size === 'xl' ? 'outlined' : 'flat';
+
     React.useImperativeHandle(ref, () => ({
         focus() {
             state.setFocused(true);
@@ -58,7 +60,7 @@ export const CalendarView = React.forwardRef<CalendarInstance, CalendarViewProps
             style={props.style}
         >
             <div className={b('header')}>
-                <Button {...modeButtonProps} view="flat" size={props.size}>
+                <Button {...modeButtonProps} view={buttonView} size={props.size}>
                     {state.availableModes.indexOf(state.mode) + 1 ===
                     state.availableModes.length ? (
                         <span key="label" className={b('mode-label', b(`years-label`))}>
@@ -76,12 +78,12 @@ export const CalendarView = React.forwardRef<CalendarInstance, CalendarViewProps
                     )}
                 </Button>
                 <div className={b('controls')}>
-                    <Button {...previousButtonProps} view="flat" size={props.size}>
+                    <Button {...previousButtonProps} view={buttonView} size={props.size}>
                         <Button.Icon>
                             <ChevronLeft className={b('control-icon')} />
                         </Button.Icon>
                     </Button>
-                    <Button {...nextButtonProps} view="flat" size={props.size}>
+                    <Button {...nextButtonProps} view={buttonView} size={props.size}>
                         <Button.Icon>
                             <ChevronRight className={b('control-icon')} />
                         </Button.Icon>