Implemented more button in TabList #10096

atharvParlikar · 2025-02-10T07:52:52Z

Implemented a more button in TabList, replacing the Scroll mechanism,

Added a new component TabMoreButton
Modified TabList to check if the number of tabs is within max limit
Modified Tab to fit in Dropdown while not looking aesthetically unappealing

greptile-apps

PR Summary

This PR implements a "More" dropdown button in the TabList component, replacing the scrolling mechanism for handling overflow tabs with a cleaner dropdown interface.

Added new TabMoreButton component in /packages/twenty-front/src/modules/ui/layout/tab/components/TabMoreButton.tsx with dropdown functionality and styled hover states
Implemented MAX_VISIBLE_TABS constant (4) in /packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx with logic to split tabs into visible and overflow sections
Added inDropdown prop to Tab component for consistent styling when rendered in dropdown menu
Enhanced hover states and border radius styling for dropdown menu items
Integrated hotkey scope management for dropdown accessibility

_{💡 (2/5) Greptile learns from your feedback when you react with 👍/👎!}

_{3 file(s) reviewed, 6 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

packages/twenty-front/src/modules/ui/layout/tab/components/TabMoreButton.tsx

packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx

packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx

ehconitin

Thanks for the PR @atharvParlikar :)
I have not tried your code locally as the ci is failing, mostly due to lint.
However I left some comments on the code to improve on it.
tip: run yarn nx run twenty-front:lint to check lint issues
and yarn nx run twenty-front:lint:fix to potentially fix them

packages/twenty-front/src/modules/ui/layout/tab/components/TabMoreButton.tsx

packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx

ehconitin · 2025-02-15T09:48:27Z

packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx


  const initialActiveTabId = activeTabId || visibleTabs[0]?.id || '';

  useEffect(() => {
    setActiveTabId(initialActiveTabId);
-  }, [initialActiveTabId, setActiveTabId]);
+  }, []);


During development there was an issue of infinite re-rendering, so I removed it for the time being but it seems I forgot to put these back after fixing it...

ehconitin · 2025-02-15T09:50:23Z

packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx

