From 4b65d4b31348ef8d27b092c8b2f93316b9ce26b9 Mon Sep 17 00:00:00 2001
From: momo5502 <mauriceheumann@gmail.com>
Date: Sun, 7 Sep 2025 12:40:24 +0200
Subject: [PATCH] Fade button

---
 page/src/components/output.tsx | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/page/src/components/output.tsx b/page/src/components/output.tsx
index 21f65421..22546e14 100644
--- a/page/src/components/output.tsx
+++ b/page/src/components/output.tsx
@@ -190,6 +190,7 @@ export class Output extends React.Component<OutputProps, FullOutputState> {
     this.logLine = this.logLine.bind(this);
     this.logLines = this.logLines.bind(this);
     this.handleScroll = this.handleScroll.bind(this);
+    this.scrollListToEnd = this.scrollListToEnd.bind(this);
     this.updateDimensions = this.updateDimensions.bind(this);
 
     this.outputRef = React.createRef();
@@ -334,20 +335,16 @@ export class Output extends React.Component<OutputProps, FullOutputState> {
           rowHeight={20}
           style={{ height: this.state.height, width: this.state.width }}
         />
-
-        {this.state.autoScroll ? (
-          <></>
-        ) : (
-          <Button
-            className="absolute bottom-6 right-6 z-50 terminal-glass"
-            variant="secondary"
-            onClick={() => {
-              this.scrollListToEnd();
-            }}
-          >
-            <ArrowDown />
-          </Button>
-        )}
+        <Button
+          className={
+            "absolute bottom-6 right-6 z-50 terminal-glass transition-opacity duration-50 ease-linear " +
+            (this.state.autoScroll ? "opacity-0" : "")
+          }
+          variant="secondary"
+          onClick={this.scrollListToEnd}
+        >
+          <ArrowDown />
+        </Button>
       </div>
     );
   }