code review updates

daostack · Nov 30, 2023 · 678e0c3 · 678e0c3
1 parent 6c9520e
commit 678e0c3
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 8 deletions.
diff --git a/...red/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/Breadcrumbs.tsx b/...red/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/Breadcrumbs.tsx
@@ -1,6 +1,7 @@
 import React, { FC } from "react";
 import { useSelector } from "react-redux";
 import { InboxItemType } from "@/shared/constants";
+import { useIsTabletView } from "@/shared/hooks/viewport";
 import { selectMultipleSpacesLayoutBreadcrumbs } from "@/store/states";
 import { ChatChannelBreadcrumbs, FeedItemBreadcrumbs } from "./components";
 
@@ -11,15 +12,18 @@ interface BreadcrumbsProps {
 const Breadcrumbs: FC<BreadcrumbsProps> = (props) => {
   const { itemsWithMenus = true } = props;
   const breadcrumbs = useSelector(selectMultipleSpacesLayoutBreadcrumbs);
+  const isMobileView = useIsTabletView();
 
   if (breadcrumbs?.type === InboxItemType.ChatChannel) {
     return <ChatChannelBreadcrumbs breadcrumbs={breadcrumbs} />;
   }
   if (breadcrumbs?.type === InboxItemType.FeedItemFollow) {
+    const truncate = isMobileView && breadcrumbs.items.length >= 3;
     return (
       <FeedItemBreadcrumbs
         breadcrumbs={breadcrumbs}
         itemsWithMenus={itemsWithMenus}
+        truncate={truncate}
       />
     );
   }

diff --git a/...ents/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.module.scss b/...ents/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.module.scss
@@ -30,9 +30,9 @@
 }
 
 @include tablet {
-  li {
+  .li {
     &:first-child {
-      button {
+      .button {
         padding-left: 0;
       }
     }

diff --git a/...t/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.tsx b/...t/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.tsx
@@ -47,7 +47,7 @@ const BreadcrumbsItem: FC<BreadcrumbsItemProps> = (props) => {
   };
 
   return (
-    <li ref={containerRef}>
+    <li ref={containerRef} className={styles.li}>
       <button className={styles.button} onClick={handleButtonClick}>
         {truncate ? truncateBreadcrumbName(activeItem.name) : activeItem.name}
       </button>

diff --git a/...der/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.module.scss b/...der/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.module.scss
@@ -1,4 +1,5 @@
 @import "../../../../../../../../../constants";
+@import "../../../../../../../../../styles/sizes";
 
 .container {
   margin: 0;
@@ -10,3 +11,9 @@
   overflow-x: auto;
   overflow-y: hidden;
 }
+
+@include tablet {
+  .container {
+    overflow: hidden;
+  }
+}
diff --git a/...ents/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx b/...ents/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx
@@ -17,17 +17,16 @@ import styles from "./FeedItemBreadcrumbs.module.scss";
 interface FeedItemBreadcrumbsProps {
   breadcrumbs: MultipleSpacesLayoutFeedItemBreadcrumbs;
   itemsWithMenus: boolean;
+  truncate: boolean;
 }
 
 const FeedItemBreadcrumbs: FC<FeedItemBreadcrumbsProps> = (props) => {
-  const { breadcrumbs, itemsWithMenus } = props;
+  const { breadcrumbs, itemsWithMenus, truncate } = props;
   const dispatch = useDispatch();
   const currentLayoutCommonId = useSelector(selectCommonLayoutCommonId);
   const goToCreateCommon = useGoToCreateCommon();
   const isMobileView = useIsTabletView();
-  const shouldTruncateBreadcrumb =
-    isMobileView && breadcrumbs.items.length >= 3;
-  const breadcrumbsItems = shouldTruncateBreadcrumb
+  const breadcrumbsItems = truncate
     ? [breadcrumbs.items[0], breadcrumbs.items[breadcrumbs.items.length - 1]]
     : breadcrumbs.items;
 
@@ -70,7 +69,7 @@ const FeedItemBreadcrumbs: FC<FeedItemBreadcrumbsProps> = (props) => {
         breadcrumbsItems.map((item, index) => (
           <React.Fragment key={item.commonId}>
             {index > 0 && <Separator />}
-            {shouldTruncateBreadcrumb && index === 1 && (
+            {truncate && index === 1 && (
               <>
                 ...
                 <Separator />