[PR #2153] [MERGED] refactor: improve the mobile layout. #3649

New issue

Closed

opened 2026-03-17 01:14:40 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 01:14:40 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/2153
Author: @joeljstephen
Created: 3/8/2022
Status: ✅ Merged
Merged: 3/21/2022
Merged by: @liyasthomas

Base: main ← Head: refactor/mobile-request-ui

📝 Commits (8)

9a286fe refactor: decluttered response panel and changed navbar layout on mobile
1fe0e10 fix: resolved scrolling issues when adding multiple parameters or headers
99ad5a5 fix: resolved sticky issue in different font sizes and removed comments
16e0796 refactor: added computed value that modifies margin value based on font and viewport
a1e04f7 fix: resolved extra margin on send button and added bg primary to footer
f8a6cca fix: resolved sticky issues in body and raw body panel
37f86ba Merge branch 'main' into refactor/mobile-request-ui
d302b0e fix: proper top margins

📊 Changes

16 files changed (+118 additions, -56 deletions)

View changed files

📝 packages/hoppscotch-app/assets/scss/themes.scss (+15 -0)
📝 packages/hoppscotch-app/components/app/Footer.vue (+2 -2)
📝 packages/hoppscotch-app/components/app/Sidenav.vue (+1 -0)
📝 packages/hoppscotch-app/components/http/Authorization.vue (+10 -13)
📝 packages/hoppscotch-app/components/http/Body.vue (+2 -4)
📝 packages/hoppscotch-app/components/http/BodyParameters.vue (+3 -6)
📝 packages/hoppscotch-app/components/http/Headers.vue (+5 -7)
📝 packages/hoppscotch-app/components/http/Parameters.vue (+2 -4)
📝 packages/hoppscotch-app/components/http/PreRequestScript.vue (+4 -4)
📝 packages/hoppscotch-app/components/http/RawBody.vue (+1 -1)
📝 packages/hoppscotch-app/components/http/Request.vue (+5 -8)
📝 packages/hoppscotch-app/components/http/RequestOptions.vue (+3 -1)
📝 packages/hoppscotch-app/components/http/Tests.vue (+1 -1)
📝 packages/hoppscotch-app/components/http/URLEncodedParams.vue (+1 -1)
📝 packages/hoppscotch-app/layouts/default.vue (+55 -4)
📝 packages/hoppscotch-app/windi.config.js (+8 -0)

📄 Description

Description

Decluttered the request panel and brought the navbar to the bottom in mobile layout.

Checks

My pull request adheres to the code style of this project
My code requires changes to the documentation
I have updated the documentation as required
All the tests have passed

@liyasthomas

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/2153 **Author:** [@joeljstephen](https://github.com/joeljstephen) **Created:** 3/8/2022 **Status:** ✅ Merged **Merged:** 3/21/2022 **Merged by:** [@liyasthomas](https://github.com/liyasthomas) **Base:** `main` ← **Head:** `refactor/mobile-request-ui` --- ### 📝 Commits (8) - [`9a286fe`](https://github.com/hoppscotch/hoppscotch/commit/9a286fe2e4ab68f91226c965aaf340c5254275ec) refactor: decluttered response panel and changed navbar layout on mobile - [`1fe0e10`](https://github.com/hoppscotch/hoppscotch/commit/1fe0e1089c9c2af4457535cdf3bb25c4752a913f) fix: resolved scrolling issues when adding multiple parameters or headers - [`99ad5a5`](https://github.com/hoppscotch/hoppscotch/commit/99ad5a54085d4d55ef1b305e3a3aedeb1e457e51) fix: resolved sticky issue in different font sizes and removed comments - [`16e0796`](https://github.com/hoppscotch/hoppscotch/commit/16e0796c7102ff10020bc7d0020300cd09b32af9) refactor: added computed value that modifies margin value based on font and viewport - [`a1e04f7`](https://github.com/hoppscotch/hoppscotch/commit/a1e04f7444efdf7277337d3128e23a0983546e2c) fix: resolved extra margin on send button and added bg primary to footer - [`f8a6cca`](https://github.com/hoppscotch/hoppscotch/commit/f8a6cca85f64b12ce9877eac6fbdc85e301d68c1) fix: resolved sticky issues in body and raw body panel - [`37f86ba`](https://github.com/hoppscotch/hoppscotch/commit/37f86ba690f5392669231b02c645362ed43376cf) Merge branch 'main' into refactor/mobile-request-ui - [`d302b0e`](https://github.com/hoppscotch/hoppscotch/commit/d302b0e55534a54e24fe539825d275fec5dfd979) fix: proper top margins ### 📊 Changes **16 files changed** (+118 additions, -56 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-app/assets/scss/themes.scss` (+15 -0) 📝 `packages/hoppscotch-app/components/app/Footer.vue` (+2 -2) 📝 `packages/hoppscotch-app/components/app/Sidenav.vue` (+1 -0) 📝 `packages/hoppscotch-app/components/http/Authorization.vue` (+10 -13) 📝 `packages/hoppscotch-app/components/http/Body.vue` (+2 -4) 📝 `packages/hoppscotch-app/components/http/BodyParameters.vue` (+3 -6) 📝 `packages/hoppscotch-app/components/http/Headers.vue` (+5 -7) 📝 `packages/hoppscotch-app/components/http/Parameters.vue` (+2 -4) 📝 `packages/hoppscotch-app/components/http/PreRequestScript.vue` (+4 -4) 📝 `packages/hoppscotch-app/components/http/RawBody.vue` (+1 -1) 📝 `packages/hoppscotch-app/components/http/Request.vue` (+5 -8) 📝 `packages/hoppscotch-app/components/http/RequestOptions.vue` (+3 -1) 📝 `packages/hoppscotch-app/components/http/Tests.vue` (+1 -1) 📝 `packages/hoppscotch-app/components/http/URLEncodedParams.vue` (+1 -1) 📝 `packages/hoppscotch-app/layouts/default.vue` (+55 -4) 📝 `packages/hoppscotch-app/windi.config.js` (+8 -0) </details> ### 📄 Description  ### Description Decluttered the request panel and brought the navbar to the bottom in mobile layout. ### Checks  - [x] My pull request adheres to the code style of this project - [ ] My code requires changes to the documentation - [ ] I have updated the documentation as required - [x] All the tests have passed @liyasthomas --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>