From d9a9945638be5df8d89512d35079a9c2c90821ec Mon Sep 17 00:00:00 2001
From: Dyingbreed <Dannyvrf@outlook.com>
Date: Tue, 13 Oct 2026 20:48:37 +0200
Subject: [PATCH] Fix column divider overlapping step details on execution page

Fix column divider overlapping step details on execution page
Fixes #118
---
 .../ExecutionDetailPage.styles.tsx            | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/pages/main-page/monitoring-page/ExecutionDetailPage.styles.tsx b/src/pages/main-page/monitoring-page/ExecutionDetailPage.styles.tsx
index 4f1dc0e..01a32a8 100644
--- a/src/pages/main-page/monitoring-page/ExecutionDetailPage.styles.tsx
+++ b/src/pages/main-page/monitoring-page/ExecutionDetailPage.styles.tsx
@@ -4,7 +4,10 @@ export const DetailsGrid = styled.div`
   width: 100%;
   box-sizing: border-box;
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  /* minmax(0, ...) stops long unbreakable values (IDs, commands) from
+     widening a track and pushing content out of the grid */
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-content: start;
   gap: ${({ theme }) => theme.spacing.lg};
 
   @media (min-width: 1600px) {
@@ -17,6 +20,8 @@ export const DetailsItem = styled.div`
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing.sm};
   align-items: flex-start;
+  min-width: 0;
+  overflow-wrap: anywhere;
 `;
 
 export const DetailsValue = styled.div`
@@ -31,26 +36,18 @@ export const ResponsiveLayout = styled.div`
 
   @media (min-width: 1600px) {
     display: grid;
-    grid-template-columns: 1fr 1.5fr;
-    align-items: start;
+    /* minmax(0, ...) keeps the 1 : 1.5 split even when the right column
+       holds wide content such as a long command line */
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
+    align-items: stretch;
     gap: 0;
-    position: relative;
-
-    &::before {
-      content: "";
-      position: absolute;
-      left: calc(40%);
-      top: 0;
-      bottom: 0;
-      width: 1px;
-      background-color: ${({ theme }) => theme.colors.border.light};
-    }
   }
 `;
 
 export const TabsSection = styled.div`
   display: flex;
   flex-direction: column;
+  min-width: 0;
   padding-top: ${({ theme }) => theme.spacing.lg};
   border-top: 1px solid ${({ theme }) => theme.colors.border.light};
 
@@ -58,6 +55,9 @@ export const TabsSection = styled.div`
     padding-top: 0;
     padding-left: ${({ theme }) => theme.spacing.lg};
     border-top: none;
+    /* column divider; drawn by the column itself so it always sits on
+       the boundary between the two columns */
+    border-left: 1px solid ${({ theme }) => theme.colors.border.light};
   }
 `;
 
@@ -76,5 +76,8 @@ export const NoStepsMessage = styled.div`
     padding-top: 0;
     padding-left: ${({ theme }) => theme.spacing.lg};
     border-top: none;
+    /* column divider; drawn by the column itself so it always sits on
+       the boundary between the two columns */
+    border-left: 1px solid ${({ theme }) => theme.colors.border.light};
   }
 `;