Ensure Full Command Visibility in Installation Terminal

[Jeffrin2005]

Description

The command box was long for the box, users needs to scroll horizontally to see the entire command. This is inconvenient because users couldn't see the full command at once.

https://layer5.io/cloud-native-management/meshery/getting-started

https://github.com/user-attachments/assets/f16e0f2e-1a29-463e-b648-0f5a9bae532d

Expected Behavior

Making the box wider so the entire command fits without scrolling

https://github.com/user-attachments/assets/2bbbb4a0-36c8-4ef1-b954-8057d41e3524

Screenshots

Environment:

• Host OS:
• Browser:

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

[Jeffrin2005]

Good First issue.

[divyansh-prks]

can i take this issue ?

[huzfm]

Can this be assigned to me

[vr-varad]

@ashok-2003 You could work on this

[ashok-2003]

I think this might break on smaller screens. Should we consider allowing the code to wrap into multiple lines to accommodate the full command? @vr-varad

[vr-varad]

ur call make a pr with this and lets see what can be done next

[ashok-2003]

sure :)

[ashok-2003]

how this looks to you ? @vr-varad ,

https://github.com/user-attachments/assets/c3c06863-cfd7-453e-92b5-9671cc521ac4

[vr-varad]

it would be good if u open the pr to review what changes u made @ashok-2003

[leecalcote]

@LibenHailu, 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.

[LibenHailu]

Hi @leecalcote, I am having an issue with my laptop It is crashing when I try to run the project, I think the behavior is on chrome, It looks good on firefox, I think the behavior emerges from Highlight component, maybe @ashok-2003 have you tried it with the default props if it looks good we can stick to that, it should look something like this import Highlight, { defaultProps } from "prism-react-renderer"; <Highlight {...defaultProps} theme={theme} code={code} language="jsx">

[ashok-2003]

Hey @LibenHailu, for the issue you're facing, you might want to check the Slack conversation — it could be helpful. Also, thanks for your suggestion! I'll try implementing it and let you know how it goes.

[LibenHailu]

Thank you @ashok-2003!

[stale[bot]]

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.

[vishalvivekm]

Closed in support of: https://github.com/layer5io/layer5/pull/6494#issuecomment-3015124617