Skip to content

Fix column divider overlapping step details on execution page #119

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Paul2803k merged 1 commit into from
Oct 14, 2026
Merged

Fix column divider overlapping step details on execution page #119

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 17 additions & 14 deletions src/pages/main-page/monitoring-page/ExecutionDetailPage.styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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`
Expand All @@ -31,33 +36,28 @@ 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};

@media (min-width: 1600px) {
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};
}
`;

Expand All @@ -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};
}
`;
Loading