From 2e873c18dc78b9cb6a1fd64aef6a9e5f261f5ac4 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Wed, 26 Jun 2024 09:49:30 +0100
Subject: [PATCH 01/11] Use Jenkins cards SCSS

---
 pom.xml                                       |  2 +-
 .../main/pipeline-console.scss                |  5 +-
 .../frontend/pipeline-graph-view/_cards.scss  | 55 +------------------
 .../frontend/pipeline-graph-view/app.scss     | 12 ----
 .../pipeline-graph/styles/main.scss           |  1 -
 .../lib/pipeline-graph-view/card.jelly        | 31 ++++++-----
 6 files changed, 20 insertions(+), 86 deletions(-)

diff --git a/pom.xml b/pom.xml
index 02fdadef..f5017403 100644
--- a/pom.xml
+++ b/pom.xml
@@ -33,7 +33,7 @@
     <changelist>999999-SNAPSHOT</changelist>
     <gitHubRepo>jenkinsci/pipeline-graph-view-plugin</gitHubRepo>
     <!-- Baseline Jenkins version you use to build the plugin. Users must have this version or newer to run. -->
-    <jenkins.version>2.452.1</jenkins.version>
+    <jenkins.version>2.464</jenkins.version>
     <node.version>20.15.0</node.version>
     <npm.version>10.8.1</npm.version>
     <spotless.check.skip>false</spotless.check.skip>
