From 2eac5df05bc3bc34d1375d6a9ae7ff0dab7ba0a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20M?= <jeremy.magrin@gmail.com>
Date: Mon, 4 Sep 2023 17:47:32 +0200
Subject: [PATCH] fix: big view name is not handled (#1439)

* fix: big view name is not handled

* fix: smaller max size
---
 .../components/TableViewsDropdownButton.tsx   | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/front/src/modules/ui/table/options/components/TableViewsDropdownButton.tsx b/front/src/modules/ui/table/options/components/TableViewsDropdownButton.tsx
index 0853ed5128..b60d6b98a7 100644
--- a/front/src/modules/ui/table/options/components/TableViewsDropdownButton.tsx
+++ b/front/src/modules/ui/table/options/components/TableViewsDropdownButton.tsx
@@ -27,6 +27,7 @@ import {
   tableViewEditModeState,
   tableViewsState,
 } from '@/ui/table/states/tableViewsState';
+import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
@@ -56,6 +57,21 @@ const StyledViewIcon = styled(IconList)`
   margin-right: ${({ theme }) => theme.spacing(1)};
 `;
 
+const StyledViewName = styled.span`
+  display: inline-block;
+  max-width: 200px;
+  @media (max-width: 375px) {
+    max-width: 90px;
+  }
+  @media (min-width: 376px) and (max-width: ${MOBILE_VIEWPORT}px) {
+    max-width: 110px;
+  }
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  white-space: nowrap;
+`;
+
 type TableViewsDropdownButtonProps = {
   defaultViewName: string;
   HotkeyScope: TableViewsHotkeyScope;
@@ -164,7 +180,9 @@ export const TableViewsDropdownButton = ({
       label={
         <>
           <StyledViewIcon size={theme.icon.size.md} />
-          {currentView?.name || defaultViewName}{' '}
+          <StyledViewName>
+            {currentView?.name || defaultViewName}{' '}
+          </StyledViewName>
           <StyledDropdownLabelAdornments>
             · {views.length} <IconChevronDown size={theme.icon.size.sm} />
           </StyledDropdownLabelAdornments>
@@ -199,7 +217,7 @@ export const TableViewsDropdownButton = ({
             onClick={() => handleViewSelect(view.id)}
           >
             <IconList size={theme.icon.size.md} />
-            {view.name}
+            <StyledViewName>{view.name}</StyledViewName>
           </DropdownMenuItem>
         ))}
       </StyledDropdownMenuItemsContainer>