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={ <> - {currentView?.name || defaultViewName}{' '} + + {currentView?.name || defaultViewName}{' '} + ยท {views.length} @@ -199,7 +217,7 @@ export const TableViewsDropdownButton = ({ onClick={() => handleViewSelect(view.id)} > - {view.name} + {view.name} ))}