diff --git a/src/main/frontend/pipeline-console-view/pipeline-console/main/pipeline-console.scss b/src/main/frontend/pipeline-console-view/pipeline-console/main/pipeline-console.scss
index 50237515..aae03112 100644
--- a/src/main/frontend/pipeline-console-view/pipeline-console/main/pipeline-console.scss
+++ b/src/main/frontend/pipeline-console-view/pipeline-console/main/pipeline-console.scss
@@ -1,7 +1,6 @@
 @import "react-tippy/dist/tippy.css";
 
 :root {
-  --card-background: hsl(212, 30%, 96%);
   --step-bg-running: color-mix(in srgb, var(--accent-color) 50%, white);
   --step-bg-success: color-mix(in srgb, var(--success-color) 50%, white);
   --step-bg-unstable: color-mix(in srgb, var(--warning-color) 50%, white);
@@ -17,7 +16,6 @@
 }
 
 [data-theme="dark"] {
-  --card-background: hsl(230deg 14% 23%);
   --step-bg-running: color-mix(in srgb, var(--accent-color) 50%, black);
   --step-bg-success: color-mix(in srgb, var(--success-color) 50%, black);
   --step-bg-unstable: color-mix(in srgb, var(--warning-color) 50%, black);
@@ -29,8 +27,7 @@
 @media (prefers-color-scheme: dark) {
   [data-theme="dark-system"],
   [data-theme="dark-system"] {
-    --card-background: hsl(230deg 14% 23%);
-    //--step-text-color: hsl(230deg 14% 23%);
+    --step-text-color: hsl(230deg 14% 23%);
     --step-bg-running: color-mix(in srgb, var(--accent-color) 50%, black);
     --step-bg-success: color-mix(in srgb, var(--success-color) 50%, black);
     --step-bg-unstable: color-mix(in srgb, var(--warning-color) 50%, black);
diff --git a/src/main/frontend/pipeline-graph-view/_cards.scss b/src/main/frontend/pipeline-graph-view/_cards.scss
index 0da6dfc9..1aa7ce98 100644
--- a/src/main/frontend/pipeline-graph-view/_cards.scss
+++ b/src/main/frontend/pipeline-graph-view/_cards.scss
@@ -20,15 +20,6 @@
   }
 
   &__item {
-    position: relative;
-    border-radius: 15px;
-    padding: 20px;
-    background: var(--card-background);
-    overflow: auto;
-    box-shadow: 0 0 1px rgba(black, 0.06);
-    min-height: unset;
-    max-height: unset;
-
     hr {
       background: var(--secondary);
       border: none;
@@ -37,43 +28,11 @@
       opacity: 0.2;
     }
 
-    &:hover {
-      .pgv-cards__item__title__actions {
-        opacity: 1;
-      }
-    }
-
     &--wide {
       grid-column: span 2;
     }
   }
 
-  &__item__title {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: 0 0 20px 0;
-    padding: 0;
-    font-weight: 600;
-    font-size: 1rem;
-
-    a {
-      svg {
-        width: 18px;
-        height: 18px;
-        color: var(--text-color) !important;
-      }
-    }
-  }
-
-  &__item__title__actions {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-    opacity: 0.5;
-    transition: 0.3s ease;
-  }
-
   &__item__title-float {
     position: absolute;
     top: 0;
@@ -139,24 +98,14 @@
   background-color: var(--card-background);
 }
 
-.pgv-modal__close_button:hover {
-  background-color: darkgray;
-}
-
 .pgv-modal__closer {
-  display: none;
+  display: none !important;
 }
 
 .pgv-modal__open .pgv-modal__closer {
-  display: flex;
+  display: flex !important;
 }
 
 .pgv-modal__open .pgv-modal__expander {
   display: none;
 }
-
-.pgv-modal__expander:hover,
-.pgv-modal__closer:hover {
-  background: var(--item-background--hover);
-  border-radius: 14px;
-}
diff --git a/src/main/frontend/pipeline-graph-view/app.scss b/src/main/frontend/pipeline-graph-view/app.scss
index 4321ce51..b4055eb6 100644
--- a/src/main/frontend/pipeline-graph-view/app.scss
+++ b/src/main/frontend/pipeline-graph-view/app.scss
@@ -1,5 +1,4 @@
 :root {
-  --card-background: hsl(212, 30%, 96%);
   --card-gap: 1rem;
 }
 
@@ -8,17 +7,6 @@
   max-width: unset;
 }
 
-[data-theme="dark"] {
-  --card-background: hsl(230deg 14% 23%);
-}
-
-@media (prefers-color-scheme: dark) {
-  [data-theme="dark-system"],
-  [data-theme="dark-system"] {
-    --card-background: hsl(230deg 14% 23%);
-  }
-}
-
 @import "cards";
 
 .app-details__item svg {
diff --git a/src/main/frontend/pipeline-graph-view/pipeline-graph/styles/main.scss b/src/main/frontend/pipeline-graph-view/pipeline-graph/styles/main.scss
index 4ac5eb39..408cbf46 100644
--- a/src/main/frontend/pipeline-graph-view/pipeline-graph/styles/main.scss
+++ b/src/main/frontend/pipeline-graph-view/pipeline-graph/styles/main.scss
@@ -5,7 +5,6 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-bottom: 16px;
 
   * {
     box-sizing: border-box;
diff --git a/src/main/resources/lib/pipeline-graph-view/card.jelly b/src/main/resources/lib/pipeline-graph-view/card.jelly
index c0025c08..a88a378f 100644
--- a/src/main/resources/lib/pipeline-graph-view/card.jelly
+++ b/src/main/resources/lib/pipeline-graph-view/card.jelly
@@ -14,28 +14,29 @@
       Set true if you want to allow users to click a button to pop out a larger version of the card
     </st:attribute>
   </st:documentation>
-  <div class="pgv-cards__item${attrs.type == 'wide' ? ' pgv-cards__item--wide' : ''}${attrs.expandable == 'true' ? ' pgv-modal' : ''}">
+  <div class="jenkins-card pgv-cards__item${attrs.type == 'wide' ? ' pgv-cards__item--wide' : ''}${attrs.expandable == 'true' ? ' pgv-modal' : ''}">
     <j:choose>
       <j:when test="${attrs.expandable == 'true'}">
         <div class="pgv-modal__content">
-          <p class="pgv-cards__item__title">${attrs.title}
-            <a href="#" class="pgv-modal__expander">
-              <span class="icon-sm">
-                <l:icon src="symbol-resize-outline plugin-ionicons-api" tooltip="${%Expand} ${attrs.title}"/>
-              </span>
-            </a>
-            <a href="#" class="pgv-modal__closer">
-              <span class="icon-sm">
-                <l:icon src="symbol-close-circle-outline plugin-ionicons-api" tooltip="${%Close} ${attrs.title}"/>
-              </span>
-            </a>
-          </p>
+          <div class="jenkins-card__title">
+            ${attrs.title}
+            <div class="jenkins-card__controls">
+              <a href="#" class="jenkins-card__reveal pgv-modal__expander" tooltip="${%Expand}">
+                <l:icon src="symbol-expand" />
+              </a>
+              <a href="#" class="jenkins-card__reveal pgv-modal__closer" tooltip="${%Close} ${attrs.title}">
+                <l:icon src="symbol-close-circle-outline plugin-ionicons-api" />
+              </a>
+            </div>
+          </div>
           <d:invokeBody/>
         </div>
       </j:when>
       <j:otherwise>
-        <p class="pgv-cards__item__title">${attrs.title}</p>
-        <d:invokeBody/>
+        <div class="jenkins-card__title">${attrs.title}</div>
+        <div class="jenkins-card__content">
+          <d:invokeBody/>
+        </div>
       </j:otherwise>
     </j:choose>
   </div>

From f450d686bc599237a545b097ba162894315d8cc0 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Wed, 26 Jun 2024 10:12:39 +0100
Subject: [PATCH 02/11] Push

---
 .../frontend/pipeline-graph-view/app.scss     | 14 +++---
 .../PipelineGraphViewAction/index.jelly       | 50 ++++++++++---------
 2 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/src/main/frontend/pipeline-graph-view/app.scss b/src/main/frontend/pipeline-graph-view/app.scss
index b4055eb6..658a5e89 100644
--- a/src/main/frontend/pipeline-graph-view/app.scss
+++ b/src/main/frontend/pipeline-graph-view/app.scss
@@ -9,17 +9,17 @@
 
 @import "cards";
 
-.app-details__item svg {
-  color: currentColor !important;
-  width: 16px;
-  height: 16px;
+.idkidkidk {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
 
 .app-details__item {
   display: flex;
   align-items: center;
   gap: 10px;
-  margin: 0 0 15px;
+  margin: 0;
 
   span {
     display: contents;
@@ -27,8 +27,8 @@
 
   svg {
     color: currentColor !important;
-    width: 16px;
-    height: 16px;
+    width: 1.125rem;
+    height: 1.125rem;
   }
 
   &--link {
diff --git a/src/main/resources/io/jenkins/plugins/pipelinegraphview/PipelineGraphViewAction/index.jelly b/src/main/resources/io/jenkins/plugins/pipelinegraphview/PipelineGraphViewAction/index.jelly
index 253a7ace..b2f1bea3 100644
--- a/src/main/resources/io/jenkins/plugins/pipelinegraphview/PipelineGraphViewAction/index.jelly
+++ b/src/main/resources/io/jenkins/plugins/pipelinegraphview/PipelineGraphViewAction/index.jelly
@@ -51,31 +51,33 @@
           <script src="${rootURL}/plugin/pipeline-graph-view/js/bundles/pipeline-graph-view-bundle.js"/>
         </p:card>
         <p:card title="${it.runDetailsCard.title}">
-          <j:forEach var="card" items="${it.runDetailsCard.items}">
-            <j:choose>
-              <j:when test="${card.separator}">
-                <hr/>
-              </j:when>
-              <j:otherwise>
-                <p class="app-details__item">
-                  <l:icon src="${card.icon}"/>
-                  <j:choose>
-                    <j:when test="${!empty(card.href)}">
-                      <a
-                          class="app-details__item--link"
-                          href="${card.href}"
-                      >
+          <div class="idkidkidk">
+            <j:forEach var="card" items="${it.runDetailsCard.items}">
+              <j:choose>
+                <j:when test="${card.separator}">
+                  <hr/>
+                </j:when>
+                <j:otherwise>
+                  <p class="app-details__item">
+                    <l:icon src="${card.icon}"/>
+                    <j:choose>
+                      <j:when test="${!empty(card.href)}">
+                        <a
+                                class="app-details__item--link"
+                                href="${card.href}"
+                        >
+                          ${card.text}
+                        </a>
+                      </j:when>
+                      <j:otherwise>
                         ${card.text}
-                      </a>
-                    </j:when>
-                    <j:otherwise>
-                      ${card.text}
-                    </j:otherwise>
-                  </j:choose>
-                </p>
-              </j:otherwise>
-            </j:choose>
-          </j:forEach>
+                      </j:otherwise>
+                    </j:choose>
+                  </p>
+                </j:otherwise>
+              </j:choose>
+            </j:forEach>
+          </div>
         </p:card>
       </div>
     </l:main-panel>

From 2bd7a93799239ddce2896c83d9a7519c864f3a4d Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Tue, 3 Sep 2024 15:20:30 +0100
Subject: [PATCH 03/11] Update app.scss

---
 src/main/frontend/pipeline-graph-view/app.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/main/frontend/pipeline-graph-view/app.scss b/src/main/frontend/pipeline-graph-view/app.scss
index 658a5e89..3df6e3ae 100644
--- a/src/main/frontend/pipeline-graph-view/app.scss
+++ b/src/main/frontend/pipeline-graph-view/app.scss
@@ -9,6 +9,7 @@
 
 @import "cards";
 
+// TODO - Needs to be renamed
 .idkidkidk {
   display: flex;
   flex-direction: column;

From a9bac4a070119a86bb565a5ecb0a6516b0041b49 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Tue, 3 Sep 2024 21:47:33 +0100
Subject: [PATCH 04/11] Update pom.xml

---
 pom.xml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pom.xml b/pom.xml
index 10311935..dcd309a8 100644
--- a/pom.xml
+++ b/pom.xml
@@ -33,7 +33,7 @@
     <changelist>999999-SNAPSHOT</changelist>
     <gitHubRepo>jenkinsci/pipeline-graph-view-plugin</gitHubRepo>
     <!-- Baseline Jenkins version you use to build the plugin. Users must have this version or newer to run. -->
-    <jenkins.version>2.452.1</jenkins.version>
+    <jenkins.version>2.464</jenkins.version>
     <node.version>20.16.0</node.version>
     <npm.version>10.8.2</npm.version>
     <spotless.check.skip>false</spotless.check.skip>

From 4a85d7fc96d2bf3f3d973a0b34cf197604681441 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Tue, 3 Sep 2024 21:50:16 +0100
Subject: [PATCH 05/11] Rename classes

---
 src/main/frontend/pipeline-graph-view/app.scss              | 5 ++---
 .../pipelinegraphview/PipelineGraphViewAction/index.jelly   | 6 +++---
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/main/frontend/pipeline-graph-view/app.scss b/src/main/frontend/pipeline-graph-view/app.scss
index 3df6e3ae..6a558ef6 100644
--- a/src/main/frontend/pipeline-graph-view/app.scss
+++ b/src/main/frontend/pipeline-graph-view/app.scss
@@ -9,14 +9,13 @@
 
 @import "cards";
 
-// TODO - Needs to be renamed
-.idkidkidk {
+.pgv-details-card {
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }
 
-.app-details__item {
+.pgv-details__item {
   display: flex;
   align-items: center;
   gap: 10px;
diff --git a/src/main/resources/io/jenkins/plugins/pipelinegraphview/PipelineGraphViewAction/index.jelly b/src/main/resources/io/jenkins/plugins/pipelinegraphview/PipelineGraphViewAction/index.jelly
index 7e991e90..29659fc6 100644
--- a/src/main/resources/io/jenkins/plugins/pipelinegraphview/PipelineGraphViewAction/index.jelly
+++ b/src/main/resources/io/jenkins/plugins/pipelinegraphview/PipelineGraphViewAction/index.jelly
@@ -51,19 +51,19 @@
           <script src="${rootURL}/plugin/pipeline-graph-view/js/bundles/pipeline-graph-view-bundle.js"/>
         </p:card>
         <p:card title="${it.runDetailsCard.title}">
-          <div class="idkidkidk">
+          <div class="pgv-details-card">
             <j:forEach var="card" items="${it.runDetailsCard.items}">
               <j:choose>
                 <j:when test="${card.separator}">
                   <hr/>
                 </j:when>
                 <j:otherwise>
-                  <p class="app-details__item">
+                  <p class="pgv-details__item">
                     <l:icon src="${card.icon}"/>
                     <j:choose>
                       <j:when test="${!empty(card.href)}">
                         <a
-                                class="app-details__item--link"
+                                class="pgv-details__item--link"
                                 href="${card.href}"
                         >
                           ${card.text}

From 49c605028cb3584f49bbe7a60171fdeb05261420 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Tue, 3 Sep 2024 21:56:45 +0100
Subject: [PATCH 06/11] Update theme

---
 .../multi-pipeline-graph/styles/variables.scss                  | 2 +-
 src/main/frontend/pipeline-graph-view/_cards.scss               | 1 +
 .../pipeline-graph-view/pipeline-graph/styles/variables.scss    | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/styles/variables.scss b/src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/styles/variables.scss
index d05e8bb8..c8331ba1 100644
--- a/src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/styles/variables.scss
+++ b/src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/styles/variables.scss
@@ -7,6 +7,6 @@ $status-failure: #d54c53;
 $status-paused: #24b0d5;
 $status-unknown: #d54cc4;
 
-$graph-connector-grey: #949393;
+$graph-connector-grey: color-mix(in srgb, var(--text-color-secondary), var(--background));
 $progress-bg: #a7c7f2;
 $progress-bar-color: #1d7dcf;
diff --git a/src/main/frontend/pipeline-graph-view/_cards.scss b/src/main/frontend/pipeline-graph-view/_cards.scss
index 1aa7ce98..4a09a7f0 100644
--- a/src/main/frontend/pipeline-graph-view/_cards.scss
+++ b/src/main/frontend/pipeline-graph-view/_cards.scss
@@ -68,6 +68,7 @@
   height: 100%;
   max-height: unset;
   background-color: rgba(0, 0, 0, 0.5);
+  -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
   z-index: 1000;
 
diff --git a/src/main/frontend/pipeline-graph-view/pipeline-graph/styles/variables.scss b/src/main/frontend/pipeline-graph-view/pipeline-graph/styles/variables.scss
index d05e8bb8..c8331ba1 100644
--- a/src/main/frontend/pipeline-graph-view/pipeline-graph/styles/variables.scss
+++ b/src/main/frontend/pipeline-graph-view/pipeline-graph/styles/variables.scss
@@ -7,6 +7,6 @@ $status-failure: #d54c53;
 $status-paused: #24b0d5;
 $status-unknown: #d54cc4;
 
-$graph-connector-grey: #949393;
+$graph-connector-grey: color-mix(in srgb, var(--text-color-secondary), var(--background));
 $progress-bg: #a7c7f2;
 $progress-bar-color: #1d7dcf;

From bd1d029fec23beac6c37b64c98d0c395bcddf9a1 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Tue, 3 Sep 2024 22:02:00 +0100
Subject: [PATCH 07/11] Update _cards.scss

---
 src/main/frontend/pipeline-graph-view/_cards.scss | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/main/frontend/pipeline-graph-view/_cards.scss b/src/main/frontend/pipeline-graph-view/_cards.scss
index 4a09a7f0..13f5803f 100644
--- a/src/main/frontend/pipeline-graph-view/_cards.scss
+++ b/src/main/frontend/pipeline-graph-view/_cards.scss
@@ -76,14 +76,21 @@
   visibility: visible;
   transform: scale(1);
   transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
+
+  // Reset styles inherit from .jenkins-card
+  border-radius: 0;
+
+  &::after {
+    display: none;
+  }
 }
 .pgv-modal__open > .pgv-modal__content {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background-color: var(--card-background);
-  padding: 1rem 1.5rem;
+  background-color: var(--background);
+  box-shadow: var(--dialog-box-shadow);
   width: 95%;
   height: 90%;
   border-radius: 0.5rem;

From 63aba648328caad3e4e8d2d741a686ecdf8f88ec Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Tue, 3 Sep 2024 22:05:39 +0100
Subject: [PATCH 08/11] Update pipeline-console.scss

---
 .../pipeline-console/main/pipeline-console.scss                  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/main/frontend/pipeline-console-view/pipeline-console/main/pipeline-console.scss b/src/main/frontend/pipeline-console-view/pipeline-console/main/pipeline-console.scss
index 647519ad..335f2b8b 100644
--- a/src/main/frontend/pipeline-console-view/pipeline-console/main/pipeline-console.scss
+++ b/src/main/frontend/pipeline-console-view/pipeline-console/main/pipeline-console.scss
@@ -31,7 +31,6 @@
   [data-theme="dark-system"],
   [data-theme="dark-system"] {
     --card-background: hsl(230deg 14% 23%);
-    //--step-text-color: hsl(230deg 14% 23%);
     --step-bg-running: color-mix(in srgb, var(--accent-color) 50%, black);
     --step-bg-success: color-mix(in srgb, var(--success-color) 50%, black);
     --step-bg-unstable: color-mix(in srgb, var(--warning-color) 50%, black);

From 2d07720d6307f4318c0f70a3ec7f2b1546a7406a Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Tue, 3 Sep 2024 22:14:09 +0100
Subject: [PATCH 09/11] Update _cards.scss

---
 src/main/frontend/pipeline-graph-view/_cards.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/frontend/pipeline-graph-view/_cards.scss b/src/main/frontend/pipeline-graph-view/_cards.scss
index 13f5803f..abff6685 100644
--- a/src/main/frontend/pipeline-graph-view/_cards.scss
+++ b/src/main/frontend/pipeline-graph-view/_cards.scss
@@ -24,7 +24,7 @@
       background: var(--secondary);
       border: none;
       height: 2px;
-      margin: 0.4rem 0 calc(0.4rem + 15px);
+      margin: 0;
       opacity: 0.2;
     }
 

From fec2a255517f8242197a386c8af097fc82afa5b7 Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Tue, 3 Sep 2024 22:21:24 +0100
Subject: [PATCH 10/11] Update _cards.scss

---
 .../frontend/pipeline-graph-view/_cards.scss  | 21 -------------------
 1 file changed, 21 deletions(-)

diff --git a/src/main/frontend/pipeline-graph-view/_cards.scss b/src/main/frontend/pipeline-graph-view/_cards.scss
index abff6685..4fd67c8e 100644
--- a/src/main/frontend/pipeline-graph-view/_cards.scss
+++ b/src/main/frontend/pipeline-graph-view/_cards.scss
@@ -32,27 +32,6 @@
       grid-column: span 2;
     }
   }
-
-  &__item__title-float {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    padding: 20px 20px 0 20px;
-    z-index: 1;
-
-    &::before {
-      content: "";
-      position: absolute;
-      inset: 0;
-      bottom: -20px;
-      backdrop-filter: blur(20px);
-      z-index: -1;
-      border-radius: 15px 15px 0 0;
-      mask-image: linear-gradient(white 25%, transparent);
-      pointer-events: none;
-    }
-  }
 }
 
 /* Modal */

From 881d186b169476fc7dbb8bf1de11d66f17444b4e Mon Sep 17 00:00:00 2001
From: Jan Faracik <43062514+janfaracik@users.noreply.github.com>
Date: Tue, 3 Sep 2024 22:25:17 +0100
Subject: [PATCH 11/11] Fix overflow-x

---
 .../frontend/pipeline-graph-view/pipeline-graph/styles/main.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/main/frontend/pipeline-graph-view/pipeline-graph/styles/main.scss b/src/main/frontend/pipeline-graph-view/pipeline-graph/styles/main.scss
index 408cbf46..a55cfc7e 100644
--- a/src/main/frontend/pipeline-graph-view/pipeline-graph/styles/main.scss
+++ b/src/main/frontend/pipeline-graph-view/pipeline-graph/styles/main.scss
@@ -5,6 +5,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  overflow-x: auto;
 
   * {
     box-sizing: border-box;