[UI] [UX] Allow app to take width of browser

[sheecegardezi]

Is your feature request related to a problem? Please describe.

I want to see the complete strings for Path and URL under the Response section. Even if I increase the size of the browser the app keeps a fixed width.

Describe the solution you'd like

In file default.vue
.......
header,
#main,
footer {
margin: 0 auto;
max-width: 1200px;
}
.....
I want an option to unset max-width property.

Alternative solutions or features you've considered.
Commented out this property

[liyasthomas]

Yeah! That's okay to consider. Anyway I'm redesigning the whole UI with a 3 column design.

[History, Collections] on left
[Request, Auth, Headers, Params] on middle
Sticky [Response] on right

[sheecegardezi]

Can I be assigned to implement this feature?

[liyasthomas]

I will ping you @sheecegardezi after deploying the initial UI update today itself. Only proceed after that.

[liyasthomas]

@sheecegardezi Initial update is deployed to production 🔥

Now we can work on it! For more communications, join our public Telegram group: https://t.me/postwoman_app or Discord Server: https://discord.gg/GAMWxmR

[AtomicMaya]

UI is scrunched and overlaps on mobile devices (Android).

Steps to reproduce :

• Get a phone
• Load up postwoman.web.app on a browser
• Scroll

[liyasthomas]

Will look into it ASAP

[liyasthomas]

@AtomicNicos do a hard refresh and check whether the issue persist.

[liyasthomas]

@sheecegardezi any suggestions for the UI?

[NBTX]

@liyasthomas for the nav bar - perhaps some more padding at the top and a massive z-index so the other elements don't go on to of it.

Otherwise, it's just a case of looking through on mobile and seeing which components need refining I guess.

[liyasthomas]

I can't reproduce any bugs on my mobile 😕
Everything seems to be perfect here! Otherwise I wouldn't have pushed to production. @sheecegardezi help me out to find that bug.

[sheecegardezi]

I will test it out today and update.

[sheecegardezi]

• App does take the width of browsers in desktop
• For me postwoman.web.app did not load on Chrome iPhone 6s, I mimicked the change in behaviors on the desktop by rooming-in:

• The boxed icons break into rows as zoom was increased, One solution could be collapsing the boxed icons in "3 vertical dots" drop-down-menu
• Maybe along with the vertical line identify Collection, folder, and request also having line horizontal line would make it easy to identify which option belongs to which category

[liyasthomas]

Thanks for the quick response and suggestions! Will look into it ASAP.

[liyasthomas]

@all-contributors please add @liyasthomas for code

[allcontributors]

@liyasthomas

I've put up a pull request to add @liyasthomas! 🎉

[liyasthomas]

@all-contributors please add @NBTX for code

[allcontributors]

@liyasthomas

I've put up a pull request to add @NBTX! 🎉

[liyasthomas]

@all-contributors please add @larouxn for code

[allcontributors]

@liyasthomas

I've put up a pull request to add @larouxn! 🎉

[liyasthomas]

@all-contributors please add @yubathom @nickpalenchar @terranblake @AndrewBastin @vlad0337187 @izerozlu @JacobAnavisca @nityanandagohain @hosseinnedaee for code

[allcontributors]

@liyasthomas

I've put up a pull request to add @yubathom! 🎉

[liyasthomas]

@all-contributors please add @nickpalenchar for code

[allcontributors]

@liyasthomas

I've put up a pull request to add @nickpalenchar! 🎉

[liyasthomas]

@all-contributors please add @terranblake for code

[allcontributors]

@liyasthomas

I've put up a pull request to add @terranblake! 🎉

[liyasthomas]

@all-contributors please add @AndrewBastin for code

[allcontributors]

@liyasthomas

I've put up a pull request to add @AndrewBastin! 🎉

[liyasthomas]

@all-contributors please add @vlad0337187 for code

[allcontributors]

@liyasthomas

I've put up a pull request to add @vlad0337187! 🎉

[liyasthomas]

@all-contributors please add @izerozlu for code

[allcontributors]

@liyasthomas

I've put up a pull request to add @izerozlu! 🎉

[liyasthomas]

@all-contributors please add @JacobAnavisca for code

[allcontributors]

@liyasthomas

I've put up a pull request to add @JacobAnavisca! 🎉

[liyasthomas]

@all-contributors please add @nityanandagohain for code

[allcontributors]

@liyasthomas

I've put up a pull request to add @nityanandagohain! 🎉

[liyasthomas]

@all-contributors please add @hosseinnedaee for code

[allcontributors]

@liyasthomas

I've put up a pull request to add @hosseinnedaee! 🎉

[liyasthomas]

@all-contributors please add @liyasthomas for design

[allcontributors]

@liyasthomas

I've put up a pull request to add @liyasthomas! 🎉