From d870c047f9e7cd4c79a477ddb5a1e206aa25fc94 Mon Sep 17 00:00:00 2001
From: x032205 <x032205@gmail.com>
Date: Sat, 1 Nov 2025 04:34:32 -0400
Subject: [PATCH] animations and small tweaks

---
 .../components/PamSessionLogOutput.tsx        |  7 +--
 .../components/PamSessionLogsSection.tsx      | 50 ++++++++++++-------
 2 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogOutput.tsx b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogOutput.tsx
index ba2f38057..a0cfb6cb9 100644
--- a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogOutput.tsx
+++ b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogOutput.tsx
@@ -1,6 +1,7 @@
-import { PamResourceType } from "@app/hooks/api/pam";
 import { useState } from "react";
 
+import { PamResourceType } from "@app/hooks/api/pam";
+
 type TableLog = {
   command?: string;
   data_rows: Record<string, string | number | null>[];
@@ -34,7 +35,7 @@ export const PamSessionLogOutput = ({
       ) {
         parsedContent = parsed;
       }
-    } catch (error) {
+    } catch {
       // Not a valid JSON or doesn't match structure, will render as plain text
     }
   }
@@ -69,7 +70,7 @@ export const PamSessionLogOutput = ({
                       className="border-b border-mineshaft-700 bg-mineshaft-900 last:border-b-0 hover:bg-mineshaft-800/50"
                     >
                       {headers.map((header) => (
-                        <td key={`${header}-${rowIndex}`} className="p-2">
+                        <td key={header} className="p-2">
                           {String(row[header] ?? "")}
                         </td>
                       ))}
diff --git a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
index 413f379e2..b3c287380 100644
--- a/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
+++ b/frontend/src/pages/pam/PamSessionsByIDPage/components/PamSessionLogsSection.tsx
@@ -1,8 +1,10 @@
 import { useState } from "react";
-import { faChevronDown, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
 
 import { TPamSession } from "@app/hooks/api/pam";
+
 import { PamSessionLogOutput } from "./PamSessionLogOutput";
 import { formatLogContent } from "./PamSessionLogsSection.utils";
 
@@ -45,8 +47,11 @@ export const PamSessionLogsSection = ({ session }: Props) => {
                 <div className="flex items-center justify-between text-bunker-400">
                   <div className="flex items-center gap-2 select-none">
                     <FontAwesomeIcon
-                      icon={isExpanded ? faChevronDown : faChevronRight}
-                      className="size-3 transition-transform duration-200"
+                      icon={faChevronRight}
+                      className={twMerge(
+                        "size-3 transition-transform duration-100 ease-in-out",
+                        isExpanded && "rotate-90"
+                      )}
                     />
                     <span>{new Date(log.timestamp).toLocaleString()}</span>
                   </div>
@@ -60,21 +65,30 @@ export const PamSessionLogsSection = ({ session }: Props) => {
                   {formattedInput}
                 </div>
 
-                {isExpanded && log.output && (
-                  <>
-                    <div className="mt-2 flex items-center gap-2">
-                      <div className="h-px w-full bg-mineshaft-400"></div>
-                      <span className="text-xs text-mineshaft-400">OUTPUT</span>
-                      <div className="h-px w-full bg-mineshaft-400"></div>
-                    </div>
-                    <div className="pt-2 text-bunker-300">
-                      <PamSessionLogOutput
-                        content={log.output}
-                        resourceType={session.resourceType}
-                      />
-                    </div>
-                  </>
-                )}
+                <div
+                  className={twMerge(
+                    "grid transition-all duration-100 ease-in-out",
+                    isExpanded && log.output ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+                  )}
+                >
+                  <div className="overflow-hidden">
+                    {log.output && (
+                      <>
+                        <div className="mt-2 flex items-center gap-2">
+                          <div className="h-px w-full bg-mineshaft-400" />
+                          <span className="text-xs text-mineshaft-400">OUTPUT</span>
+                          <div className="h-px w-full bg-mineshaft-400" />
+                        </div>
+                        <div className="pt-2 text-bunker-300">
+                          <PamSessionLogOutput
+                            content={log.output}
+                            resourceType={session.resourceType}
+                          />
+                        </div>
+                      </>
+                    )}
+                  </div>
+                </div>
               </button>
             );
           })