From 2b1b476d62c6e1997ebc3755a1fc1bab991b82e0 Mon Sep 17 00:00:00 2001
From: Egbert Bouman <ebouman@gmail.com>
Date: Tue, 5 Nov 2024 20:01:02 +0100
Subject: [PATCH 1/4] Fix DownloadDetails scroll issue

---
 .../ui/src/pages/Downloads/Details.tsx        | 59 ++++++++++++-------
 1 file changed, 39 insertions(+), 20 deletions(-)

diff --git a/src/tribler/ui/src/pages/Downloads/Details.tsx b/src/tribler/ui/src/pages/Downloads/Details.tsx
index 7f4c156262..e30b42c083 100644
--- a/src/tribler/ui/src/pages/Downloads/Details.tsx
+++ b/src/tribler/ui/src/pages/Downloads/Details.tsx
@@ -11,12 +11,14 @@ import Trackers from "./Trackers";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Download } from "@/models/download.model";
 import Pieces from "./Pieces";
-import { useEffect, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 
 export default function DownloadDetails({ selectedDownloads }: { selectedDownloads: Download[] }) {
     const [download, setDownload] = useState<Download | undefined>();
+    const tabsRef = useRef<HTMLTableElement>(null);
+    const [contentStyle, setContentStyle] = useState<{ height?: string }>({});
 
     useEffect(() => {
         setDownload((selectedDownloads.length == 1) ? selectedDownloads[0] : undefined);
@@ -24,20 +26,31 @@ export default function DownloadDetails({ selectedDownloads }: { selectedDownloa
 
     const { t } = useTranslation();
 
+
+    useLayoutEffect(() => {
+        if (tabsRef.current && contentStyle?.height !== (tabsRef.current.offsetHeight - 40 + "px")) {
+            setContentStyle({
+                // The 40px (CSS class h-10) is to compensate for the height of the TabsList
+                height: tabsRef.current.offsetHeight - 40 + "px",
+            })
+        }
+    });
+
     if (!download)
         return null;
 
     return (
-        <ScrollArea className="w-full">
-            <Tabs defaultValue="details" className="w-full flex flex-col flex-wrap">
-                <TabsList className="flex-1 flex-cols-4">
-                    <TabsTrigger value="details">{t('Details')}</TabsTrigger>
-                    <TabsTrigger value="files">{t('Files')}</TabsTrigger>
-                    <TabsTrigger value="trackers">{t('Trackers')}</TabsTrigger>
-                    <TabsTrigger value="peers">{t('Peers')}</TabsTrigger>
-                </TabsList>
-                <TabsContent value="details" >
-                    <div className="flex flex-col h-full p-4 text-sm">
+        <Tabs ref={tabsRef} defaultValue="details" className="w-full" >
+            <TabsList className="flex flex-1 flex-cols-4">
+                <TabsTrigger value="details">{t('Details')}</TabsTrigger>
+                <TabsTrigger value="files">{t('Files')}</TabsTrigger>
+                <TabsTrigger value="trackers">{t('Trackers')}</TabsTrigger>
+                <TabsTrigger value="peers">{t('Peers')}</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="details" style={contentStyle}>
+                <ScrollArea className="h-full">
+                    <div className="flex flex-col p-4 text-sm">
                         <div className="flex flex-row">
                             <div className="basis-1/4">{t('Progress')}</div>
                             <div className="basis-3/4 m-auto"><Pieces numpieces={download.total_pieces} pieces64={download.pieces || ''} /></div>
@@ -80,17 +93,23 @@ export default function DownloadDetails({ selectedDownloads }: { selectedDownloa
                             <div className="basis-3/4">{download?.availability}</div>
                         </div>
                     </div>
-                </TabsContent>
-                <TabsContent value="files">
+                </ScrollArea>
+            </TabsContent>
+            <TabsContent value="files" style={contentStyle}>
+                <ScrollArea className="h-full">
                     <Files download={download} key={download.infohash} />
-                </TabsContent>
-                <TabsContent value="trackers">
+                </ScrollArea>
+            </TabsContent>
+            <TabsContent value="trackers" style={contentStyle}>
+                <ScrollArea className="h-full">
                     <Trackers download={download} />
-                </TabsContent>
-                <TabsContent value="peers">
+                </ScrollArea>
+            </TabsContent>
+            <TabsContent value="peers" style={contentStyle}>
+                <ScrollArea className="h-full">
                     <Peers download={download} />
-                </TabsContent>
-            </Tabs>
-        </ScrollArea>
+                </ScrollArea>
+            </TabsContent>
+        </Tabs>
     )
 }

From 27df29dbdc55d8ff8731567c0b7e5a0c43fadb24 Mon Sep 17 00:00:00 2001
From: Egbert Bouman <ebouman@gmail.com>
Date: Tue, 5 Nov 2024 20:00:42 +0100
Subject: [PATCH 2/4] Fix SimpleTable header colour issue

---
 src/tribler/ui/src/components/ui/simple-table.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/tribler/ui/src/components/ui/simple-table.tsx b/src/tribler/ui/src/components/ui/simple-table.tsx
index 826e388a1f..8589526119 100644
--- a/src/tribler/ui/src/components/ui/simple-table.tsx
+++ b/src/tribler/ui/src/components/ui/simple-table.tsx
@@ -113,9 +113,9 @@ function SimpleTable<T extends object>({
         <>
             <div ref={parentRef} className='flex-grow flex'>
                 <Table maxHeight={maxHeight ?? (parentRect?.height ?? 200)}>
-                    <TableHeader className="bg-neutral-100 dark:bg-neutral-900 border-0 z-20">
+                    <TableHeader>
                         {table.getHeaderGroups().map((headerGroup) => (
-                            <TableRow key={headerGroup.id}>
+                            <TableRow key={headerGroup.id} className="bg-neutral-100 hover:bg-neutral-100 dark:bg-neutral-900 dark:hover:bg-neutral-900">
                                 {headerGroup.headers.map((header, index) => {
                                     return (
                                         <TableHead key={header.id} className={cn({ 'pl-4': index === 0, 'pr-4': index + 1 === headerGroup.headers.length, })}>

From cb3e74e6ef598cb308641e0e372d157faf3a8215 Mon Sep 17 00:00:00 2001
From: Egbert Bouman <ebouman@gmail.com>
Date: Tue, 5 Nov 2024 21:44:28 +0100
Subject: [PATCH 3/4] Add border below TabsLists

---
 src/tribler/ui/src/pages/Debug/Asyncio/index.tsx    | 2 +-
 src/tribler/ui/src/pages/Debug/DHT/index.tsx        | 2 +-
 src/tribler/ui/src/pages/Debug/IPv8/index.tsx       | 2 +-
 src/tribler/ui/src/pages/Debug/Libtorrent/index.tsx | 2 +-
 src/tribler/ui/src/pages/Debug/Tunnels/index.tsx    | 2 +-
 src/tribler/ui/src/pages/Downloads/Details.tsx      | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/tribler/ui/src/pages/Debug/Asyncio/index.tsx b/src/tribler/ui/src/pages/Debug/Asyncio/index.tsx
index 6335332fbc..7d61867d74 100644
--- a/src/tribler/ui/src/pages/Debug/Asyncio/index.tsx
+++ b/src/tribler/ui/src/pages/Debug/Asyncio/index.tsx
@@ -7,7 +7,7 @@ import SlowTasks from "./SlowTasks";
 export default function IPv8() {
     return (
         <Tabs defaultValue="tasks" className="w-full flex flex-col flex-wrap">
-            <TabsList className="flex-rows-3">
+            <TabsList className="flex-rows-3 border-b">
                 <TabsTrigger value="tasks">Tasks</TabsTrigger>
                 <TabsTrigger value="slow">Slow tasks</TabsTrigger>
                 <TabsTrigger value="health">Health</TabsTrigger>
diff --git a/src/tribler/ui/src/pages/Debug/DHT/index.tsx b/src/tribler/ui/src/pages/Debug/DHT/index.tsx
index cb2f3ff548..c4285541b6 100644
--- a/src/tribler/ui/src/pages/Debug/DHT/index.tsx
+++ b/src/tribler/ui/src/pages/Debug/DHT/index.tsx
@@ -11,7 +11,7 @@ import Statistics from "./Statistics"
 export default function DHT() {
     return (
         <Tabs defaultValue="statistics" className="w-full flex flex-col">
-            <TabsList className="flex-cols-2">
+            <TabsList className="flex-cols-2 border-b">
                 <TabsTrigger value="statistics">Statistics</TabsTrigger>
                 <TabsTrigger value="buckets">Buckets</TabsTrigger>
             </TabsList>
diff --git a/src/tribler/ui/src/pages/Debug/IPv8/index.tsx b/src/tribler/ui/src/pages/Debug/IPv8/index.tsx
index 6a68ab6cfc..41dab22441 100644
--- a/src/tribler/ui/src/pages/Debug/IPv8/index.tsx
+++ b/src/tribler/ui/src/pages/Debug/IPv8/index.tsx
@@ -6,7 +6,7 @@ import Details from "./Details";
 export default function IPv8() {
     return (
         <Tabs defaultValue="overlays" className="w-full flex flex-col flex-wrap">
-            <TabsList className="flex-rows-3">
+            <TabsList className="flex-rows-3 border-b">
                 <TabsTrigger value="overlays">Overlays</TabsTrigger>
                 <TabsTrigger value="details">Details</TabsTrigger>
             </TabsList>
diff --git a/src/tribler/ui/src/pages/Debug/Libtorrent/index.tsx b/src/tribler/ui/src/pages/Debug/Libtorrent/index.tsx
index 4fedf847e7..fff29a719c 100644
--- a/src/tribler/ui/src/pages/Debug/Libtorrent/index.tsx
+++ b/src/tribler/ui/src/pages/Debug/Libtorrent/index.tsx
@@ -50,7 +50,7 @@ export default function Libtorrent() {
 
     return (
         <Tabs defaultValue="settings" className="w-full flex flex-col flex-wrap">
-            <TabsList className="flex-rows-4">
+            <TabsList className="flex-rows-4 border-b">
                 <TabsTrigger value="settings">Settings</TabsTrigger>
                 <TabsTrigger value="session">Session</TabsTrigger>
                 <div className="flex items-center flex-1"></div>
diff --git a/src/tribler/ui/src/pages/Debug/Tunnels/index.tsx b/src/tribler/ui/src/pages/Debug/Tunnels/index.tsx
index b28ed37dd6..d0d2b0f84b 100644
--- a/src/tribler/ui/src/pages/Debug/Tunnels/index.tsx
+++ b/src/tribler/ui/src/pages/Debug/Tunnels/index.tsx
@@ -9,7 +9,7 @@ import Peers from "./Peers"
 export default function Tunnels() {
     return (
         <Tabs defaultValue="circuits" className="w-full flex flex-col">
-            <TabsList className="flex-cols-5">
+            <TabsList className="flex-cols-5 border-b">
                 <TabsTrigger value="circuits">Circuits</TabsTrigger>
                 <TabsTrigger value="relays">Relays</TabsTrigger>
                 <TabsTrigger value="exits">Exit sockets</TabsTrigger>
diff --git a/src/tribler/ui/src/pages/Downloads/Details.tsx b/src/tribler/ui/src/pages/Downloads/Details.tsx
index e30b42c083..fc3778a54e 100644
--- a/src/tribler/ui/src/pages/Downloads/Details.tsx
+++ b/src/tribler/ui/src/pages/Downloads/Details.tsx
@@ -41,7 +41,7 @@ export default function DownloadDetails({ selectedDownloads }: { selectedDownloa
 
     return (
         <Tabs ref={tabsRef} defaultValue="details" className="w-full" >
-            <TabsList className="flex flex-1 flex-cols-4">
+            <TabsList className="flex flex-1 flex-cols-4 border-b">
                 <TabsTrigger value="details">{t('Details')}</TabsTrigger>
                 <TabsTrigger value="files">{t('Files')}</TabsTrigger>
                 <TabsTrigger value="trackers">{t('Trackers')}</TabsTrigger>

From d15047a9fd097ffb40c27005b3f7674db191c714 Mon Sep 17 00:00:00 2001
From: Egbert Bouman <ebouman@gmail.com>
Date: Tue, 5 Nov 2024 22:15:56 +0100
Subject: [PATCH 4/4] Change ResizableHandle color in overlays panel

---
 src/tribler/ui/src/pages/Debug/IPv8/Overlays.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tribler/ui/src/pages/Debug/IPv8/Overlays.tsx b/src/tribler/ui/src/pages/Debug/IPv8/Overlays.tsx
index 1b85992cec..86df29eb8b 100644
--- a/src/tribler/ui/src/pages/Debug/IPv8/Overlays.tsx
+++ b/src/tribler/ui/src/pages/Debug/IPv8/Overlays.tsx
@@ -126,7 +126,7 @@ export default function Overlays() {
                     maxHeight={Math.max((parentRect?.height ?? 50) - 0, 50)}
                 />
             </ResizablePanel>
-            <ResizableHandle className="border-2 border-gray-600" />
+            <ResizableHandle className="border-2 border-gray-300 dark:border-gray-600" />
             <ResizablePanel defaultSize={50} className={`${selectedOverlay ? "flex" : "hidden"}`}>
                 <SimpleTable
                     data={selectedOverlay?.peers || []}