+            id="more-button"
+            title={`+${remainingTabs.length} More`}
+            Icon={IconChevronDown}
+            dropdownContent={


instead of passing dropdownContent as a react node why not just pass remaining tab and use them in Dropdown ?

I’m not sure about this. Since Tab is already rendered in the parent component of MoreButton, it has all the necessary state for rendering tabs. Some props (like activeTabId, behaveAsLinks, and handleTabClick) need to be passed down to MoreButton.

If we render the tabs inside MoreButton, it adds complexity, whereas passing dropdownContent as a ReactNode keeps it simpler. What do you think?

packages/twenty-front/src/modules/ui/layout/tab/components/TabMoreButton.tsx

packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx

greptile-apps

PR Summary

(updates since last review)

This PR continues the implementation of the "More" dropdown button in TabList with additional refinements and fixes.

Fixed StyledButtonContainer definition by moving it outside the render function in /packages/twenty-front/src/modules/ui/layout/tab/components/TabMoreDropdown.tsx
Added proper IconPosition support in Button component for right-aligned chevron in /packages/twenty-ui/src/input/button/components/Button.tsx
Implemented consistent hover states for tabs in dropdown using theme colors in /packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx

_{5 file(s) reviewed, 3 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2025-02-15T21:35:47Z

packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx

+        ))}
+        {remainingTabs.length > 0 && (
+          <MoreTabsDropdown
+            id="more-button"


style: Consider making 'more-button' id unique by appending tabListInstanceId to prevent potential conflicts with multiple tab lists

greptile-apps · 2025-02-15T21:35:49Z

packages/twenty-front/src/modules/ui/layout/tab/components/TabMoreDropdown.tsx

+  onDropdownClose,
+}: MoreTabsDropdownProps) => {
+  if (!dropdownContent) {
+    return <Button title={title} Icon={Icon} />;


style: missing variant and size props here to match the dropdown button styling

greptile-apps · 2025-02-15T21:35:49Z

packages/twenty-front/src/modules/ui/layout/tab/components/TabMoreDropdown.tsx

+          <Button
+            variant="tertiary"
+            size="small"
+            title={title}
+            Icon={Icon}
+            IconPosition="right"
+          />


syntax: IconPosition prop is not defined in Button component types

ehconitin

Left a comment, if you need any help with this PR do tag me :)

ehconitin · 2025-02-18T12:23:13Z

packages/twenty-front/src/modules/ui/layout/tab/constants/TabConstants.ts

I don't think MAX_VISIBLE_TABS matches the desired behavior.
The desired behavior suggests taking a different approach, as shown in the screenshot.

As per @lucasbordeau's comment, we should implement this approach.

While your current implementation might work, it also constrains tabs from being more dynamic. Would you be able to look into this alternative approach?

hmm, true.
I was only looking at that particular example, didn't think about if tabs can be used elsewhere.
I'll refactor it to match Lucas's suggestion.

I made the changes @ehconitin can review it?

…x-visible-tabs

greptile-apps

PR Summary

(updates since last review)

This PR continues the implementation of the "More" dropdown button in TabList with significant improvements to the dynamic tab calculation and styling.

Added dynamic tab width calculation in TabList.tsx using useEffect to determine maximum visible tabs based on container and tab widths
Improved dropdown styling in Tab.tsx with proper theme-based hover states and border radius for consistent appearance
Created new TabMoreDropdown.tsx component with proper dropdown placement and hotkey scope management
Removed tabList context from ScrollWrapperContexts.tsx as part of migration away from scroll behavior
Added IconPosition prop support in Button.tsx for right-aligned chevron icon

The implementation now properly handles overflow tabs with dynamic calculations rather than a fixed limit, providing a more flexible solution.

_{5 file(s) reviewed, 2 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2025-02-22T07:13:27Z

packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx

+      const firstTab = containerRef.current.querySelector(
+        '.tab-item',
+      ) as HTMLElement;


logic: firstTab could be null if no tabs are rendered yet, causing a runtime error

Suggested change

const firstTab = containerRef.current.querySelector(

'.tab-item',

) as HTMLElement;

const firstTab = containerRef.current.querySelector(

'.tab-item',

) as HTMLElement | null;

if (!firstTab) return;

greptile-apps · 2025-02-22T07:13:42Z

packages/twenty-front/src/modules/ui/layout/tab/components/TabMoreDropdown.tsx

+  const StyledButtonContainer = styled.div`
+    height: 100%;
+    display: flex;
+    align-items: center;
+  `;


style: StyledButtonContainer should be defined outside the component to prevent recreation on each render

Suggested change

const StyledButtonContainer = styled.div`

height: 100%;

display: flex;

align-items: center;

`;

const StyledButtonContainer = styled.div`

height: 100%;

display: flex;

align-items: center;

`;

export const MoreTabsDropdown = ({

lucasbordeau · 2025-02-25T17:19:05Z

packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx

+  );
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {


Could you find another way than using a useEffect ?

If the concern is repainting the UI, we could use useLayoutEffect instead of useEffect. Or are you suggesting avoiding effects altogether?

Implemented more button in TabList

e7f038f

greptile-apps bot reviewed Feb 10, 2025

View reviewed changes

atharvParlikar added 2 commits February 10, 2025 13:45

switched to button for better accessibility

ce22054

Merge branch 'main' into issue-fix-9904

ef8d0d4

ehconitin self-requested a review February 15, 2025 08:34

Merge remote-tracking branch 'upstream/main' into issue-fix-9904

7dc6617

ehconitin requested changes Feb 15, 2025

View reviewed changes

atharvParlikar marked this pull request as draft February 15, 2025 16:39

fixed linting issues, and implemented improvement suggestions

20a722a

atharvParlikar requested a review from ehconitin February 15, 2025 21:34

atharvParlikar marked this pull request as ready for review February 15, 2025 21:34

greptile-apps bot reviewed Feb 15, 2025

View reviewed changes

atharvParlikar added 2 commits February 16, 2025 03:06

imports issue fix

59c5f78

removed unnecessary scrollWrapper context

5df6e6e

ehconitin requested changes Feb 18, 2025

View reviewed changes

ehconitin added the -PR: awaiting author label Feb 19, 2025

atharvParlikar added 3 commits February 21, 2025 18:37

switched from max-visible-tabs constant to dynamically calculating ma…

45e2fb6

…x-visible-tabs

Merge branch 'main' into issue-fix-9904

ebfdb20

linting error fix

1e2132c

atharvParlikar marked this pull request as draft February 22, 2025 07:10

atharvParlikar requested a review from ehconitin February 22, 2025 07:11

atharvParlikar marked this pull request as ready for review February 22, 2025 07:12

greptile-apps bot reviewed Feb 22, 2025

View reviewed changes

ehconitin added -PR: awaiting review and removed -PR: awaiting author labels Feb 24, 2025

ehconitin requested a review from lucasbordeau February 25, 2025 14:32

lucasbordeau reviewed Feb 25, 2025

View reviewed changes

Merge branch 'main' into issue-fix-9904

3c16fdd

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implemented more button in TabList #10096

Implemented more button in TabList #10096

atharvParlikar commented Feb 10, 2025 •

edited

Loading

greptile-apps bot left a comment

ehconitin left a comment •

edited

Loading

ehconitin Feb 15, 2025

atharvParlikar Feb 15, 2025

ehconitin Feb 15, 2025

atharvParlikar Feb 15, 2025 •

edited

Loading

greptile-apps bot left a comment

greptile-apps bot Feb 15, 2025

greptile-apps bot Feb 15, 2025

greptile-apps bot Feb 15, 2025

ehconitin left a comment

ehconitin Feb 18, 2025

atharvParlikar Feb 20, 2025

atharvParlikar Feb 21, 2025

greptile-apps bot left a comment

greptile-apps bot Feb 22, 2025

greptile-apps bot Feb 22, 2025

lucasbordeau Feb 25, 2025

atharvParlikar Feb 25, 2025

ehconitin Feb 26, 2025

Implemented more button in TabList #10096

Are you sure you want to change the base?

Implemented more button in TabList #10096

Conversation

atharvParlikar commented Feb 10, 2025 • edited Loading

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

ehconitin left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

atharvParlikar Feb 15, 2025 • edited Loading

Choose a reason for hiding this comment

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

greptile-apps bot Feb 15, 2025

Choose a reason for hiding this comment

greptile-apps bot Feb 15, 2025

Choose a reason for hiding this comment

greptile-apps bot Feb 15, 2025

Choose a reason for hiding this comment

ehconitin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

greptile-apps bot Feb 22, 2025

Choose a reason for hiding this comment

greptile-apps bot Feb 22, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

atharvParlikar commented Feb 10, 2025 •

edited

Loading

ehconitin left a comment •

edited

Loading

atharvParlikar Feb 15, 2025 •

edited

Loading