From eacdde829f033b68c17447f9673750b08017f334 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Fri, 9 May 2025 20:07:51 +0530
Subject: [PATCH] (fix/logs) abnormal scroll over page

---
 frontend/src/settings/Logs.tsx | 79 +++++++++++++++++++---------------
 1 file changed, 44 insertions(+), 35 deletions(-)

diff --git a/frontend/src/settings/Logs.tsx b/frontend/src/settings/Logs.tsx
index 50d67b54..74b00a25 100644
--- a/frontend/src/settings/Logs.tsx
+++ b/frontend/src/settings/Logs.tsx
@@ -73,16 +73,11 @@ function LogsTable({ logs, setPage, loading, tableHeader }: LogsTableProps) {
   const [openLogId, setOpenLogId] = useState<string | null>(null);
 
   const handleLogToggle = (logId: string) => {
-    if (openLogId && openLogId !== logId) {
-      // If a different log is being opened, close the current one
-      const currentOpenLog = document.getElementById(
-        openLogId,
-      ) as HTMLDetailsElement;
-      if (currentOpenLog) {
-        currentOpenLog.open = false;
-      }
+    if (openLogId === logId) {
+      setOpenLogId(null);
+    } else {
+      setOpenLogId(logId);
     }
-    setOpenLogId(logId);
   };
 
   const firstObserver = useCallback((node: HTMLDivElement | null) => {
@@ -116,16 +111,27 @@ function LogsTable({ logs, setPage, loading, tableHeader }: LogsTableProps) {
           {tableHeader ? tableHeader : t('settings.logs.tableHeader')}
         </p>
       </div>
-      <div className="flex h-[51vh] flex-grow flex-col items-start gap-2 overflow-y-auto bg-transparent p-4">
+      <div className="relative flex h-[51vh] flex-grow flex-col items-start gap-2 overflow-y-auto overscroll-contain bg-transparent p-4">
         {logs?.map((log, index) => {
           if (index === logs.length - 1) {
             return (
               <div ref={firstObserver} key={index} className="w-full">
-                <Log log={log} onToggle={handleLogToggle} />
+                <Log
+                  log={log}
+                  isOpen={openLogId === log.id}
+                  onToggle={handleLogToggle}
+                />
               </div>
             );
           } else
-            return <Log key={index} log={log} onToggle={handleLogToggle} />;
+            return (
+              <Log
+                key={index}
+                log={log}
+                isOpen={openLogId === log.id}
+                onToggle={handleLogToggle}
+              />
+            );
         })}
         {loading && <SkeletonLoader component="logs" />}
       </div>
@@ -134,9 +140,11 @@ function LogsTable({ logs, setPage, loading, tableHeader }: LogsTableProps) {
 }
 function Log({
   log,
+  isOpen,
   onToggle,
 }: {
   log: LogData;
+  isOpen: boolean;
   onToggle: (id: string) => void;
 }) {
   const { t } = useTranslation();
@@ -148,20 +156,17 @@ function Log({
   const { id, action, timestamp, ...filteredLog } = log;
 
   return (
-    <details
-      id={log.id}
-      className="group w-full rounded-xl bg-transparent hover:bg-[#F9F9F9] group-open:opacity-80 hover:dark:bg-dark-charcoal [&[open]]:border [&[open]]:border-[#d9d9d9] [&_summary::-webkit-details-marker]:hidden"
-      onToggle={(e) => {
-        if ((e.target as HTMLDetailsElement).open) {
-          onToggle(log.id);
-        }
-      }}
-    >
-      <summary className="flex cursor-pointer flex-row items-start gap-2 p-2 px-4 py-3 text-gray-900 group-open:rounded-t-xl group-open:bg-[#F1F1F1] dark:group-open:bg-[#1B1B1B]">
+    <div className="group w-full rounded-xl bg-transparent hover:bg-[#F9F9F9] hover:dark:bg-dark-charcoal">
+      <div
+        onClick={() => onToggle(log.id)}
+        className={`flex cursor-pointer flex-row items-start gap-2 p-2 px-4 py-3 text-gray-900 ${
+          isOpen ? 'rounded-t-xl bg-[#F1F1F1] dark:bg-[#1B1B1B]' : ''
+        }`}
+      >
         <img
           src={ChevronRight}
           alt="Expand log entry"
-          className="mt-[3px] h-3 w-3 transition duration-300 group-open:rotate-90"
+          className={`mt-[3px] h-3 w-3 transition duration-300 ${isOpen ? 'rotate-90' : ''}`}
         />
         <span className="flex flex-row gap-2">
           <h2 className="text-xs text-black/60 dark:text-bright-gray">{`${log.timestamp}`}</h2>
@@ -174,18 +179,22 @@ function Log({
               : log.question}
           </h2>
         </span>
-      </summary>
-      <div className="px-4 py-3 group-open:rounded-b-xl group-open:bg-[#F1F1F1] dark:group-open:bg-[#1B1B1B]">
-        <p className="break-words px-2 text-xs leading-relaxed text-gray-700 dark:text-gray-400">
-          {JSON.stringify(filteredLog, null, 2)}
-        </p>
-        <div className="my-px w-fit">
-          <CopyButton
-            textToCopy={JSON.stringify(filteredLog)}
-            showText={true}
-          />
-        </div>
       </div>
-    </details>
+      {isOpen && (
+        <div className="rounded-b-xl bg-[#F1F1F1] px-4 py-3 dark:bg-[#1B1B1B]">
+          <div className="scrollbar-thin overflow-y-auto">
+            <pre className="whitespace-pre-wrap break-words px-2 font-mono text-xs leading-relaxed text-gray-700 dark:text-gray-400">
+              {JSON.stringify(filteredLog, null, 2)}
+            </pre>
+          </div>
+          <div className="my-px w-fit">
+            <CopyButton
+              textToCopy={JSON.stringify(filteredLog)}
+              showText={true}
+            />
+          </div>
+        </div>
+      )}
+    </div>
   );
 }