From 0331c146732d17079c38eb0ec944bde939b9a96e Mon Sep 17 00:00:00 2001 From: Mayank Sharma Date: Sat, 5 Sep 2026 20:41:20 +0530 Subject: [PATCH 1/4] fix(terminal): prevent long URL clipping and improve layout responsiveness Signed-off-by: Mayank Sharma --- .../AnimatedStepsList.style.js | 92 +++----------- src/components/Terminal/Terminal.style.js | 112 +++++++++--------- 2 files changed, 76 insertions(+), 128 deletions(-) diff --git a/src/components/Animated-steps-list/AnimatedStepsList.style.js b/src/components/Animated-steps-list/AnimatedStepsList.style.js index ff5144ccde9a5f..30b84e2fd0ac20 100644 --- a/src/components/Animated-steps-list/AnimatedStepsList.style.js +++ b/src/components/Animated-steps-list/AnimatedStepsList.style.js @@ -3,6 +3,16 @@ import styled from "styled-components"; export const AnimatedStepsListWrapper = styled.div` .animated-steps-list { display: flex; + justify-content: space-between; + width: 100%; + + @media (min-width: 1200px) { + margin-right: calc( + -1 * clamp(0px, calc((100vw - 1170px) / 2 - 40px), 140px) + ); + width: calc(100% + clamp(0px, calc((100vw - 1170px) / 2 - 40px), 140px)); + } + & .indicator-wrapper { & > ul { position: sticky; @@ -10,7 +20,7 @@ export const AnimatedStepsListWrapper = styled.div` padding-bottom: 395px; } - margin-right: 115px; + margin-right: 24px; @media (max-width: 1119px) { display: none; } @@ -18,17 +28,20 @@ export const AnimatedStepsListWrapper = styled.div` & .steps-list { margin-bottom: 46px; + flex-shrink: 0; } & .terminal-wrapper { - margin-left: 150px; + margin-left: 36px; position: sticky; top: 148px; align-self: flex-start; box-shadow: rgb(0 0 0 / 0.35) 7px 10px 25px; + flex: 1; + min-width: 0; @media (max-width: 1119px) { - margin-left: 75px; + margin-left: 24px; } @media (max-width: 850px) { @@ -38,78 +51,7 @@ export const AnimatedStepsListWrapper = styled.div` & > * { /* Child should not be sticky now; allow natural flow */ margin-top: 0; - - @media (min-width: 850px) { - max-width: 450px; - } - - @media (min-width: 875px) { - max-width: 475px; - } - - @media (min-width: 900px) { - max-width: 520px; - } - - @media (min-width: 950px) { - max-width: 545px; - } - - @media (min-width: 1000px) { - max-width: 570px; - } - - @media (min-width: 1050px) { - max-width: 605px; - } - - @media (min-width: 1120px) { - max-width: 465px; - } - - @media (min-width: 1150px) { - max-width: 515px; - } - - @media (min-width: 1200px) { - max-width: 565px; - } - - @media (min-width: 1250px) { - max-width: 615px; - } - - @media (min-width: 1300px) { - max-width: 645px; - } - - @media (min-width: 1350px) { - max-width: 670px; - } - - @media (min-width: 1400px) { - max-width: 695px; - } - - @media (min-width: 1450px) { - max-width: 720px; - } - - @media (min-width: 1500px) { - max-width: 745px; - } - - @media (min-width: 1550px) { - max-width: 770px; - } - - @media (min-width: 1600px) { - max-width: 795px; - } - - @media (min-width: 1650px) { - max-width: unset; - } + max-width: 100%; } } } diff --git a/src/components/Terminal/Terminal.style.js b/src/components/Terminal/Terminal.style.js index 216ee7cf762fee..0c99c5cdf81865 100644 --- a/src/components/Terminal/Terminal.style.js +++ b/src/components/Terminal/Terminal.style.js @@ -7,7 +7,7 @@ export const TerminalWrapper = styled.div` --gray-7: #f7f7f9; --gray-6: #dcdde0; --gray-5: #bdbec2; - --gray-4: #76767d; + --gray-4: #76767d; --gray-3: #4c4c53; --gray-2: #323339; --gray-1: #1d1e23; @@ -28,7 +28,7 @@ export const TerminalWrapper = styled.div` .title { color: var(--gray-4); - font-family: 'Courier New', Courier, monospace; + font-family: "Courier New", Courier, monospace; font-size: 13.5px; margin: 0 auto; } @@ -65,62 +65,68 @@ export const TerminalWrapper = styled.div` } } -.overflow-wrapper { - width: 100%; - height: 100%; - position: relative; - overflow: scroll; + .overflow-wrapper { + width: 100%; + height: 100%; + position: relative; + overflow: scroll; - /* Hides the scrollbars */ - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ - &::-webkit-scrollbar { - /* Safari */ - -webkit-appearance: none; - width: 0; - height: 0; - } - - .code-wrapper { - pre { - padding: 0; - margin: 0; - width: 100%; - height: 100%; - font-style: normal; - font-weight: normal; - font-size: 12px; - line-height: 27px; - white-space: pre-wrap; - color: ${props => props.theme.secondaryColor}; - &.short { - line-height: 16px; - } - &.navy { - color: var(--vagrant-l1); - } - &.gray { - color: var(--gray-5); - } - &.white { - color: var(--white); - } + /* Hides the scrollbars */ + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + &::-webkit-scrollbar { + /* Safari */ + -webkit-appearance: none; + width: 0; + height: 0; + } + + .code-wrapper { + pre { + padding: 0; + margin: 0; + width: 100%; + height: 100%; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 27px; + white-space: pre-wrap; + color: ${(props) => props.theme.secondaryColor}; + &.short { + line-height: 16px; + } + &.navy { + color: var(--vagrant-l1); + } + &.gray { + color: var(--gray-5); + } + &.white { + color: var(--white); + } + + overflow-wrap: break-word; + overflow-wrap: anywhere; - wrap-word: normal; - - @media (min-width: 768px){ - font-size: 13.5px; - line-height: 26px; + @media (min-width: 768px) { + font-size: 13.5px; + line-height: 26px; + } } } } -} -.no-scroll-overflow-wrapper { + .no-scroll-overflow-wrapper { + overflow-x: hidden; - .code-wrapper { - bottom: 0; - position: absolute; - min-height: 100%; + .code-wrapper { + bottom: 0; + position: absolute; + min-height: 100%; + width: 100%; + left: 0; + box-sizing: border-box; + } } -}`; +`; From 3714a94d34489630d20ed913c52cf4afb11a3950 Mon Sep 17 00:00:00 2001 From: Mayank Sharma Date: Sun, 6 Sep 2026 10:58:51 +0530 Subject: [PATCH 2/4] style(layout): increase section spacing and revert unrelated formatting in Terminal.style.js Signed-off-by: Mayank Sharma --- .../AnimatedStepsList.style.js | 6 +- src/components/Terminal/Terminal.style.js | 112 +++++++++--------- 2 files changed, 56 insertions(+), 62 deletions(-) diff --git a/src/components/Animated-steps-list/AnimatedStepsList.style.js b/src/components/Animated-steps-list/AnimatedStepsList.style.js index 30b84e2fd0ac20..17ad3d2052e0e8 100644 --- a/src/components/Animated-steps-list/AnimatedStepsList.style.js +++ b/src/components/Animated-steps-list/AnimatedStepsList.style.js @@ -20,7 +20,7 @@ export const AnimatedStepsListWrapper = styled.div` padding-bottom: 395px; } - margin-right: 24px; + margin-right: 64px; @media (max-width: 1119px) { display: none; } @@ -32,7 +32,7 @@ export const AnimatedStepsListWrapper = styled.div` } & .terminal-wrapper { - margin-left: 36px; + margin-left: 80px; position: sticky; top: 148px; align-self: flex-start; @@ -41,7 +41,7 @@ export const AnimatedStepsListWrapper = styled.div` min-width: 0; @media (max-width: 1119px) { - margin-left: 24px; + margin-left: 48px; } @media (max-width: 850px) { diff --git a/src/components/Terminal/Terminal.style.js b/src/components/Terminal/Terminal.style.js index 0c99c5cdf81865..24f97ba75f228e 100644 --- a/src/components/Terminal/Terminal.style.js +++ b/src/components/Terminal/Terminal.style.js @@ -7,7 +7,7 @@ export const TerminalWrapper = styled.div` --gray-7: #f7f7f9; --gray-6: #dcdde0; --gray-5: #bdbec2; - --gray-4: #76767d; + --gray-4: #76767d; --gray-3: #4c4c53; --gray-2: #323339; --gray-1: #1d1e23; @@ -28,7 +28,7 @@ export const TerminalWrapper = styled.div` .title { color: var(--gray-4); - font-family: "Courier New", Courier, monospace; + font-family: 'Courier New', Courier, monospace; font-size: 13.5px; margin: 0 auto; } @@ -65,68 +65,62 @@ export const TerminalWrapper = styled.div` } } - .overflow-wrapper { - width: 100%; - height: 100%; - position: relative; - overflow: scroll; - - /* Hides the scrollbars */ - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ - &::-webkit-scrollbar { - /* Safari */ - -webkit-appearance: none; - width: 0; - height: 0; - } +.overflow-wrapper { + width: 100%; + height: 100%; + position: relative; + overflow: scroll; - .code-wrapper { - pre { - padding: 0; - margin: 0; - width: 100%; - height: 100%; - font-style: normal; - font-weight: normal; - font-size: 12px; - line-height: 27px; - white-space: pre-wrap; - color: ${(props) => props.theme.secondaryColor}; - &.short { - line-height: 16px; - } - &.navy { - color: var(--vagrant-l1); - } - &.gray { - color: var(--gray-5); - } - &.white { - color: var(--white); - } - - overflow-wrap: break-word; - overflow-wrap: anywhere; + /* Hides the scrollbars */ + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + &::-webkit-scrollbar { + /* Safari */ + -webkit-appearance: none; + width: 0; + height: 0; + } + + .code-wrapper { + pre { + padding: 0; + margin: 0; + width: 100%; + height: 100%; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 27px; + white-space: pre-wrap; + color: ${props => props.theme.secondaryColor}; + &.short { + line-height: 16px; + } + &.navy { + color: var(--vagrant-l1); + } + &.gray { + color: var(--gray-5); + } + &.white { + color: var(--white); + } - @media (min-width: 768px) { - font-size: 13.5px; - line-height: 26px; - } + overflow-wrap: anywhere; + + @media (min-width: 768px){ + font-size: 13.5px; + line-height: 26px; } } } +} - .no-scroll-overflow-wrapper { - overflow-x: hidden; +.no-scroll-overflow-wrapper { - .code-wrapper { - bottom: 0; - position: absolute; - min-height: 100%; - width: 100%; - left: 0; - box-sizing: border-box; - } + .code-wrapper { + bottom: 0; + position: absolute; + min-height: 100%; } -`; +}`; From 570d7147d62ef5879b7b6f54d1785c70335a600a Mon Sep 17 00:00:00 2001 From: Mayank Sharma Date: Sun, 6 Sep 2026 11:11:48 +0530 Subject: [PATCH 3/4] style(layout): use rem spacing units in AnimatedStepsList Signed-off-by: Mayank Sharma --- .../Animated-steps-list/AnimatedStepsList.style.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Animated-steps-list/AnimatedStepsList.style.js b/src/components/Animated-steps-list/AnimatedStepsList.style.js index 17ad3d2052e0e8..ef89bb8c02d591 100644 --- a/src/components/Animated-steps-list/AnimatedStepsList.style.js +++ b/src/components/Animated-steps-list/AnimatedStepsList.style.js @@ -20,7 +20,7 @@ export const AnimatedStepsListWrapper = styled.div` padding-bottom: 395px; } - margin-right: 64px; + margin-right: 4rem; @media (max-width: 1119px) { display: none; } @@ -32,7 +32,7 @@ export const AnimatedStepsListWrapper = styled.div` } & .terminal-wrapper { - margin-left: 80px; + margin-left: 5rem; position: sticky; top: 148px; align-self: flex-start; @@ -41,7 +41,7 @@ export const AnimatedStepsListWrapper = styled.div` min-width: 0; @media (max-width: 1119px) { - margin-left: 48px; + margin-left: 3rem; } @media (max-width: 850px) { From 16382179722df143b8e4298cc8ffdb56dd51cd34 Mon Sep 17 00:00:00 2001 From: Mayank Sharma Date: Sun, 6 Sep 2026 11:22:43 +0530 Subject: [PATCH 4/4] style(layout): increase steps container width and optimize section spacing Signed-off-by: Mayank Sharma --- .../Animated-steps-list/AnimatedStepsList.style.js | 6 +++--- .../Animated-steps-list/Steps-list/Step/Step.style.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Animated-steps-list/AnimatedStepsList.style.js b/src/components/Animated-steps-list/AnimatedStepsList.style.js index ef89bb8c02d591..fa4ac5131bf12e 100644 --- a/src/components/Animated-steps-list/AnimatedStepsList.style.js +++ b/src/components/Animated-steps-list/AnimatedStepsList.style.js @@ -20,7 +20,7 @@ export const AnimatedStepsListWrapper = styled.div` padding-bottom: 395px; } - margin-right: 4rem; + margin-right: 2rem; @media (max-width: 1119px) { display: none; } @@ -32,7 +32,7 @@ export const AnimatedStepsListWrapper = styled.div` } & .terminal-wrapper { - margin-left: 5rem; + margin-left: 4rem; position: sticky; top: 148px; align-self: flex-start; @@ -41,7 +41,7 @@ export const AnimatedStepsListWrapper = styled.div` min-width: 0; @media (max-width: 1119px) { - margin-left: 3rem; + margin-left: 2.5rem; } @media (max-width: 850px) { diff --git a/src/components/Animated-steps-list/Steps-list/Step/Step.style.js b/src/components/Animated-steps-list/Steps-list/Step/Step.style.js index a46828975a32f4..e768192ba90f38 100644 --- a/src/components/Animated-steps-list/Steps-list/Step/Step.style.js +++ b/src/components/Animated-steps-list/Steps-list/Step/Step.style.js @@ -1,7 +1,7 @@ import styled from "styled-components"; export const StepWrapper = styled.li` - width: 314px; + width: 24rem; @media (max-width: 850px) { width: unset;