From 5174a802822d7558b3d0060d4e8006c7c6c50939 Mon Sep 17 00:00:00 2001
From: VladaGazizova <vlada.gazizova@onlyoffice.com>
Date: Fri, 26 Jan 2024 17:05:53 +0300
Subject: [PATCH] Web:Client:Added calendar styles for mobile phones in
 vertical position.

---
 .../Body/sub-components/ItemTitle/Calendar.js       | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js
index af946d4a9f..86d5171fdf 100644
--- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js
@@ -1,8 +1,9 @@
 import { useState, useEffect, useRef } from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import moment from "moment";
 import Calendar from "@docspace/components/calendar";
 import Portal from "@docspace/components/portal";
+import { isMobile } from "@docspace/components/utils/device";
 
 const StyledCalendarComponent = styled.div`
   position: relative;
@@ -24,6 +25,15 @@ const StyledCalendar = styled(Calendar)`
   position: absolute;
   top: 150px;
   right: 30px;
+
+  ${(props) =>
+    props.isMobile &&
+    css`
+      position: fixed;
+      bottom: 0;
+      top: auto;
+      right: auto;
+    `}
 `;
 
 const CalendarComponent = ({ roomCreationDate, setCalendarDay }) => {
@@ -77,6 +87,7 @@ const CalendarComponent = ({ roomCreationDate, setCalendarDay }) => {
               minDate={new Date(formattedRoomCreationDate)}
               maxDate={new Date()}
               forwardedRef={calendarRef}
+              isMobile={isMobile()}
             />
           }
         />