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}
))}