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 1c817ab847..2b24f1d1dd 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
@@ -34,9 +34,17 @@ const StyledCalendar = styled(Calendar)`
left: 0;
height: ${heightCalendarMobile + "px"};
`}
+
+ .track-vertical {
+ height: 100% !important;
+ }
`;
-const CalendarComponent = ({ roomCreationDate, setCalendarDay }) => {
+const CalendarComponent = ({
+ roomCreationDate,
+ setCalendarDay,
+ setIsScrollLocked,
+}) => {
const [isOpen, setIsOpen] = useState(false);
const [selectedDate, setSelectedDate] = useState(null);
const [height, setHeight] = useState(heightCalendar);
@@ -56,6 +64,11 @@ const CalendarComponent = ({ roomCreationDate, setCalendarDay }) => {
};
}, []);
+ useEffect(() => {
+ if (isOpen && height < heightCalendar) setIsScrollLocked(true);
+ if (!isOpen) setIsScrollLocked(false);
+ }, [isOpen, height, heightCalendar]);
+
const onChangeHeight = () => {
const hightTop = calendarButtonRef?.current?.getBoundingClientRect().top;
const hightIconCalendar = 20;
diff --git a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Rooms/index.js b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Rooms/index.js
index 7efd128ba6..7160fb904a 100644
--- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Rooms/index.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Rooms/index.js
@@ -63,6 +63,7 @@ const RoomsItemHeader = ({
openHistory,
setShowSearchBlock,
roomType,
+ setIsScrollLocked,
}) => {
const itemTitleRef = useRef();
@@ -153,6 +154,7 @@ const RoomsItemHeader = ({
)}
`
${({ $isScrollLocked }) =>
$isScrollLocked &&
css`
- & .scroll-wrapper > .scroller {
+ &:first-child > .scroll-wrapper > .scroller {
overflow: hidden !important;
${(props) =>
props.theme.interfaceDirection === "rtl"
@@ -62,7 +62,7 @@ const StyledScrollbar = styled(Scrollbar)<{ $isScrollLocked?: boolean }>`
}
${isMobileOnly &&
css`
- & .scroll-wrapper > .scroller {
+ &:first-child > .scroll-wrapper > .scroller {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
diff --git a/packages/shared/components/section/sub-components/InfoPanelBody.tsx b/packages/shared/components/section/sub-components/InfoPanelBody.tsx
index c004207fba..98f5feb708 100644
--- a/packages/shared/components/section/sub-components/InfoPanelBody.tsx
+++ b/packages/shared/components/section/sub-components/InfoPanelBody.tsx
@@ -24,7 +24,7 @@
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
-import { useRef } from "react";
+import { useEffect, useRef, useState } from "react";
import Scrollbar from "react-scrollbars-custom";
import { SubInfoPanelBodyProps } from "../Section.types";
@@ -35,11 +35,23 @@ const SubInfoPanelBody = ({
isInfoPanelScrollLocked,
}: SubInfoPanelBodyProps) => {
const scrollRef = useRef(null);
- let scrollYPossible = false;
- if (scrollRef.current)
- // @ts-expect-error check later private
- scrollYPossible = scrollRef?.current?.scrollValues?.scrollYPossible;
- const scrollLocked = scrollYPossible && isInfoPanelScrollLocked;
+ const [scrollYPossible, setScrollYPossible] = useState(false);
+ const [scrollLocked, setScrollLocked] = useState(
+ scrollYPossible && isInfoPanelScrollLocked,
+ );
+
+ useEffect(() => {
+ const valueScrollYPossible =
+ scrollRef.current.scrollValues?.scrollYPossible;
+
+ if (scrollRef.current && valueScrollYPossible !== scrollYPossible)
+ setScrollYPossible(valueScrollYPossible);
+ }, [scrollRef?.current?.scrollValues.scrollYPossible, scrollYPossible]);
+
+ useEffect(() => {
+ if (scrollYPossible && isInfoPanelScrollLocked !== scrollLocked)
+ setScrollLocked(scrollYPossible && isInfoPanelScrollLocked);
+ }, [scrollYPossible, isInfoPanelScrollLocked, scrollLocked]);
return (