Improve scroll to bottom

Author: janfaracik

src/main/frontend/pipeline-console-view/pipeline-console/main/PipelineConsole.tsx

@@ -6,14 +6,15 @@ import React from "react";
 
 import Dropdown from "../../../common/components/dropdown.tsx";
 import DropdownPortal from "../../../common/components/dropdown-portal.tsx";
-import VisibilitySelect from "./components/checkboxes.tsx";
+import StagesCustomization from "./components/stages-customization.tsx";
 import Stages from "./components/stages.tsx";
 import DataTreeView from "./DataTreeView.tsx";
 import { useStepsPoller } from "./hooks/use-steps-poller.ts";
 import { useLayoutPreferences } from "./providers/user-preference-provider.tsx";
 import SplitView from "./split-view.tsx";
 import StageView from "./StageView.tsx";
 import { CONSOLE, DOCUMENT } from "./symbols.tsx";
+import ScrollToTopBottom from "./scroll-to-top-bottom.tsx";
 
 export default function PipelineConsole() {
   const rootElement = document.getElementById("console-pipeline-root");
@@ -37,7 +38,7 @@ export default function PipelineConsole() {
       <DropdownPortal>
         <Dropdown
           items={[
-            <VisibilitySelect key="visibility-select" />,
+            <StagesCustomization key="visibility-select" />,
             "separator",
             {
               text: "View as plain text",
@@ -95,6 +96,8 @@ export default function PipelineConsole() {
           </div>
         </SplitView>
       </SplitView>
+
+      <ScrollToTopBottom />
     </>
   );
 }

…-console/main/components/checkboxes.scss …ain/components/stages-customization.scsssrc/main/frontend/pipeline-console-view/pipeline-console/main/components/checkboxes.scss renamed to src/main/frontend/pipeline-console-view/pipeline-console/main/components/stages-customization.scss src/main/frontend/pipeline-console-view/pipeline-console/main/components/checkboxes.scss renamed to src/main/frontend/pipeline-console-view/pipeline-console/main/components/stages-customization.scss

@@ -1,4 +1,4 @@
-.idk {
+.pgv-stages-customization {
   display: grid;
   grid-template-columns: auto 1fr auto;
   padding-right: 0.6rem;

…e-console/main/components/checkboxes.tsx …main/components/stages-customization.tsxsrc/main/frontend/pipeline-console-view/pipeline-console/main/components/checkboxes.tsx renamed to src/main/frontend/pipeline-console-view/pipeline-console/main/components/stages-customization.tsx src/main/frontend/pipeline-console-view/pipeline-console/main/components/checkboxes.tsx renamed to src/main/frontend/pipeline-console-view/pipeline-console/main/components/stages-customization.tsx

@@ -1,4 +1,4 @@
-import "./checkboxes.scss";
+import "./stages-customization.scss";
 
 import React from "react";
 
@@ -8,7 +8,7 @@ import {
   useLayoutPreferences,
 } from "../providers/user-preference-provider.tsx";
 
-export default function VisibilitySelect() {
+export default function StagesCustomization() {
   const {
     mainViewVisibility,
     setMainViewVisibility,
@@ -26,9 +26,8 @@ export default function VisibilitySelect() {
 
   return (
     <>
-      {/* View Selector */}
       <label
-        className="jenkins-dropdown__item idk"
+        className="jenkins-dropdown__item pgv-stages-customization"
         htmlFor="main-view-visibility"
       >
         <div className="jenkins-dropdown__item__icon">
@@ -54,9 +53,8 @@ export default function VisibilitySelect() {
         </select>
       </label>
 
-      {/* Position Toggle */}
       <label
-        className="jenkins-dropdown__item idk"
+        className="jenkins-dropdown__item pgv-stages-customization"
         htmlFor="stage-view-position"
       >
         <div className="jenkins-dropdown__item__icon">

src/main/frontend/pipeline-console-view/pipeline-console/main/scroll-to-top-bottom.scss

@@ -1,14 +1,7 @@
-.pgv-scroll-to-top-bottom__container {
-  position: sticky;
-  bottom: 0;
-  z-index: 999;
-  margin-top: -0.375rem;
-}
-
 .pgv-scroll-to-top-bottom {
-  position: absolute;
-  top: calc((3.125rem + var(--section-padding)) * -1);
-  right: calc(var(--section-padding) / 2);
+  position: fixed;
+  bottom: calc(var(--section-padding) * 1);
+  right: calc(var(--section-padding) * 2);
   display: flex;
   gap: 0.375rem;
   padding: 0.375rem;
@@ -20,6 +13,7 @@
   scale: 0.25;
   transition: var(--elastic-transition);
   pointer-events: none;
+  z-index: 1;
 
   &--visible {
     opacity: 1;

src/main/frontend/pipeline-console-view/pipeline-console/main/scroll-to-top-bottom.tsx

@@ -55,7 +55,6 @@ export default function ScrollToTopBottom() {
   };
 
   return (
-    <div className="pgv-scroll-to-top-bottom__container">
       <div
         className={classNames(`pgv-scroll-to-top-bottom`, {
           "pgv-scroll-to-top-bottom--visible": isScrollable,
@@ -94,7 +93,6 @@ export default function ScrollToTopBottom() {
             />
           </svg>
         </button>
-      </div>
     </div>
   );
 }

src/main/frontend/pipeline-console-view/pipeline-console/main/stage-steps.tsx

@@ -5,7 +5,6 @@ import React from "react";
 import { StepInfo, StepLogBufferInfo } from "../../../common/RestClient.tsx";
 import ConsoleLogCard from "./ConsoleLogCard.tsx";
 import { LOG_FETCH_SIZE, StageInfo } from "./PipelineConsoleModel.tsx";
-import ScrollToTopBottom from "./scroll-to-top-bottom.tsx";
 
 export default function StageSteps({
   stage,
@@ -43,7 +42,6 @@ export default function StageSteps({
           />
         );
       })}
-      <ScrollToTopBottom />
     </div>
   );
 }