[PR #3272] [CLOSED] fix: ui improvements and remove input autofocus #4312

New issue

Closed

opened 2026-03-17 01:51:39 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 01:51:39 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/3272
Author: @liyasthomas
Created: 8/22/2023
Status: ❌ Closed

Base: release/2023.8.0 ← Head: chore/ui-improvements

📝 Commits (1)

ac609e5 fix: ui improvements and remove input autofocus

📊 Changes

21 files changed (+118 additions, -113 deletions)

View changed files

📝 packages/hoppscotch-common/src/components/app/PaneLayout.vue (+11 -6)
📝 packages/hoppscotch-common/src/components/app/ShortcutsPrompt.vue (+1 -1)
📝 packages/hoppscotch-common/src/components/environments/my/Details.vue (+0 -1)
📝 packages/hoppscotch-common/src/components/environments/my/index.vue (+0 -1)
📝 packages/hoppscotch-common/src/components/environments/teams/Details.vue (+0 -2)
📝 packages/hoppscotch-common/src/components/environments/teams/index.vue (+0 -2)
📝 packages/hoppscotch-common/src/components/graphql/Authorization.vue (+0 -1)
📝 packages/hoppscotch-common/src/components/graphql/RequestOptions.vue (+0 -1)
📝 packages/hoppscotch-common/src/components/http/Authorization.vue (+0 -1)
📝 packages/hoppscotch-common/src/components/http/Body.vue (+0 -1)
📝 packages/hoppscotch-common/src/components/http/BodyParameters.vue (+0 -1)
📝 packages/hoppscotch-common/src/components/http/Headers.vue (+0 -1)
📝 packages/hoppscotch-common/src/components/http/Parameters.vue (+0 -1)
📝 packages/hoppscotch-common/src/components/http/URLEncodedParams.vue (+0 -1)
📝 packages/hoppscotch-common/src/components/settings/Proxy.vue (+14 -13)
📝 packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts (+2 -2)
📝 packages/hoppscotch-common/src/pages/profile.vue (+47 -36)
📝 packages/hoppscotch-common/src/pages/realtime/socketio.vue (+0 -1)
📝 packages/hoppscotch-common/src/pages/realtime/websocket.vue (+32 -29)
📝 packages/hoppscotch-ui/src/components/smart/Modal.vue (+10 -10)

...and 1 more files

📄 Description

`🤖 Generated by Copilot at ac609e5`

Summary

🚚📉🎨

This pull request improves the layout, styling, and functionality of various components in the hoppscotch app. It sets a minimum size for the main and sidebar panes, adjusts the default sizes of the panes, removes unnecessary margins from the tabs, improves the tooltip UI and accessibility, refactors the profile page and the modal component, simplifies the proxy and websocket settings, and moves the shortcuts prompt component to a common location.

We're the masters of the layout, we make the panes align
We slash the margins from the tabs, we optimize the design
We simplify the components, we use the native forms
We refactor and we improve, we code against the norms

Walkthrough

Prevent panes from collapsing too much by adding min-size prop of 25 to Pane components in PaneLayout.vue (link, link, link)
Adjust default values for pane size refs in PaneLayout.vue to improve initial layout and avoid scrolling (link)
Move ShortcutsPrompt component code from ShortcutsPrompt.vue to PaneLayout.vue for easier import and use (link)
Reduce bottom margin of HoppSmartTabs components in various components and pages by removing mb-4 class (link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link)
Simplify Proxy component code in settings/Proxy.vue by replacing HoppSmartInput with native input and form elements (link)
Improve appearance and accessibility of tooltip in cursorTooltipField extension in editor/extensions/HoppEnvironment.ts by removing negative margin classes and using content prop of v-tippy directive (link, link)
Remove unnecessary quotation marks from background-image style in profile.vue (link)
Use content prop of v-tippy directive for verified icon in profile.vue (link)
Replace HoppSmartInput with native input and form elements for display name and email in profile.vue (link, link)
Replace HoppSmartInput with native input and form elements for websocket URL in realtime/websocket.vue (link)
Remove kbd element for ESC key from modal header in Modal.vue (link)
Remove and add trailing commas in defineProps and withDefaults function calls in Modal.vue (link, link)

_{🔄 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/3272 **Author:** [@liyasthomas](https://github.com/liyasthomas) **Created:** 8/22/2023 **Status:** ❌ Closed **Base:** `release/2023.8.0` ← **Head:** `chore/ui-improvements` --- ### 📝 Commits (1) - [`ac609e5`](https://github.com/hoppscotch/hoppscotch/commit/ac609e50423ad3e16b6582aa50f5ed3aabf6465f) fix: ui improvements and remove input autofocus ### 📊 Changes **21 files changed** (+118 additions, -113 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/src/components/app/PaneLayout.vue` (+11 -6) 📝 `packages/hoppscotch-common/src/components/app/ShortcutsPrompt.vue` (+1 -1) 📝 `packages/hoppscotch-common/src/components/environments/my/Details.vue` (+0 -1) 📝 `packages/hoppscotch-common/src/components/environments/my/index.vue` (+0 -1) 📝 `packages/hoppscotch-common/src/components/environments/teams/Details.vue` (+0 -2) 📝 `packages/hoppscotch-common/src/components/environments/teams/index.vue` (+0 -2) 📝 `packages/hoppscotch-common/src/components/graphql/Authorization.vue` (+0 -1) 📝 `packages/hoppscotch-common/src/components/graphql/RequestOptions.vue` (+0 -1) 📝 `packages/hoppscotch-common/src/components/http/Authorization.vue` (+0 -1) 📝 `packages/hoppscotch-common/src/components/http/Body.vue` (+0 -1) 📝 `packages/hoppscotch-common/src/components/http/BodyParameters.vue` (+0 -1) 📝 `packages/hoppscotch-common/src/components/http/Headers.vue` (+0 -1) 📝 `packages/hoppscotch-common/src/components/http/Parameters.vue` (+0 -1) 📝 `packages/hoppscotch-common/src/components/http/URLEncodedParams.vue` (+0 -1) 📝 `packages/hoppscotch-common/src/components/settings/Proxy.vue` (+14 -13) 📝 `packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts` (+2 -2) 📝 `packages/hoppscotch-common/src/pages/profile.vue` (+47 -36) 📝 `packages/hoppscotch-common/src/pages/realtime/socketio.vue` (+0 -1) 📝 `packages/hoppscotch-common/src/pages/realtime/websocket.vue` (+32 -29) 📝 `packages/hoppscotch-ui/src/components/smart/Modal.vue` (+10 -10) _...and 1 more files_ </details> ### 📄 Description  ### <samp>🤖 Generated by Copilot at ac609e5</samp> ### Summary 🚚📉🎨  This pull request improves the layout, styling, and functionality of various components in the hoppscotch app. It sets a minimum size for the main and sidebar panes, adjusts the default sizes of the panes, removes unnecessary margins from the tabs, improves the tooltip UI and accessibility, refactors the profile page and the modal component, simplifies the proxy and websocket settings, and moves the shortcuts prompt component to a common location. > _We're the masters of the layout, we make the panes align_ > _We slash the margins from the tabs, we optimize the design_ > _We simplify the components, we use the native forms_ > _We refactor and we improve, we code against the norms_ ### Walkthrough * Prevent panes from collapsing too much by adding `min-size` prop of `25` to `Pane` components in `PaneLayout.vue` ([link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-4cd3589481c261f8c2b3bb77245961f40bcff482396e38c733c52bb5390ae004L21-R25), [link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-4cd3589481c261f8c2b3bb77245961f40bcff482396e38c733c52bb5390ae004R32), [link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-4cd3589481c261f8c2b3bb77245961f40bcff482396e38c733c52bb5390ae004L36-R41)) * Adjust default values for pane size refs in `PaneLayout.vue` to improve initial layout and avoid scrolling ([link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-4cd3589481c261f8c2b3bb77245961f40bcff482396e38c733c52bb5390ae004L81-R89)) * Move `ShortcutsPrompt` component code from `ShortcutsPrompt.vue` to `PaneLayout.vue` for easier import and use ([link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-f8bd7cb85f1791c09751fb79b298916a921400887d095aeb8df31651eb9a33cdL3-R3)) * Reduce bottom margin of `HoppSmartTabs` components in various components and pages by removing `mb-4` class ([link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-60b0fda181be7485343de8b7ca9866c0c60574fb4a2536986ac33d307bb17b7fL84), [link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-c7f53f736feb45c38d9bb8acf51f0888741ffc2430f1848ac7ec9438a71bb16aL45), [link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-9d926b504224feca149e7e9b1ccaaa7dd84afed1cbaa1adf5f80b1f01bc4ff2bL89), [link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-9d926b504224feca149e7e9b1ccaaa7dd84afed1cbaa1adf5f80b1f01bc4ff2bL95), [link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-ffc81b59c034424e1313bf3401e88b6c8844cb5912d13cc23413e5dbc5c977e6L57), [link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-ffc81b59c034424e1313bf3401e88b6c8844cb5912d13cc23413e5dbc5c977e6L67), [link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-ff8bedda71a90ead557a88ca19c335becf4d9bf0328f8add3a32ebbaf7e12b40L130), [link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-dc73021c5a7f28ae97f5e18f0ae972e7dd7e350519ae2ebd17402fafc39a32b9L302), [link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-7234d52bfefc74e0586b27afde3a03bc7d499520a208531537e009e909f96295L129), [link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-c235f6c3470afa29d9614fb8a947792c97e841ec5d8fa68b25d603c11827e838L120), [link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-7d787852e8c0e007752c49536487b4ea3d4249a20c03a693ceea993b65cd62ebL165), [link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-a30e37054e33fe23ef306d00f290911a6f3c59f6e4436f950606154ab84cb601L216), [link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-1ab369c97698cbd2361bfcb313aaf46d50e7fbe690dc8faf60f26d946517bbe4L164), [link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-2d7c12be9e884bf358aa619bf6badd67212e00eeb77822ea23ee5b55a48001a0L156), [link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-17cef831ef50df46b58d432f004a66f1e5972f7ad7636cbfb2075c5830f3f335L19), [link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-f5030fac4d1df23f22b3cbd84397c73583fd200359c5993c8d0835581595a395L206)) * Simplify `Proxy` component code in `settings/Proxy.vue` by replacing `HoppSmartInput` with native `input` and `form` elements ([link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-340780d98afbf971007f69d8776f0c779850afd504c299ffa64466412ab7f43bL22-R35)) * Improve appearance and accessibility of tooltip in `cursorTooltipField` extension in `editor/extensions/HoppEnvironment.ts` by removing negative margin classes and using `content` prop of `v-tippy` directive ([link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-7a8f789eae1d1f6baadadbf622d120c73ebb34e6c701982e799552716a4a6deeL74-R74), [link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-7a8f789eae1d1f6baadadbf622d120c73ebb34e6c701982e799552716a4a6deeL91-R91)) * Remove unnecessary quotation marks from `background-image` style in `profile.vue` ([link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-17cef831ef50df46b58d432f004a66f1e5972f7ad7636cbfb2075c5830f3f335L26-R25)) * Use `content` prop of `v-tippy` directive for `verified` icon in `profile.vue` ([link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-17cef831ef50df46b58d432f004a66f1e5972f7ad7636cbfb2075c5830f3f335L58-R60)) * Replace `HoppSmartInput` with native `input` and `form` elements for display name and email in `profile.vue` ([link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-17cef831ef50df46b58d432f004a66f1e5972f7ad7636cbfb2075c5830f3f335L103-R125), [link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-17cef831ef50df46b58d432f004a66f1e5972f7ad7636cbfb2075c5830f3f335L125-R152)) * Replace `HoppSmartInput` with native `input` and `form` elements for websocket URL in `realtime/websocket.vue` ([link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-d447b4735afbfd731bfea46681329ba2dd3f3368cff0d36053cab9ce86c19734L7-R38)) * Remove `kbd` element for `ESC` key from modal header in `Modal.vue` ([link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-95d91270b3fa92ae481c28a665589762cfb320f2ca5e0523ffce6096ec8627bcL47)) * Remove and add trailing commas in `defineProps` and `withDefaults` function calls in `Modal.vue` ([link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-95d91270b3fa92ae481c28a665589762cfb320f2ca5e0523ffce6096ec8627bcL112-R119), [link](https://github.com/hoppscotch/hoppscotch/pull/3272/files?diff=unified&w=0#diff-95d91270b3fa92ae481c28a665589762cfb320f2ca5e0523ffce6096ec8627bcL126-R126)) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>