[PR #3100] [MERGED] chore: improve mobile responsiveness on environment selector #4223

New issue

Closed

opened 2026-03-17 01:46:44 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 01:46:44 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/3100
Author: @liyasthomas
Created: 6/1/2023
Status: ✅ Merged
Merged: 6/2/2023
Merged by: @AndrewBastin

Base: release/2023.4.4 ← Head: chore/improve-responsiveness

📝 Commits (1)

db09898 chore: improve mobile responsiveness on environment selector

📊 Changes

2 files changed (+21 additions, -10 deletions)

View changed files

📝 packages/hoppscotch-common/src/components/environments/Selector.vue (+15 -7)
📝 packages/hoppscotch-ui/src/components/smart/Windows.vue (+6 -3)

📄 Description

`🤖 Generated by Copilot at db09898`

Summary

🎨📱📦

Improved the UI and responsiveness of the environment selector and the windows components. Added an icon to indicate the environment list and hid the label on smaller screens. Used @vueuse/core to handle breakpoints and layout adjustments.

@vueuse/core helps
Responsive UI for screens
Layers icon in fall

Walkthrough

Add an icon of layers to the environment selector and hide the label on smaller screens (link, link, link, link, link)
Import IconLayers, breakpointsTailwind, and useBreakpoints from external modules to use them in the Selector.vue component (link, link)
Define a reactive value mdAndLarger that returns true if the screen size is greater than or equal to the medium breakpoint defined by Tailwind CSS in the Selector.vue and Windows.vue components (link, link, link)
Adjust the width of the actions slot and the scrollable area in the Windows.vue component depending on the screen size and the presence of actions (link, link)
Import breakpointsTailwind and useBreakpoints from external modules to use them in the Windows.vue component (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/3100 **Author:** [@liyasthomas](https://github.com/liyasthomas) **Created:** 6/1/2023 **Status:** ✅ Merged **Merged:** 6/2/2023 **Merged by:** [@AndrewBastin](https://github.com/AndrewBastin) **Base:** `release/2023.4.4` ← **Head:** `chore/improve-responsiveness` --- ### 📝 Commits (1) - [`db09898`](https://github.com/hoppscotch/hoppscotch/commit/db09898ae7aa5a2d28d335d49c2356a936a8ae8a) chore: improve mobile responsiveness on environment selector ### 📊 Changes **2 files changed** (+21 additions, -10 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/src/components/environments/Selector.vue` (+15 -7) 📝 `packages/hoppscotch-ui/src/components/smart/Windows.vue` (+6 -3) </details> ### 📄 Description  ### <samp>🤖 Generated by Copilot at db09898</samp> ### Summary 🎨📱📦  Improved the UI and responsiveness of the environment selector and the windows components. Added an icon to indicate the environment list and hid the label on smaller screens. Used `@vueuse/core` to handle breakpoints and layout adjustments. > _`@vueuse/core` helps_ > _Responsive UI for screens_ > _Layers icon in fall_ ### Walkthrough * Add an icon of layers to the environment selector and hide the label on smaller screens ([link](https://github.com/hoppscotch/hoppscotch/pull/3100/files?diff=unified&w=0#diff-584d8291b417c80e6df02186ce776cf6bf6bb10c3a9627c2512fbb0ac34fa664L14-R23), [link](https://github.com/hoppscotch/hoppscotch/pull/3100/files?diff=unified&w=0#diff-584d8291b417c80e6df02186ce776cf6bf6bb10c3a9627c2512fbb0ac34fa664R62), [link](https://github.com/hoppscotch/hoppscotch/pull/3100/files?diff=unified&w=0#diff-584d8291b417c80e6df02186ce776cf6bf6bb10c3a9627c2512fbb0ac34fa664R104), [link](https://github.com/hoppscotch/hoppscotch/pull/3100/files?diff=unified&w=0#diff-584d8291b417c80e6df02186ce776cf6bf6bb10c3a9627c2512fbb0ac34fa664R154), [link](https://github.com/hoppscotch/hoppscotch/pull/3100/files?diff=unified&w=0#diff-584d8291b417c80e6df02186ce776cf6bf6bb10c3a9627c2512fbb0ac34fa664L163-R171)) * Import `IconLayers`, `breakpointsTailwind`, and `useBreakpoints` from external modules to use them in the `Selector.vue` component ([link](https://github.com/hoppscotch/hoppscotch/pull/3100/files?diff=unified&w=0#diff-584d8291b417c80e6df02186ce776cf6bf6bb10c3a9627c2512fbb0ac34fa664R154), [link](https://github.com/hoppscotch/hoppscotch/pull/3100/files?diff=unified&w=0#diff-584d8291b417c80e6df02186ce776cf6bf6bb10c3a9627c2512fbb0ac34fa664L163-R171)) * Define a reactive value `mdAndLarger` that returns true if the screen size is greater than or equal to the medium breakpoint defined by Tailwind CSS in the `Selector.vue` and `Windows.vue` components ([link](https://github.com/hoppscotch/hoppscotch/pull/3100/files?diff=unified&w=0#diff-584d8291b417c80e6df02186ce776cf6bf6bb10c3a9627c2512fbb0ac34fa664L163-R171), [link](https://github.com/hoppscotch/hoppscotch/pull/3100/files?diff=unified&w=0#diff-052acc17f6ece720f660d3841f7e49f0a3a1d6ad68dc973819e3d758e45141d5L147-R147), [link](https://github.com/hoppscotch/hoppscotch/pull/3100/files?diff=unified&w=0#diff-052acc17f6ece720f660d3841f7e49f0a3a1d6ad68dc973819e3d758e45141d5R170-R172)) * Adjust the width of the actions slot and the scrollable area in the `Windows.vue` component depending on the screen size and the presence of actions ([link](https://github.com/hoppscotch/hoppscotch/pull/3100/files?diff=unified&w=0#diff-052acc17f6ece720f660d3841f7e49f0a3a1d6ad68dc973819e3d758e45141d5L103-R103), [link](https://github.com/hoppscotch/hoppscotch/pull/3100/files?diff=unified&w=0#diff-052acc17f6ece720f660d3841f7e49f0a3a1d6ad68dc973819e3d758e45141d5L118-R118)) * Import `breakpointsTailwind` and `useBreakpoints` from external modules to use them in the `Windows.vue` component ([link](https://github.com/hoppscotch/hoppscotch/pull/3100/files?diff=unified&w=0#diff-052acc17f6ece720f660d3841f7e49f0a3a1d6ad68dc973819e3d758e45141d5L147-R147)) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>