[PR #3261] [MERGED] fix: placeholder size and text overflow on tab head #4307

New issue

Closed

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

kerem commented

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

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/3261
Author: @liyasthomas
Created: 8/18/2023
Status: ✅ Merged
Merged: 8/18/2023
Merged by: @AndrewBastin

Base: release/2023.8.0 ← Head: fix/placeholder-truncate

📝 Commits (1)

2c8c0c3 fix: placeholder size and text overflow

📊 Changes

10 files changed (+22 additions, -13 deletions)

View changed files

📝 packages/hoppscotch-common/assets/scss/styles.scss (+1 -0)
📝 packages/hoppscotch-common/src/components.d.ts (+1 -0)
📝 packages/hoppscotch-common/src/components/app/Inspection.vue (+1 -1)
📝 packages/hoppscotch-common/src/components/http/ResponseMeta.vue (+2 -0)
📝 packages/hoppscotch-common/src/components/http/TabHead.vue (+1 -1)
📝 packages/hoppscotch-common/src/components/smart/EnvInput.vue (+7 -2)
📝 packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts (+4 -4)
📝 packages/hoppscotch-sh-admin/assets/scss/styles.scss (+1 -0)
📝 packages/hoppscotch-ui/src/assets/scss/styles.scss (+1 -0)
📝 packages/hoppscotch-ui/src/components/smart/Placeholder.vue (+3 -5)

📄 Description

`🤖 Generated by Copilot at 5c360a9`

Summary

📐🌎🖼️

This pull request improves the UI and UX of various components in the hoppscotch project, such as the EnvInput, the ResponseMeta, and the Placeholder components. It also updates the icons for the environment editor and adds the truncate utility class to the app-inspection component in different packages. These changes aim to make the components more responsive, accessible, consistent, and readable.

This pull request has many changes
To improve the UI in stages
It adds truncate and large
To components that need a charge
And updates the icons and pages

Walkthrough

Add truncate utility class to app-inspection component to improve readability and layout of inspection results (link, link, link)
Limit maximum width and enable horizontal scrolling of app-inspection component to make it responsive and accessible (link, link, link)
Increase button size in ResponseMeta.vue to make them more prominent and consistent (link, link)
Prevent tab name from wrapping to the next line in TabHead.vue to make the tab bar more compact and neat (link)
Add vertical divider between editor and inspection sections in EnvInput.vue to improve separation and accessibility (link)
Use custom font icons instead of material icons and change icon names to make them more consistent and clear in HoppEnvironment.ts (link, link)
Increase image size and add vertical margin in Placeholder.vue to make the image more visible and balanced (link, link)
Remove empty line from Placeholder.vue to remove unnecessary whitespace and make the code more concise and clean (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/3261 **Author:** [@liyasthomas](https://github.com/liyasthomas) **Created:** 8/18/2023 **Status:** ✅ Merged **Merged:** 8/18/2023 **Merged by:** [@AndrewBastin](https://github.com/AndrewBastin) **Base:** `release/2023.8.0` ← **Head:** `fix/placeholder-truncate` --- ### 📝 Commits (1) - [`2c8c0c3`](https://github.com/hoppscotch/hoppscotch/commit/2c8c0c3a6012d7dc7740bb47f68dd637f47e0d7d) fix: placeholder size and text overflow ### 📊 Changes **10 files changed** (+22 additions, -13 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/assets/scss/styles.scss` (+1 -0) 📝 `packages/hoppscotch-common/src/components.d.ts` (+1 -0) 📝 `packages/hoppscotch-common/src/components/app/Inspection.vue` (+1 -1) 📝 `packages/hoppscotch-common/src/components/http/ResponseMeta.vue` (+2 -0) 📝 `packages/hoppscotch-common/src/components/http/TabHead.vue` (+1 -1) 📝 `packages/hoppscotch-common/src/components/smart/EnvInput.vue` (+7 -2) 📝 `packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts` (+4 -4) 📝 `packages/hoppscotch-sh-admin/assets/scss/styles.scss` (+1 -0) 📝 `packages/hoppscotch-ui/src/assets/scss/styles.scss` (+1 -0) 📝 `packages/hoppscotch-ui/src/components/smart/Placeholder.vue` (+3 -5) </details> ### 📄 Description  ### <samp>🤖 Generated by Copilot at 5c360a9</samp> ### Summary 📐🌎🖼️  This pull request improves the UI and UX of various components in the `hoppscotch` project, such as the `EnvInput`, the `ResponseMeta`, and the `Placeholder` components. It also updates the icons for the environment editor and adds the `truncate` utility class to the `app-inspection` component in different packages. These changes aim to make the components more responsive, accessible, consistent, and readable. > _This pull request has many changes_ > _To improve the UI in stages_ > _It adds `truncate` and `large`_ > _To components that need a charge_ > _And updates the icons and pages_ ### Walkthrough * Add `truncate` utility class to `app-inspection` component to improve readability and layout of inspection results ([link](https://github.com/hoppscotch/hoppscotch/pull/3261/files?diff=unified&w=0#diff-d3d67d4f57af5b5dea2f42b2746e17dca05e7b90714a231135dbab853f11d05fR224), [link](https://github.com/hoppscotch/hoppscotch/pull/3261/files?diff=unified&w=0#diff-e170c4199239be268cc69dd5a94f99997915f9648801e39f3d84a6c1d9c54063R224), [link](https://github.com/hoppscotch/hoppscotch/pull/3261/files?diff=unified&w=0#diff-5bf1f6af0d1183005848e78500dc64e5f9b6a28e1f905530faae464b470d58ceR224)) * Limit maximum width and enable horizontal scrolling of `app-inspection` component to make it responsive and accessible ([link](https://github.com/hoppscotch/hoppscotch/pull/3261/files?diff=unified&w=0#diff-50ac3e0294c3007185c20899f82bace97cbd1e0bbfd03ba514fe7c1acecfbf00L34-R34), [link](https://github.com/hoppscotch/hoppscotch/pull/3261/files?diff=unified&w=0#diff-77b8f4b02b324137697f8b9f9666a4109da9f05ffca983065e49f7ff302de548L3-R5), [link](https://github.com/hoppscotch/hoppscotch/pull/3261/files?diff=unified&w=0#diff-77b8f4b02b324137697f8b9f9666a4109da9f05ffca983065e49f7ff302de548L13-R18)) * Increase button size in `ResponseMeta.vue` to make them more prominent and consistent ([link](https://github.com/hoppscotch/hoppscotch/pull/3261/files?diff=unified&w=0#diff-ed20f7f0c2a9b694a71350a82e926f3107da5815d4e8660dc222da2bec4ce04bR20), [link](https://github.com/hoppscotch/hoppscotch/pull/3261/files?diff=unified&w=0#diff-ed20f7f0c2a9b694a71350a82e926f3107da5815d4e8660dc222da2bec4ce04bR30)) * Prevent tab name from wrapping to the next line in `TabHead.vue` to make the tab bar more compact and neat ([link](https://github.com/hoppscotch/hoppscotch/pull/3261/files?diff=unified&w=0#diff-139aac9bae1f9fc5ca0792589a9398f40bbbbca50c07908c6e026ee737bcb347L24-R24)) * Add vertical divider between editor and inspection sections in `EnvInput.vue` to improve separation and accessibility ([link](https://github.com/hoppscotch/hoppscotch/pull/3261/files?diff=unified&w=0#diff-77b8f4b02b324137697f8b9f9666a4109da9f05ffca983065e49f7ff302de548L3-R5)) * Use custom font icons instead of material icons and change icon names to make them more consistent and clear in `HoppEnvironment.ts` ([link](https://github.com/hoppscotch/hoppscotch/pull/3261/files?diff=unified&w=0#diff-7a8f789eae1d1f6baadadbf622d120c73ebb34e6c701982e799552716a4a6deeL74-R76), [link](https://github.com/hoppscotch/hoppscotch/pull/3261/files?diff=unified&w=0#diff-7a8f789eae1d1f6baadadbf622d120c73ebb34e6c701982e799552716a4a6deeL91-R91)) * Increase image size and add vertical margin in `Placeholder.vue` to make the image more visible and balanced ([link](https://github.com/hoppscotch/hoppscotch/pull/3261/files?diff=unified&w=0#diff-43204d0417f2efef3de79695998f89679d57fe1b1123c87e5676525c01f24a50L7-R14), [link](https://github.com/hoppscotch/hoppscotch/pull/3261/files?diff=unified&w=0#diff-43204d0417f2efef3de79695998f89679d57fe1b1123c87e5676525c01f24a50R31)) * Remove empty line from `Placeholder.vue` to remove unnecessary whitespace and make the code more concise and clean ([link](https://github.com/hoppscotch/hoppscotch/pull/3261/files?diff=unified&w=0#diff-43204d0417f2efef3de79695998f89679d57fe1b1123c87e5676525c01f24a50L22)) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>