fix: sidebar not truncating file names

scanoss · Sep 17, 2024 · c4b8ac4 · c4b8ac4
1 parent 3d35894
commit c4b8ac4
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 40 deletions.
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
@@ -132,31 +132,44 @@ function SidebarItem({ result }: { result: Result }) {
   const isResultDismissed = result.bomState?.action === FilterAction.Remove;
   const isResultIncluded = result.bomState?.action === FilterAction.Include;
 
+  const parts = result.path.split('/');
+  const fileName = parts.pop() || '';
+  const directory = parts.join('/');
+
   return (
     <Tooltip>
       <TooltipTrigger asChild>
-        <Link
-          className={clsx(
-            'flex w-full items-center gap-2 px-4 py-1 text-sm text-muted-foreground transition-all',
-            isActive
-              ? 'border-r-2 border-primary-foreground bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground'
-              : 'hover:bg-primary/30'
-          )}
-          to={`files/${encodedFilePath}?matchType=${result.matchType}`}
-        >
-          <span className="relative">
-            {matchTypeIconMap[result.matchType]}
-            <span
-              className={clsx(
-                'absolute bottom-0 right-0 h-1 w-1 rounded-full',
-                isResultDismissed && 'bg-red-600',
-                isResultIncluded && 'bg-green-600'
-              )}
-            ></span>
-          </span>
-          <span className="max-w-[80%] overflow-hidden text-ellipsis">
-            {result.path}
-          </span>
+        <Link to={`files/${encodedFilePath}?matchType=${result.matchType}`}>
+          <div
+            className={clsx(
+              'flex max-w-full items-center space-x-2 overflow-hidden px-4 py-1 text-sm text-muted-foreground transition-all hover:bg-primary/30',
+              isActive
+                ? 'border-r-2 border-primary-foreground bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground'
+                : 'hover:bg-primary/30'
+            )}
+          >
+            <span className="relative">
+              {matchTypeIconMap[result.matchType]}
+              <span
+                className={clsx(
+                  'absolute bottom-0 right-0 h-1 w-1 rounded-full',
+                  isResultDismissed && 'bg-red-600',
+                  isResultIncluded && 'bg-green-600'
+                )}
+              ></span>
+            </span>
+            <div className="flex min-w-0 items-center">
+              {directory && <span className="truncate">{directory}</span>}
+              <span
+                className={clsx(
+                  'whitespace-nowrap',
+                  !isActive && 'text-foreground'
+                )}
+              >
+                {directory ? `/${fileName}` : fileName}
+              </span>
+            </div>
+          </div>
         </Link>
       </TooltipTrigger>
       <TooltipContent side="right" sideOffset={15}>
@@ -167,6 +180,6 @@ function SidebarItem({ result }: { result: Result }) {
 }
 
 export const matchTypeIconMap: Record<MatchType, ReactNode> = {
-  [MatchType.File]: <File className="h-3 w-3" />,
-  [MatchType.Snippet]: <Braces className="h-3 w-3" />,
+  [MatchType.File]: <File className="h-3 w-3 flex-shrink-0" />,
+  [MatchType.Snippet]: <Braces className="h-3 w-3 flex-shrink-0" />,
 };
diff --git a/frontend/src/components/ui/scroll-area.tsx b/frontend/src/components/ui/scroll-area.tsx
@@ -1,46 +1,46 @@
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
 >(({ className, children, ...props }, ref) => (
   <ScrollAreaPrimitive.Root
     ref={ref}
-    className={cn("relative overflow-hidden", className)}
+    className={cn('relative overflow-hidden', className)}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit] *:!block">
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
-))
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
 const ScrollBar = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
+>(({ className, orientation = 'vertical', ...props }, ref) => (
   <ScrollAreaPrimitive.ScrollAreaScrollbar
     ref={ref}
     orientation={orientation}
     className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' &&
+        'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' &&
+        'h-2.5 flex-col border-t border-t-transparent p-[1px]',
       className
     )}
     {...props}
   >
     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
-))
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
-export { ScrollArea, ScrollBar }
+export { ScrollArea, ScrollBar };