toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-11-24 13:51:56 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: add responsive styles for workspace card (#2390)

Browse Source
This commit is contained in:
JimmFly 2023-05-16 16:51:46 +08:00 committed by GitHub
parent aedf2d339e
commit 7e457f7b4c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/component/src/components/workspace-card/styles.ts
View File

@ -61,6 +61,9 @@ export const StyledCard = styled('div')<{
pointerEvents: 'auto',
},
},
'@media (max-width: 720px)': {
width: '100%',
},
};
});

9
packages/component/src/components/workspace-list/index.css.ts Normal file
View File

@ -0,0 +1,9 @@
import { style } from '@vanilla-extract/css';
export const workspaceItemStyle = style({
'@media': {
'screen and (max-width: 720px)': {
width: '100%',
},
},
});

2
packages/component/src/components/workspace-list/index.tsx
View File

@ -13,6 +13,7 @@ import { SortableContext, useSortable } from '@dnd-kit/sortable';
import type { FC } from 'react';
import { WorkspaceCard } from '../workspace-card';
import { workspaceItemStyle } from './index.css';
export type WorkspaceListProps = {
disabled?: boolean;
@ -42,6 +43,7 @@ const SortableWorkspaceItem: FC<
};
return (
<div
className={workspaceItemStyle}
data-testid="draggable-item"
style={style}
ref={setNodeRef}