refactor: improve layout and styling

Author: younocode

apps/nextjs-app/src/features/app/blocks/space/BaseItem.tsx

@@ -85,27 +85,26 @@ export const BaseItem: FC<IBaseItemProps> = (props) => {
 
   return (
     <div
-      className={cn('group flex h-12 items-center  hover:bg-accent', className)}
+      className={cn('group flex h-12 items-center cursor-pointer hover:bg-accent', className)}
       onClick={() => onToggleExpand?.()}
     >
+      <Button
+        variant="ghost"
+        size="xs"
+        className="size-4 shrink-0 p-0"
+        onClick={(e) => {
+          stopPropagation(e);
+          onToggleExpand?.();
+        }}
+      >
+        {isExpanded ? (
+          <ChevronDown className="size-4 text-muted-foreground" />
+        ) : (
+          <ChevronRight className="size-4 text-muted-foreground" />
+        )}
+      </Button>
       {/* Name Column */}
       <div className="flex h-8 w-full flex-1 items-center gap-2 overflow-hidden px-2">
-        <Button
-          variant="ghost"
-          size="xs"
-          className="size-4 shrink-0 p-0"
-          onClick={(e) => {
-            stopPropagation(e);
-            onToggleExpand?.();
-          }}
-        >
-          {isExpanded ? (
-            <ChevronDown className="size-4 text-muted-foreground" />
-          ) : (
-            <ChevronRight className="size-4 text-muted-foreground" />
-          )}
-        </Button>
-
         <div
           className="flex items-center"
           onClick={(e) => hasUpdatePermission && stopPropagation(e)}
@@ -157,7 +156,7 @@ export const BaseItem: FC<IBaseItemProps> = (props) => {
       </div>
 
       {/* Creator Column */}
-      <div className="flex w-44 shrink-0 items-center gap-2 px-4">
+      <div className="flex w-40 shrink-0 items-center gap-2">
         <Avatar className="size-6 border">
           <AvatarImage src={base.createdUser?.avatar ?? ''} />
           <AvatarFallback className="text-xs">{base.createdUser?.name?.slice(0, 1)}</AvatarFallback>
@@ -166,13 +165,13 @@ export const BaseItem: FC<IBaseItemProps> = (props) => {
       </div>
 
       {/* Last Opened Column */}
-      <div className="w-44 shrink-0 px-4 text-xs">
+      <div className="w-60 shrink-0 text-xs">
         {lastVisitTime ? dayjs(lastVisitTime).fromNow() : '-'}
       </div>
 
       {/* Actions Column */}
       <div
-        className="w-37 flex shrink-0 items-center justify-end gap-2 px-4 opacity-0 group-hover:opacity-100"
+        className="absolute right-0 flex shrink-0 items-center justify-end gap-2 bg-accent px-4 opacity-0 group-hover:opacity-100"
         onClick={stopPropagation}
         onMouseDown={stopPropagation}
       >

apps/nextjs-app/src/features/app/blocks/space/BaseList.tsx

@@ -112,7 +112,6 @@ export const BaseList = (props: IBaseListProps) => {
       <BaseItem
         base={base}
         lastVisitTime={lastVisitBaseMap[base.id]?.lastVisitTime}
-        className="cursor-pointer"
         isExpanded={expandedBases.has(base.id)}
         onToggleExpand={() => toggleExpanded(base.id)}
         onEnterBase={() => intoBase(base.id)}
@@ -133,10 +132,9 @@ export const BaseList = (props: IBaseListProps) => {
     <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-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" />
+        <div className="flex-1 truncate pl-6 pr-2">{t('space:baseList.allBases')}</div>
+        <div className="w-40 shrink-0">{t('space:baseList.owner')}</div>
+        <div className="w-60 shrink-0">{t('space:baseList.lastOpened')}</div>
       </div>
 
       {/* Rows */}

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

@@ -121,8 +121,9 @@ export const SpaceInnerPage: React.FC = () => {
               isRenaming={renaming}
               onChange={(e) => setSpaceName(e.target.value)}
               onBlur={(e) => toggleUpdateSpace(e)}
+              className="h-8"
             >
-              <h1 className="line-clamp-1 text-2xl font-semibold ">{space.name}</h1>
+              <h1 className="truncate text-2xl font-semibold">{space.name}</h1>
             </SpaceRenaming>
             <StarButton className="opacity-100" id={space.id} type={PinType.Space} />
             {isCloud && (

apps/nextjs-app/src/features/app/blocks/space/space-side-bar/SpaceSwitcher.tsx

@@ -152,9 +152,13 @@ export const SpaceSwitcher = () => {
     <>
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
-          <Button variant="ghost" size="sm" className="h-10 w-full p-2 text-base">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-10 min-w-0 flex-1 justify-start p-2 text-base"
+          >
             <SpaceAvatar name={currentSpace?.name ?? ''} className="size-8" />
-            <p className="grow truncate text-left font-semibold ">{currentSpace?.name}</p>
+            <p className="truncate text-left font-semibold ">{currentSpace?.name}</p>
             <ChevronDown className="size-4 shrink-0" />
           </Button>
         </PopoverTrigger>

apps/nextjs-app/src/features/app/components/space/SpaceRenaming.tsx

@@ -1,7 +1,8 @@
-import { Input } from '@teable/ui-lib';
+import { cn, Input } from '@teable/ui-lib';
 import React, { useEffect, useRef } from 'react';
 
 interface SpaceRenamingProps {
+  className?: string;
   spaceName: string;
   isRenaming: boolean;
   children: React.ReactNode;
@@ -10,7 +11,7 @@ interface SpaceRenamingProps {
 }
 
 export const SpaceRenaming: React.FC<SpaceRenamingProps> = (props) => {
-  const { spaceName, isRenaming, children, onChange, onBlur } = props;
+  const { spaceName, isRenaming, children, onChange, onBlur, className } = props;
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -32,7 +33,7 @@ export const SpaceRenaming: React.FC<SpaceRenamingProps> = (props) => {
       {isRenaming ? (
         <Input
           ref={inputRef}
-          className="m-0.5 h-6 flex-1"
+          className={cn('m-0.5 h-6 flex-1', className)}
           value={spaceName}
           onKeyDown={handleKeyDown}
           onChange={onChange}