diff --git a/packages/pl-fe/src/columns/notifications.tsx b/packages/pl-fe/src/columns/notifications.tsx index f6a257195..f2bfbc87c 100644 --- a/packages/pl-fe/src/columns/notifications.tsx +++ b/packages/pl-fe/src/columns/notifications.tsx @@ -144,7 +144,11 @@ const getNotifications = createSelector([ }; }); -const NotificationsColumn = () => { +interface INotificationsColumn { + multiColumn?: boolean; +} + +const NotificationsColumn: React.FC = ({ multiColumn }) => { const dispatch = useAppDispatch(); const features = useFeatures(); const settings = useSettings(); @@ -259,6 +263,7 @@ const NotificationsColumn = () => { listClassName={clsx('divide-y divide-solid divide-gray-200 black:divide-gray-800 dark:divide-primary-800', { 'animate-pulse': displayedNotifications.length === 0, })} + useWindowScroll={!multiColumn} > {scrollableContent!} diff --git a/packages/pl-fe/src/components/sidebar-navigation-link.tsx b/packages/pl-fe/src/components/sidebar-navigation-link.tsx index 3de63df4a..634990210 100644 --- a/packages/pl-fe/src/components/sidebar-navigation-link.tsx +++ b/packages/pl-fe/src/components/sidebar-navigation-link.tsx @@ -62,6 +62,6 @@ const SidebarNavigationLink = React.memo(React.forwardRef((props: ISidebarNaviga

{text}

); -}), (prevProps, nextProps) => prevProps.count === nextProps.count); +}), (prevProps, nextProps) => prevProps.count === nextProps.count && prevProps.shrink === nextProps.shrink); export { SidebarNavigationLink as default }; diff --git a/packages/pl-fe/src/components/ui/popover.tsx b/packages/pl-fe/src/components/ui/popover.tsx index 7191d375f..36b45588e 100644 --- a/packages/pl-fe/src/components/ui/popover.tsx +++ b/packages/pl-fe/src/components/ui/popover.tsx @@ -4,6 +4,7 @@ import { autoUpdate, FloatingArrow, offset, + Placement, shift, useClick, useDismiss, @@ -29,6 +30,7 @@ interface IPopover { /** Add a class to the reference (trigger) element */ referenceElementClassName?: string; offsetOptions?: OffsetOptions; + placements?: Placement; } /** @@ -37,7 +39,7 @@ interface IPopover { * Similar to tooltip, but requires a click and is used for larger blocks * of information. */ -const Popover: React.FC = ({ children, content, referenceElementClassName, interaction = 'hover', isFlush = false, offsetOptions = 10 }) => { +const Popover: React.FC = ({ children, content, referenceElementClassName, interaction = 'hover', isFlush = false, offsetOptions = 10, placements = ['top', 'bottom'] }) => { const [isOpen, setIsOpen] = useState(false); const arrowRef = useRef(null); @@ -48,7 +50,7 @@ const Popover: React.FC = ({ children, content, referenceElementClassN placement: 'top', middleware: [ autoPlacement({ - allowedPlacements: ['top', 'bottom'], + allowedPlacements: placements, }), offset(offsetOptions), shift({ diff --git a/packages/pl-fe/src/features/chats/components/chat-page/chat-page.tsx b/packages/pl-fe/src/features/chats/components/chat-page/chat-page.tsx index 9f36595b0..5eed33f42 100644 --- a/packages/pl-fe/src/features/chats/components/chat-page/chat-page.tsx +++ b/packages/pl-fe/src/features/chats/components/chat-page/chat-page.tsx @@ -35,7 +35,7 @@ const ChatPage: React.FC = ({ chatId }) => { const fullHeight = document.body.offsetHeight; // On mobile, account for bottom navigation. - const offset = document.body.clientWidth < 976 ? -61 : 0; + const offset = document.body.clientWidth < 976 ? -53 : 0; setHeight(fullHeight - top + offset); }; diff --git a/packages/pl-fe/src/features/ui/components/panels/my-groups-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/my-groups-panel.tsx index 0415c5dc2..5c9ba487b 100644 --- a/packages/pl-fe/src/features/ui/components/panels/my-groups-panel.tsx +++ b/packages/pl-fe/src/features/ui/components/panels/my-groups-panel.tsx @@ -15,9 +15,7 @@ const MyGroupsPanel = () => { } return ( - } - > + }> {isFetching ? ( new Array(3).fill(0).map((_, idx) => ( diff --git a/packages/pl-fe/src/features/ui/index.tsx b/packages/pl-fe/src/features/ui/index.tsx index f988a87e0..5ebd6b911 100644 --- a/packages/pl-fe/src/features/ui/index.tsx +++ b/packages/pl-fe/src/features/ui/index.tsx @@ -489,8 +489,7 @@ const UI: React.FC = React.memo(({ children }) => { pointerEvents: isDropdownMenuOpen ? 'none' : undefined, }; - // to be used with the deck - const fullWidth = false; + const fullWidth = history.location.pathname.startsWith('/deck'); return ( diff --git a/packages/pl-fe/src/styles/new/layout.scss b/packages/pl-fe/src/styles/new/layout.scss index 9d5bc43f4..75f94ec27 100644 --- a/packages/pl-fe/src/styles/new/layout.scss +++ b/packages/pl-fe/src/styles/new/layout.scss @@ -305,7 +305,7 @@ body { @apply hidden lg:block; &--shrink { - @apply w-fit; + @apply w-10; } &:not(&--shrink) {