Skip to content

Commit 4a198a3

Browse files
younocodeyounocode
committed
refactor: enhance layout and styling
1 parent be532b3 commit 4a198a3

File tree

4 files changed

+49
-48
lines changed

4 files changed

+49
-48
lines changed

‎apps/nextjs-app/src/features/app/blocks/space/SpaceInnerPage.tsx‎

Lines changed: 36 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -113,9 +113,9 @@ export const SpaceInnerPage: React.FC = () => {
113113

114114
return (
115115
space && (
116-
<div ref={ref} className="flex h-full min-w-0 flex-1 gap-12 px-8 py-6 sm:min-w-[760px]">
117-
<div className="flex min-h-0 min-w-0 flex-1 flex-col ">
118-
<div className="flex shrink-0 items-center gap-2 pb-6 sm:mr-16">
116+
<div ref={ref} className="flex h-full min-w-0 flex-1 flex-col px-8 py-6 sm:min-w-[760px]">
117+
<div className="flex shrink-0 items-center justify-between gap-4 pb-4">
118+
<div className="flex min-w-0 items-center gap-2">
119119
<SpaceRenaming
120120
spaceName={spaceName!}
121121
isRenaming={renaming}
@@ -140,7 +140,7 @@ export const SpaceInnerPage: React.FC = () => {
140140
)}
141141
</div>
142142
<SpaceActionBar
143-
className="flex shrink-0 items-center justify-end gap-3 sm:hidden"
143+
className="flex shrink-0 items-center gap-3"
144144
space={space}
145145
buttonSize={'xs'}
146146
invQueryFilters={ReactQueryKeys.baseAll() as unknown as string[]}
@@ -150,49 +150,41 @@ export const SpaceInnerPage: React.FC = () => {
150150
onRename={() => setRenaming(true)}
151151
onSpaceSetting={onSpaceSetting}
152152
/>
153-
{basesInSpace?.length ? (
154-
<div className="flex min-h-0 flex-1 flex-col">
153+
</div>
154+
155+
<div className="flex min-h-0 flex-1 gap-8 pt-4">
156+
<div className="flex min-h-0 min-w-0 flex-1 flex-col">
157+
{basesInSpace?.length ? (
155158
<BaseList baseIds={basesInSpace.map((base) => base.id)} />
156-
</div>
157-
) : (
158-
<div className="flex min-h-0 flex-1 flex-col items-center justify-center gap-2">
159-
<Image
160-
src={
161-
isDark
162-
? '/images/layout/empty-base-dark.png'
163-
: '/images/layout/empty-base-light.png'
164-
}
165-
alt="No roles available"
166-
width={240}
167-
height={240}
168-
/>
169-
<div className="flex flex-col items-center justify-center gap-2">
170-
<p className="text-base font-semibold text-foreground">
171-
{t('space:emptySpaceTitle')}
172-
</p>
173-
<p className="text-sm text-muted-foreground">{t('space:spaceIsEmpty')}</p>
159+
) : (
160+
<div className="flex min-h-0 flex-1 flex-col items-center justify-center gap-2">
161+
<Image
162+
src={
163+
isDark
164+
? '/images/layout/empty-base-dark.png'
165+
: '/images/layout/empty-base-light.png'
166+
}
167+
alt="No roles available"
168+
width={240}
169+
height={240}
170+
/>
171+
<div className="flex flex-col items-center justify-center gap-2">
172+
<p className="text-base font-semibold text-foreground">
173+
{t('space:emptySpaceTitle')}
174+
</p>
175+
<p className="text-sm text-muted-foreground">{t('space:spaceIsEmpty')}</p>
176+
</div>
174177
</div>
175-
</div>
176-
)}
177-
</div>
178+
)}
179+
</div>
178180

179-
<div className="hidden w-72 min-w-60 flex-col sm:flex">
180-
<SpaceActionBar
181-
className="flex shrink-0 items-center justify-end gap-3 pb-8"
182-
space={space}
183-
buttonSize={'xs'}
184-
invQueryFilters={ReactQueryKeys.baseAll() as unknown as string[]}
185-
disallowSpaceInvitation={disallowSpaceInvitation}
186-
onDelete={() => deleteSpaceMutator(space.id)}
187-
onPermanentDelete={() => permanentDeleteSpaceMutator(space.id)}
188-
onRename={() => setRenaming(true)}
189-
onSpaceSetting={onSpaceSetting}
190-
/>
191-
<ScrollArea className="flex-1">
192-
<div className="text-left">
193-
<Collaborators spaceId={spaceId} space={space} />
194-
</div>
195-
</ScrollArea>
181+
<div className="hidden w-[200px] min-w-[200px] flex-col sm:flex">
182+
<ScrollArea className="flex-1 [&>[data-radix-scroll-area-viewport]>div]:!block [&>[data-radix-scroll-area-viewport]>div]:!min-w-0">
183+
<div className="text-left">
184+
<Collaborators spaceId={spaceId} space={space} />
185+
</div>
186+
</ScrollArea>
187+
</div>
196188
</div>
197189
</div>
198190
)

‎apps/nextjs-app/src/features/app/components/SideBarFooter.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,9 @@ export const SideBarFooter: React.FC = () => {
2222
className="w-full justify-start py-1.5 pl-2 text-sm font-normal"
2323
>
2424
<UserAvatar className="border" user={user} />
25-
{user.name}
25+
<p className="truncate" title={user.name}>
26+
{user.name}
27+
</p>
2628
</Button>
2729
</UserNav>
2830
<SettingDialog />

‎apps/nextjs-app/src/features/app/components/collaborator-manage/space-inner/Collaborators.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,10 @@ export const Collaborators: React.FC<SpaceInnerCollaboratorProps> = (props) => {
5454
<Building2 className="size-7" />
5555
)}
5656
<div className="min-w-0 flex-1">
57-
<p className="truncate text-sm font-medium">
57+
<p
58+
className="truncate text-sm font-medium"
59+
title={item.type === PrincipalType.User ? item.userName : item.departmentName}
60+
>
5861
{item.type === PrincipalType.User ? item.userName : item.departmentName}
5962
</p>
6063
{isBase && (

‎apps/nextjs-app/src/features/app/components/user/UserNav.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,12 @@ export const UserNav: React.FC<React.PropsWithChildren> = (props) => {
3939
<DropdownMenuContent className="w-56" align="end" forceMount>
4040
<DropdownMenuLabel className="font-normal">
4141
<div className="flex flex-col space-y-1">
42-
<p className="text-sm font-medium">{user.name}</p>
43-
<p className="text-xs text-muted-foreground">{user.email}</p>
42+
<p className="truncate text-sm font-medium" title={user.name}>
43+
{user.name}
44+
</p>
45+
<p className="truncate text-xs text-muted-foreground" title={user.email}>
46+
{user.email}
47+
</p>
4448
</div>
4549
</DropdownMenuLabel>
4650
<DropdownMenuSeparator />

0 commit comments

Comments
 (0)