twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-27 11:03:40 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: big view name is not handled (#1439)

Browse Source 
* fix: big view name is not handled

* fix: smaller max size
This commit is contained in:
Jérémy M 2023-09-04 17:47:32 +02:00 committed by GitHub
parent 6cf46cfdf5
commit 2eac5df05b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
front/src/modules/ui/table/options/components/TableViewsDropdownButton.tsx
View File

@ -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>