[dyad] Fixed missing borders in headline tree - wrote 1 file(s)

src/components/headline-tree.tsx

@@ -2,7 +2,6 @@
 
 import { Badge } from "@/components/ui/badge";
 import type { HeadlineNode } from "@/app/actions";
-import { cn } from "@/lib/utils";
 
 interface HeadlineTreeProps {
   headlines: HeadlineNode[];
@@ -16,9 +15,9 @@ const HeadlineNodeDisplay = ({
   level: number;
 }) => {
   return (
-    <div className="flex flex-col border-t first:border-t-0">
+    <>
       <div
-        className="flex items-center gap-3 py-2.5 pr-4"
+        className="flex items-center gap-3 py-2.5 pr-4 border-t"
         style={{ paddingLeft: `${16 + level * 24}px` }}
       >
         <Badge
@@ -32,23 +31,21 @@ const HeadlineNodeDisplay = ({
           {node.length}
         </p>
       </div>
-      {node.children && node.children.length > 0 && (
-        <div>
-          {node.children.map((child, index) => (
+      {node.children?.map((child, index) => (
         <HeadlineNodeDisplay key={index} node={child} level={level + 1} />
       ))}
-        </div>
-      )}
-    </div>
+    </>
   );
 };
 
 export function HeadlineTree({ headlines }: HeadlineTreeProps) {
   return (
     <div className="w-full border rounded-lg overflow-hidden">
+      <div className="-mt-px">
         {headlines.map((headline, index) => (
           <HeadlineNodeDisplay key={index} node={headline} level={0} />
         ))}
       </div>
+    </div>
   );
 }