fix: update some style issue for space layout

hammond-lj · younocode · commit c38c8c2026d8 · 2025-12-11T18:45:34.000+08:00
diff --git a/apps/nextjs-app/src/features/app/blocks/base/base-side-bar/BaseNodeTree.tsx b/apps/nextjs-app/src/features/app/blocks/base/base-side-bar/BaseNodeTree.tsx
@@ -560,7 +560,7 @@ export const BaseNodeTree = (props: IBaseNodeTreeProps) => {
       );
     } else if (emptyText) {
       return (
-        <div className="flex w-full flex-col gap-2 px-2 ">
+        <div className="flex min-h-16 w-full flex-col items-center justify-center gap-2 px-2 ">
           <p className="text-sm text-muted-foreground">{emptyText}</p>
         </div>
       );
diff --git a/apps/nextjs-app/src/features/app/blocks/space/BaseItem.tsx b/apps/nextjs-app/src/features/app/blocks/space/BaseItem.tsx
@@ -89,7 +89,7 @@ export const BaseItem: FC<IBaseItemProps> = (props) => {
       onClick={() => onToggleExpand?.()}
     >
       {/* Name Column */}
-      <div className="flex h-8 w-full flex-1 items-center gap-2 overflow-hidden pr-1">
+      <div className="flex h-8 w-full flex-1 items-center gap-2 overflow-hidden px-2">
         <Button
           variant="ghost"
           size="xs"
@@ -158,7 +158,7 @@ export const BaseItem: FC<IBaseItemProps> = (props) => {
 
       {/* Creator Column */}
       <div className="flex w-44 shrink-0 items-center gap-2 px-4">
-        <Avatar className="size-6">
+        <Avatar className="size-6 border">
           <AvatarImage src={base.createdUser?.avatar ?? ''} />
           <AvatarFallback className="text-xs">{base.createdUser?.name?.slice(0, 1)}</AvatarFallback>
         </Avatar>
@@ -172,7 +172,7 @@ export const BaseItem: FC<IBaseItemProps> = (props) => {
 
       {/* Actions Column */}
       <div
-        className="flex w-[147px] shrink-0 items-center justify-end gap-2 px-4 opacity-0 group-hover:opacity-100"
+        className="w-37 flex shrink-0 items-center justify-end gap-2 px-4 opacity-0 group-hover:opacity-100"
         onClick={stopPropagation}
         onMouseDown={stopPropagation}
       >
diff --git a/apps/nextjs-app/src/features/app/blocks/space/BaseList.tsx b/apps/nextjs-app/src/features/app/blocks/space/BaseList.tsx
@@ -130,10 +130,10 @@ export const BaseList = (props: IBaseListProps) => {
   );
 
   return (
-    <ScrollArea className="h-full !border-none bg-background px-2 [&>[data-radix-scroll-area-viewport]>div]:!block [&>[data-radix-scroll-area-viewport]>div]:!min-h-0 [&>[data-radix-scroll-area-viewport]>div]:!min-w-0">
+    <ScrollArea className="h-full !border-none bg-background [&>[data-radix-scroll-area-viewport]>div]:!block [&>[data-radix-scroll-area-viewport]>div]:!min-h-0 [&>[data-radix-scroll-area-viewport]>div]:!min-w-0">
       {/* Header */}
-      <div className="sticky top-0 z-10 flex h-12 items-center border-b bg-background text-xs font-medium text-muted-foreground">
-        <div className="flex-1 px-4">{t('space:baseList.allBases')}</div>
+      <div className="sticky top-0 z-10 flex h-8 items-center border-b bg-background text-xs font-medium text-muted-foreground">
+        <div className="flex-1 pl-8 pr-4">{t('space:baseList.allBases')}</div>
         <div className="w-44 shrink-0 px-4">{t('space:baseList.owner')}</div>
         <div className="w-44 shrink-0 px-4">{t('space:baseList.lastOpened')}</div>
         <div className="w-[147px] shrink-0" />
diff --git a/apps/nextjs-app/src/features/app/blocks/space/SpaceInnerPage.tsx b/apps/nextjs-app/src/features/app/blocks/space/SpaceInnerPage.tsx
@@ -113,7 +113,7 @@ export const SpaceInnerPage: React.FC = () => {
 
   return (
     space && (
-      <div ref={ref} className="flex h-full min-w-0 flex-1 gap-10 px-12 py-8 sm:min-w-[760px]">
+      <div ref={ref} className="flex h-full min-w-0 flex-1 gap-12 px-8 py-6 sm:min-w-[760px]">
         <div className="flex min-h-0 min-w-0 flex-1 flex-col ">
           <div className="flex shrink-0 items-center gap-2 pb-6 sm:mr-16">
             <SpaceRenaming
@@ -122,7 +122,7 @@ export const SpaceInnerPage: React.FC = () => {
               onChange={(e) => setSpaceName(e.target.value)}
               onBlur={(e) => toggleUpdateSpace(e)}
             >
-              <h1 className="text-2xl font-semibold">{space.name}</h1>
+              <h1 className="line-clamp-1 text-2xl font-semibold ">{space.name}</h1>
             </SpaceRenaming>
             <StarButton className="opacity-100" id={space.id} type={PinType.Space} />
             {isCloud && (
diff --git a/apps/nextjs-app/src/features/app/blocks/space/space-side-bar/PinList.tsx b/apps/nextjs-app/src/features/app/blocks/space/space-side-bar/PinList.tsx
@@ -89,9 +89,9 @@ export const PinList = (props: { className?: string }) => {
       }}
     >
       <AccordionItem className="flex min-h-0 flex-1 flex-col border-0" value="pin-list">
-        <AccordionTrigger className="shrink-0 px-3 hover:no-underline">
-          <div className="flex items-center gap-1">
-            <Star className="size-3 fill-yellow-400 text-yellow-400" />
+        <AccordionTrigger className="h-10 shrink-0 px-3 hover:no-underline">
+          <div className="flex items-center gap-2">
+            <Star className="size-4 fill-yellow-400 text-yellow-400" />
             {t('space:pin.pin')}
           </div>
         </AccordionTrigger>
@@ -100,7 +100,7 @@ export const PinList = (props: { className?: string }) => {
           innerClassName="flex min-h-0 flex-1 flex-col"
         >
           <ScrollArea className="flex w-full !border-none px-2 [&>[data-radix-scroll-area-viewport]>div]:!block [&>[data-radix-scroll-area-viewport]>div]:!min-w-0">
-            <div className="flex min-h-0 flex-1 flex-col overflow-y-auto px-3">
+            <div className="flexmin-h-0 flex-1 flex-col overflow-y-auto">
               {pinListData?.length === 0 && (
                 <div className="text-center text-xs text-muted-foreground">
                   {t('space:pin.empty')}
diff --git a/apps/nextjs-app/src/features/app/blocks/space/space-side-bar/SpaceInnerSideBar.tsx b/apps/nextjs-app/src/features/app/blocks/space/space-side-bar/SpaceInnerSideBar.tsx
@@ -53,9 +53,9 @@ export const SpaceInnerSideBar = (props: { isAdmin?: boolean | null }) => {
 
   return (
     <>
-      <div className="flex flex-col justify-center gap-2 px-2">
+      <div className="flex flex-col justify-center px-2">
         {space && (
-          <div className=" px-4">
+          <div className="p-2">
             <CreateBaseModalTrigger spaceId={space.id}>
               <Button variant={'outline'} size={'sm'} className="w-full" disabled={!canCreateSpace}>
                 <Plus className="size-4 shrink-0" />
@@ -64,17 +64,17 @@ export const SpaceInnerSideBar = (props: { isAdmin?: boolean | null }) => {
             </CreateBaseModalTrigger>
           </div>
         )}
-        <ul>
+        <ul className="py-1">
           {pageRoutes.map(({ href, text, Icon, hidden }) => {
             if (hidden) return null;
             return (
-              <li key={href} className="my-[2px] px-2">
+              <li key={href}>
                 <Button
                   variant="ghost"
                   size={'xs'}
                   asChild
                   className={cn(
-                    'w-full justify-start text-sm ',
+                    'w-full justify-start h-8 text-sm ',
                     href === router.pathname && 'bg-accent'
                   )}
                 >
diff --git a/apps/nextjs-app/src/features/app/blocks/space/space-side-bar/SpaceSwitcher.tsx b/apps/nextjs-app/src/features/app/blocks/space/space-side-bar/SpaceSwitcher.tsx
@@ -152,17 +152,17 @@ export const SpaceSwitcher = () => {
     <>
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
-          <Button variant="ghost" size="sm" className="w-full p-2 text-base">
-            <SpaceAvatar name={currentSpace?.name ?? ''} className="size-6" />
+          <Button variant="ghost" size="sm" className="h-10 w-full p-2 text-base">
+            <SpaceAvatar name={currentSpace?.name ?? ''} className="size-8" />
             <p className="grow truncate text-left font-semibold ">{currentSpace?.name}</p>
             <ChevronDown className="size-4 shrink-0" />
           </Button>
         </PopoverTrigger>
 
         <PopoverContent className="min-w-[360px] p-0" align="start">
           <Command>
-            <div className="px-2  pt-4">
-              <p className="pb-2 text-sm ">
+            <div className="px-4 pb-2 pt-4">
+              <p className="pb-2 text-sm font-semibold ">
                 {t('space:allSpaces')} ({spaceList?.length || 0})
               </p>
               <CommandInput
@@ -175,7 +175,7 @@ export const SpaceSwitcher = () => {
             <CommandList className="max-h-[300px]">
               <CommandEmpty>{t('common:noResult')}</CommandEmpty>
 
-              <CommandGroup className="px-2">
+              <CommandGroup className="px-2 py-0">
                 {spaceList?.map((space) => {
                   const isSelected = space.id === currentSpaceId;
                   const subscription = subscriptionMap.get(space.id);
@@ -185,7 +185,7 @@ export const SpaceSwitcher = () => {
                       key={space.id}
                       value={space.name}
                       onSelect={() => handleSelectSpace(space)}
-                      className={cn('group flex items-center gap-2 mb-1 rounded-md h-9', {
+                      className={cn('group flex items-center gap-2 rounded-md h-10', {
                         'bg-accent': isSelected,
                       })}
                     >
@@ -209,7 +209,7 @@ export const SpaceSwitcher = () => {
               <Button
                 onClick={handleOpenCreateDialog}
                 variant="ghost"
-                className=" flex h-9 w-full items-center justify-start rounded-md p-2 text-blue-700 hover:bg-accent"
+                className="flex h-8 items-center justify-start rounded-md p-2 text-blue-600 hover:text-blue-600"
               >
                 <Plus className="size-4 shrink-0 " />
                 {t('space:action.createSpace')}
@@ -218,11 +218,11 @@ export const SpaceSwitcher = () => {
 
             <CommandSeparator />
 
-            <div className="flex flex-col py-1">
+            <div className="flex flex-col px-2 py-1">
               <Link
                 href="/space/shared-base"
                 onClick={() => setOpen(false)}
-                className="flex h-9 items-center gap-3 px-4 py-3 hover:bg-accent"
+                className="flex h-9 items-center gap-2 rounded-md p-2 hover:bg-accent"
               >
                 <Database className="size-4 shrink-0" />
                 <span className="text-sm ">{t('space:sharedBase.title')}</span>
@@ -231,7 +231,7 @@ export const SpaceSwitcher = () => {
                 <Link
                   href="/admin/setting"
                   onClick={() => setOpen(false)}
-                  className="flex h-9 items-center gap-3 px-4 py-3 hover:bg-accent"
+                  className="flex h-9 items-center gap-2 rounded-md p-2 hover:bg-accent"
                 >
                   <Admin className="size-4 shrink-0" />
                   <span className="text-sm ">{t('common:noun.adminPanel')}</span>
@@ -242,7 +242,7 @@ export const SpaceSwitcher = () => {
                 <Link
                   href={`/enterprise/${organization.id}`}
                   onClick={() => setOpen(false)}
-                  className="flex h-9 items-center gap-3 px-4 py-3 hover:bg-accent"
+                  className="flex h-9 items-center gap-2 rounded-md p-2 hover:bg-accent"
                 >
                   <Settings className="size-4 shrink-0" />
                   <span className="text-sm ">{t('common:noun.organizationPanel')}</span>
@@ -252,7 +252,7 @@ export const SpaceSwitcher = () => {
               <Link
                 href="/space/trash"
                 onClick={() => setOpen(false)}
-                className="flex h-9 items-center gap-3 px-4 py-3 hover:bg-accent"
+                className="flex h-9 items-center gap-2 rounded-md p-2 hover:bg-accent"
               >
                 <Trash2 className="size-4 shrink-0" />
                 <span className="text-sm ">{t('common:trash.spaceTrash')}</span>
diff --git a/apps/nextjs-app/src/features/app/blocks/space/space-side-bar/StarButton.tsx b/apps/nextjs-app/src/features/app/blocks/space/space-side-bar/StarButton.tsx
@@ -55,7 +55,7 @@ export const StarButton = (props: IStarButtonProps) => {
         >
           <Star
             className={cn(
-              'size-3 shrink-0 opacity-0 group-hover:opacity-100 transition-colors',
+              'size-4 shrink-0 text-muted-foreground opacity-0 group-hover:opacity-100 transition-colors',
               {
                 'opacity-100': isPin,
                 'fill-yellow-400 text-yellow-400': isPin,
diff --git a/apps/nextjs-app/src/features/app/components/sidebar/SidebarHeader.tsx b/apps/nextjs-app/src/features/app/components/sidebar/SidebarHeader.tsx
@@ -13,7 +13,7 @@ export const SidebarHeader = (prop: ISidebarHeaderProps) => {
   const { t } = useTranslation('common');
 
   return (
-    <div className="flex h-10 w-full items-center gap-1 p-2">
+    <div className="flex w-full items-center gap-2 py-2 pl-2 pr-3">
       {headerLeft}
       {onExpand && (
         <TooltipProvider>
diff --git a/apps/nextjs-app/src/features/app/components/space/SpaceActionBar.tsx b/apps/nextjs-app/src/features/app/components/space/SpaceActionBar.tsx
@@ -80,8 +80,8 @@ export const SpaceActionBar: React.FC<ActionBarProps> = (props) => {
         onSpaceSetting={onSpaceSetting}
         onImportBase={() => setImportBaseOpen(true)}
       >
-        <Button variant={'outline'} size={buttonSize}>
-          <MoreHorizontal />
+        <Button variant={'outline'} size={buttonSize} className="p-[5px]">
+          <MoreHorizontal className="size-4" />
         </Button>
       </SpaceActionTrigger>
 
diff --git a/apps/nextjs-app/src/features/app/layouts/SpaceInnerLayout.tsx b/apps/nextjs-app/src/features/app/layouts/SpaceInnerLayout.tsx
@@ -46,7 +46,7 @@ export const SpaceInnerLayout: React.FC<{
             <div id="portal" className="relative flex h-screen w-full items-start">
               <Sidebar headerLeft={<SpaceSwitcher />}>
                 <Fragment>
-                  <div className="flex flex-1 flex-col gap-2 divide-y divide-solid overflow-hidden">
+                  <div className="flex flex-1 flex-col gap-1 divide-y divide-solid overflow-hidden">
                     <SpaceInnerSideBar isAdmin={user?.isAdmin} />
                   </div>
                   <SideBarFooter />

Original file line number	Diff line number	Diff line change
`@@ -55,7 +55,7 @@ export const StarButton = (props: IStarButtonProps) => {`
`55`	`55`	`>`
`56`	`56`	`<Star`
`57`	`57`	`className={cn(`
`58`		`- 'size-3 shrink-0 opacity-0 group-hover:opacity-100 transition-colors',`
	`58`	`+ 'size-4 shrink-0 text-muted-foreground opacity-0 group-hover:opacity-100 transition-colors',`
`59`	`59`	`{`
`60`	`60`	`'opacity-100': isPin,`
`61`	`61`	`'fill-yellow-400 text-yellow-400': isPin,`