[PR #3260] [MERGED] Polish Environment Selector #4309

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/3260
Author: @liyasthomas
Created: 8/17/2023
Status: ✅ Merged
Merged: 8/17/2023
Merged by: @AndrewBastin

Base: release/2023.8.0 ← Head: polish/environment-selector

📝 Commits (1)

c1ff4f3 chore: minor ui improvements

📊 Changes

4 files changed (+37 additions, -18 deletions)

View changed files

📝 packages/hoppscotch-common/assets/scss/styles.scss (+6 -1)
📝 packages/hoppscotch-common/src/components/environments/Selector.vue (+19 -15)
📝 packages/hoppscotch-sh-admin/assets/scss/styles.scss (+6 -1)
📝 packages/hoppscotch-ui/src/assets/scss/styles.scss (+6 -1)

📄 Description

`🤖 Generated by Copilot at c1ff4f3`

Summary

🎨📱🛠️

This pull request enhances the tippy popover component used in various parts of the hoppscotch app. It adds utility classes and selectors to the styles.scss files of the hoppscotch-common, hoppscotch-sh-admin, and hoppscotch-ui packages to improve the popover's responsiveness and layout. It also improves the environment selector and the environment variable table in the Selector.vue component of the hoppscotch-common package.

We are the masters of the tippy popover
We make it fit and look good on any screen
We are the lords of the environment selector
We control the variables and the edit scene

Walkthrough

Limit the width of the tippy popover component to 45% of the viewport width using the max-w-[45vw] utility class, to prevent overflow on smaller devices or long content (link, link, link)
Display the direct child span elements of the tippy popover component as block-level elements using the block utility class, to avoid wrapping or alignment issues (link, link, link)
Remove the border below the environment selector button in Selector.vue, to make it consistent with the rest of the UI and reduce clutter (link)
Apply a conditional background color to the tabs container element in Selector.vue, based on the workspace type or team selection, using a ternary expression and the bg-primaryLight utility class, to provide a visual cue to the user and match the design mockups (link)
Make the environment variable table more responsive and adaptable to different screen sizes and content lengths, by using the w-1/4 min-w-32 and w-full min-w-32 utility classes for the name and value span elements, instead of the fixed w-20 and w-36 classes (link, link, link, link)
Add some spacing between the environment list header and the variable form in Selector.vue, by using the mt-2 utility class for the header element, and remove the unnecessary padding classes from the header element (link)
Disable the edit button in the environment list header in Selector.vue, when there are no environment variables, by using the :disabled prop of the HoppButtonSecondary component, to prevent user confusion and indicate the state of the list (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/3260 **Author:** [@liyasthomas](https://github.com/liyasthomas) **Created:** 8/17/2023 **Status:** ✅ Merged **Merged:** 8/17/2023 **Merged by:** [@AndrewBastin](https://github.com/AndrewBastin) **Base:** `release/2023.8.0` ← **Head:** `polish/environment-selector` --- ### 📝 Commits (1) - [`c1ff4f3`](https://github.com/hoppscotch/hoppscotch/commit/c1ff4f38affc29c16d4d4cb8f5373e5a333ec55f) chore: minor ui improvements ### 📊 Changes **4 files changed** (+37 additions, -18 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/assets/scss/styles.scss` (+6 -1) 📝 `packages/hoppscotch-common/src/components/environments/Selector.vue` (+19 -15) 📝 `packages/hoppscotch-sh-admin/assets/scss/styles.scss` (+6 -1) 📝 `packages/hoppscotch-ui/src/assets/scss/styles.scss` (+6 -1) </details> ### 📄 Description  ### <samp>🤖 Generated by Copilot at c1ff4f3</samp> ### Summary 🎨📱🛠️  This pull request enhances the tippy popover component used in various parts of the hoppscotch app. It adds utility classes and selectors to the `styles.scss` files of the `hoppscotch-common`, `hoppscotch-sh-admin`, and `hoppscotch-ui` packages to improve the popover's responsiveness and layout. It also improves the environment selector and the environment variable table in the `Selector.vue` component of the `hoppscotch-common` package. > _We are the masters of the tippy popover_ > _We make it fit and look good on any screen_ > _We are the lords of the environment selector_ > _We control the variables and the edit scene_ ### Walkthrough * Limit the width of the tippy popover component to 45% of the viewport width using the `max-w-[45vw]` utility class, to prevent overflow on smaller devices or long content ([link](https://github.com/hoppscotch/hoppscotch/pull/3260/files?diff=unified&w=0#diff-d3d67d4f57af5b5dea2f42b2746e17dca05e7b90714a231135dbab853f11d05fL193-R197), [link](https://github.com/hoppscotch/hoppscotch/pull/3260/files?diff=unified&w=0#diff-e170c4199239be268cc69dd5a94f99997915f9648801e39f3d84a6c1d9c54063L193-R197), [link](https://github.com/hoppscotch/hoppscotch/pull/3260/files?diff=unified&w=0#diff-5bf1f6af0d1183005848e78500dc64e5f9b6a28e1f905530faae464b470d58ceL193-R197)) * Display the direct child span elements of the tippy popover component as block-level elements using the `block` utility class, to avoid wrapping or alignment issues ([link](https://github.com/hoppscotch/hoppscotch/pull/3260/files?diff=unified&w=0#diff-d3d67d4f57af5b5dea2f42b2746e17dca05e7b90714a231135dbab853f11d05fR205-R208), [link](https://github.com/hoppscotch/hoppscotch/pull/3260/files?diff=unified&w=0#diff-e170c4199239be268cc69dd5a94f99997915f9648801e39f3d84a6c1d9c54063R205-R208), [link](https://github.com/hoppscotch/hoppscotch/pull/3260/files?diff=unified&w=0#diff-5bf1f6af0d1183005848e78500dc64e5f9b6a28e1f905530faae464b470d58ceR205-R208)) * Remove the border below the environment selector button in `Selector.vue`, to make it consistent with the rest of the UI and reduce clutter ([link](https://github.com/hoppscotch/hoppscotch/pull/3260/files?diff=unified&w=0#diff-584d8291b417c80e6df02186ce776cf6bf6bb10c3a9627c2512fbb0ac34fa664L12-R12)) * Apply a conditional background color to the tabs container element in `Selector.vue`, based on the workspace type or team selection, using a ternary expression and the `bg-primaryLight` utility class, to provide a visual cue to the user and match the design mockups ([link](https://github.com/hoppscotch/hoppscotch/pull/3260/files?diff=unified&w=0#diff-584d8291b417c80e6df02186ce776cf6bf6bb10c3a9627c2512fbb0ac34fa664L53-R57)) * Make the environment variable table more responsive and adaptable to different screen sizes and content lengths, by using the `w-1/4 min-w-32` and `w-full min-w-32` utility classes for the name and value span elements, instead of the fixed `w-20` and `w-36` classes ([link](https://github.com/hoppscotch/hoppscotch/pull/3260/files?diff=unified&w=0#diff-584d8291b417c80e6df02186ce776cf6bf6bb10c3a9627c2512fbb0ac34fa664L192-R201), [link](https://github.com/hoppscotch/hoppscotch/pull/3260/files?diff=unified&w=0#diff-584d8291b417c80e6df02186ce776cf6bf6bb10c3a9627c2512fbb0ac34fa664L206-R213), [link](https://github.com/hoppscotch/hoppscotch/pull/3260/files?diff=unified&w=0#diff-584d8291b417c80e6df02186ce776cf6bf6bb10c3a9627c2512fbb0ac34fa664L243-R252), [link](https://github.com/hoppscotch/hoppscotch/pull/3260/files?diff=unified&w=0#diff-584d8291b417c80e6df02186ce776cf6bf6bb10c3a9627c2512fbb0ac34fa664L257-R264)) * Add some spacing between the environment list header and the variable form in `Selector.vue`, by using the `mt-2` utility class for the header element, and remove the unnecessary padding classes from the header element ([link](https://github.com/hoppscotch/hoppscotch/pull/3260/files?diff=unified&w=0#diff-584d8291b417c80e6df02186ce776cf6bf6bb10c3a9627c2512fbb0ac34fa664L218-R230)) * Disable the edit button in the environment list header in `Selector.vue`, when there are no environment variables, by using the `:disabled` prop of the `HoppButtonSecondary` component, to prevent user confusion and indicate the state of the list ([link](https://github.com/hoppscotch/hoppscotch/pull/3260/files?diff=unified&w=0#diff-584d8291b417c80e6df02186ce776cf6bf6bb10c3a9627c2512fbb0ac34fa664L218-R230)) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>