Shared:InfoPanelScroll:Fixed scroll blocking in the info panel for the general panel only. Removed scroll blocking in components inside the info panel.

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;

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 = ({
           <CalendarComponent
             setCalendarDay={setCalendarDay}
             roomCreationDate={selection.created}
+            setIsScrollLocked={setIsScrollLocked}
           />
         )}
         <RoomsContextBtn
@@ -181,6 +183,7 @@ export default inject(
       showSearchBlock,
       setShowSearchBlock,
       setCalendarDay,
+      setIsScrollLocked,
     } = infoPanelStore;
     const { externalLinks } = publicRoomStore;
 
@@ -211,6 +214,7 @@ export default inject(
       hasLinks: externalLinks.length,
       setCalendarDay,
       roomType,
+      setIsScrollLocked,
     };
   },
 )(

packages/shared/components/section/Section.styled.ts

@@ -49,7 +49,7 @@ const StyledScrollbar = styled(Scrollbar)<{ $isScrollLocked?: boolean }>`
   ${({ $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`

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<Scrollbar | null>(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 (
     <StyledScrollbar