Fix DownloadDetails scroll issue (#8248)

Tribler · Nov 6, 2024 · 91818e5 · 91818e5
2 parents e13c2d0 + d15047a
commit 91818e5
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 28 deletions.
diff --git 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, })}>

diff --git 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
@@ -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/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 || []}

diff --git 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
@@ -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
@@ -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
@@ -11,33 +11,46 @@ 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);
     }, [selectedDownloads]);
 
     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 border-b">
+                <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>
     )
 }