fix codeblock horizontal-scroll issue

[ashok-2003]

Description

This PR fixes #6488

Notes for Reviewers
Added :
white-space: pre-wrap; - to ensure text-wrap to words
word-break: break-word; - to ensure that long URL will break and wrap

Screen.Recording.2025-05-27.014112.mp4

Signed commits

• Yes, I signed my commits.

[ashok-2003]

here we go @vr-varad , please review the changes.

[l5io]

🚀 Preview for commit e3137b3 at: https://68357666c3c24a919a437dff--layer5.netlify.app

[ashok-2003]

Umm, the single line looks kind of bad without a scrollbar. Is this the expected behavior, or am I missing something?

[vr-varad]

hey @ashok-2003 any update on the pr?

[ashok-2003]

Hey @vr-varad, sorry I couldn’t look into the issue today — I have my end-sem exam scheduled for tomorrow. I’ll be able to tackle it after that. Hope you understand!
Also, I’ve attached an image — is this the kind of result we’re aiming for? If so, we might just need to adjust the z-index to fix the remaining part. A quick review would help — I’ll push the PR based on your feedback.

is it should be single line like this ? rest i will adjust based on feedback.

[vr-varad]

nope!! the earlier was better @ashok-2003

[ashok-2003]

Hey @vr-varad, I’m a bit confused — could you point out the image or reference we should proceed with? Are you referring to the multi-line version or the single-line one?

[vr-varad]

lets get others' review on multi line one and make changes accordingly

[l5io]

🚀 Preview for commit e3137b3 at: https://68387cc5083d3e04e4641cfa--layer5.netlify.app

[M-DEV-1]

This would be the ideal case, for the codeblock, with some minor fixes to the position of the copy button.

There's a video with the expected changes in the issue description @ashok-2003

[ashok-2003]

Okay @M-DEV-1, I’ll try to implement that.
But my main concern is how it should behave on mobile screens.
If we go with a single line layout without a scrollbar, it might overflow the screen.

[vr-varad]

add the scroll below a curtain screen width when the text starts overflow.
Hope you understand,

[l5io]

🚀 Preview for commit c2548f7 at: https://683a19b15bf7e264e8b327d1--layer5.netlify.app

[ashok-2003]

@vr-varad , @M-DEV-1, looking forward for review !

[M-DEV-1]

hi @ashok-2003, LGTM on desktop view but you should also take a look on how it's renderedn in mobile view.

[ashok-2003]

Hey @M-DEV-1, I’ve also checked for smaller screens. I implemented the following media query:

@media (max-width: 1024px) {
display: block;
overflow-x: auto;
}
This ensures that below that screen width, a scrollbar appears so the content doesn’t overflow.

[vr-varad]

dont use media query use theme breakpoints. @ashok-2003

[ashok-2003]

Hey @vr-varad, I went deeper into the codebase and used the AnimatedStepsListWrapper breakpoint. Unfortunately, I couldn’t find any special theme breakpoints. Here's the code for both AnimatedStepsListWrapper and MesheryWrapper styles—I noticed there’s some inconsistency in their media queries as well. Since I couldn’t find any custom theme breakpoints, I’ve temporarily used the same breakpoints as in AnimatedStepsListWrapper to maintain uniformity. Hope that works for now. Let me know if you find anything different.

[l5io]

🚀 Preview for commit 13518c4 at: https://683f8cf88154ee450d7eb553--layer5.netlify.app

[LibenHailu]

LGTM!

[ashok-2003]

Hey @vr-varad, @M-DEV-1, I think it's working perfectly fine. Are we good to go on this one now?
please review at
https://683f8cf88154ee450d7eb553--layer5.netlify.app/cloud-native-management/meshery/getting-started

[M-DEV-1]

Looks good, but it has more vertical padding than necessary? I think it would be nice to have some horizontal padding, provided that it doesn't break. @ashok-2003 @vr-varad thoughts?

[ashok-2003]

@M-DEV-1 , extra vertical padding coming from the pre div render inside the pre div. May be extra horizontal padding might make it look more chunkier. might not be good idea(According to me ). or Might be !

[ashok-2003]

Thanks @M-DEV-1. As discussed in the meeting, I’ve undone the changes made directly to the code block and ensured that the updates remain limited to the Hero section only. Please review!

here is the video -

Screen.Recording.2025-06-11.113949.mp4

[l5io]

🚀 Preview for commit 12fbb92 at: https://6849b4178f84ef3e66119055--layer5.netlify.app

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[M-DEV-1]

Hi @ashok-2003, looks good to me. Thanks for restricting the changes to just that specific page component.

[l5io]

🚀 Preview for commit a458397 at: https://685e5f0d87e4de40ab1bcebb--layer5.netlify.app

[vishalvivekm]

@ashok-2003 it's not about the code block in hero section only.
In installing section, down the page, where we need to have similar consistent behavior.

[vishalvivekm]

Thanks a lot for working on this @ashok-2003, incorporating multiple rounds of feedback.
However, I agree with @leecalcote here:

we don't need this line-wrapped. Sticking with one line is ideal. It's ok if the overflow isn't visible. The scrollbar height can be cut in half and/or removed instead.

• the scrollbar height seems reduced already

Again don't think, this is an valid issue which needs fixed necessarily.
Thank you @vr-varad @M-DEV-1 @LibenHailu for engaging here.