diff --git a/src/pages/commonFeed/components/FeedLayout/components/FeedItemPreviewModal/FeedItemPreviewModal.tsx b/src/pages/commonFeed/components/FeedLayout/components/FeedItemPreviewModal/FeedItemPreviewModal.tsx index 1725a65876..28c7d2ccea 100644 --- a/src/pages/commonFeed/components/FeedLayout/components/FeedItemPreviewModal/FeedItemPreviewModal.tsx +++ b/src/pages/commonFeed/components/FeedLayout/components/FeedItemPreviewModal/FeedItemPreviewModal.tsx @@ -4,6 +4,7 @@ import { useChatContext } from "@/pages/common/components/ChatComponent"; import { Modal } from "@/shared/components"; import { useIsTabletView } from "@/shared/hooks/viewport"; import { ModalType, FeedLayoutItemChangeData } from "@/shared/interfaces"; +import { Breadcrumbs } from "@/shared/layouts/MultipleSpacesLayout/components/Header/components"; import { Circles, CommonFeed } from "@/shared/models"; import styles from "./FeedItemPreviewModal.module.scss"; @@ -72,6 +73,7 @@ const FeedItemPreviewModal: FC = (props) => { > {selectedFeedItem && ( <> + {title &&

{title}

} void; } +const MOBILE_MAXIMUM_ITEM_LENGTH = 13; + const BreadcrumbsItem: FC = (props) => { const { activeItem, @@ -30,6 +34,7 @@ const BreadcrumbsItem: FC = (props) => { const { getCommonPagePath } = useRoutesContext(); const containerRef = useRef(null); const contextMenuRef = useRef(null); + const isPhoneView = useIsPhoneView(); const handleButtonClick = () => { if (!withMenu) { @@ -46,7 +51,12 @@ const BreadcrumbsItem: FC = (props) => { return (
  • {withMenu && ( = (props) => { const dispatch = useDispatch(); const currentLayoutCommonId = useSelector(selectCommonLayoutCommonId); const goToCreateCommon = useGoToCreateCommon(); + const isPhoneView = useIsPhoneView(); const handleItemClick = (item: ProjectsStateItem) => { if ( @@ -34,11 +36,15 @@ const FeedItemBreadcrumbs: FC = (props) => { } }; + const breadcrumbsItems = isPhoneView + ? [breadcrumbs.items[0]] + : breadcrumbs.items; + return (
      {breadcrumbs.areItemsLoading && } {!breadcrumbs.areItemsLoading && - breadcrumbs.items.map((item, index) => ( + breadcrumbsItems.map((item, index) => ( {index > 0 && } = (props) => { /> ))} + {isPhoneView && breadcrumbsItems.length < breadcrumbs.items.length && ( + <> + + ... + + )} {breadcrumbs.activeItem && ( <> {(breadcrumbs.areItemsLoading || breadcrumbs.items.length > 0) && (