[GH-ISSUE #388] [UX] Improve responsive breaking points #142

New issue

Closed

opened 2026-03-16 13:40:26 +03:00 by kerem · 3 comments

kerem commented

2026-03-16 13:40:26 +03:00

Owner

Originally created by @andreujuanc on GitHub (Dec 1, 2019).
Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/388

Is your feature request related to a problem? Please describe.
When having a small window there is a point in which the boxes for method, host, path and label should break, but they dont. And make's it not usable.

Describe the solution you'd like
Improve the breaking points of the styles

Describe alternatives you've considered
Change the font size, but then I cant read 😛

Additional context

Originally created by @andreujuanc on GitHub (Dec 1, 2019). Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/388 **Is your feature request related to a problem? Please describe.** When having a small window there is a point in which the boxes for method, host, path and label should break, but they dont. And make's it not usable. **Describe the solution you'd like** Improve the breaking points of the styles **Describe alternatives you've considered** Change the font size, but then I cant read :stuck_out_tongue: **Additional context** ![image](https://user-images.githubusercontent.com/360052/69916061-6e63d200-1456-11ea-9c7b-8c45d8ce17ad.png)

kerem closed this issue

2026-03-16 13:40:31 +03:00

kerem commented

2026-03-16 13:40:37 +03:00

Author

Owner

@aksappy commented on GitHub (Dec 2, 2019):

@andreujuanc What size is this screenshot from?

@aksappy commented on GitHub (Dec 2, 2019): @andreujuanc What size is this screenshot from?

kerem commented

2026-03-16 13:40:42 +03:00

Author

Owner

@andreujuanc commented on GitHub (Dec 2, 2019):

Some more info:
There is a break at 768px
Anything smaller than 1500px will require to break in a different way than "mobile".

So, to answer your question, the size of the screenshot is from 768 to aprox 1500.

This is what I get on 1500:

As you can see, you can barely see the contents of the input boxes.

@andreujuanc commented on GitHub (Dec 2, 2019): Some more info: There is a break at 768px Anything smaller than 1500px will require to break in a different way than "mobile". So, to answer your question, the size of the screenshot is from 768 to aprox 1500. This is what I get on 1500: ![image](https://user-images.githubusercontent.com/360052/69943924-4f148580-14e6-11ea-84df-5013d843d25e.png) As you can see, you can barely see the contents of the input boxes.

kerem commented

2026-03-16 13:40:47 +03:00

Author

Owner

@andreujuanc commented on GitHub (Dec 2, 2019):

Just setting flow wrap on that ul and some flex-grow.

@andreujuanc commented on GitHub (Dec 2, 2019): Just setting flow wrap on that `ul` and some `flex-grow`. ![image](https://user-images.githubusercontent.com/360052/69946619-41fa9500-14ec-11ea-93ee-f06db91947aa.png) ![image](https://user-images.githubusercontent.com/360052/69946646-56d72880-14ec-11ea-8a23-92abf9d63dce.png)

kerem referenced this issue

2026-03-17 00:08:35 +03:00

[PR #142] [MERGED] Code highlighting #2440