[PR #5884] [MERGED] fix(common): increase modal dialog width for more screen sizes #5392

New issue

Closed

opened 2026-03-17 02:50:41 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 02:50:41 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/5884
Author: @iDschepe
Created: 2/17/2026
Status: ✅ Merged
Merged: 2/24/2026
Merged by: @jamesgeorge007

Base: next ← Head: feat/dialog-max-width-responsive

📝 Commits (3)

c561b32 fix(common): increase modal dialog width for more screen sizes
ebd25d5 chore: increase width for doc modal
98f7469 fix(common): remove redundant lg breakpoint in documentation modal styles

📊 Changes

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

View changed files

📝 packages/hoppscotch-common/src/components/collections/Properties.vue (+1 -1)
📝 packages/hoppscotch-common/src/components/collections/documentation/index.vue (+1 -1)
📝 packages/hoppscotch-common/src/components/environments/my/Details.vue (+1 -1)
📝 packages/hoppscotch-common/src/components/environments/teams/Details.vue (+1 -1)

📄 Description

Modify maximum modal width to use responsive viewport-based sizing for ultra-wide displays

Closes #4743

What's changed

Updated modal widths from a single breakpoint to responsive viewport-based sizing for larger screens
Changed from sm:max-w-5xl to sm:max-w-5xl lg:max-w-6xl xl:max-w-7xl 2xl:max-w-[80vw]
This applies to:
- Collection properties dialog (Properties.vue)
- Personal environment details dialog (environments/my/Details.vue)
- Team environment details dialog (environments/teams/Details.vue)

The change provides:

Better utilization of ultra-wide displays: On 34" UWQHD monitors (3440px width), the modal now uses 80% of the viewport width (~2752px) instead of being limited to 1024px (max-w-5xl)
Responsive scaling: The modal adapts dynamically to different screen sizes while maintaining reasonable limits on smaller displays
Improved readability: More space for viewing longer variable names and values in environment variables and collection properties
Maintains consistency: Still uses Tailwind's predefined utility classes for smaller breakpoints, only customizing the largest breakpoint

Technical details

Uses Tailwind's arbitrary value syntax max-w-[80vw] for the 2xl breakpoint
Smaller breakpoints remain unchanged to ensure good UX on standard displays
The 80vw width provides a good balance between maximizing space and maintaining readability

Notes to reviewers

This change addresses the feature request in #4743, which specifically mentioned the need for better width utilization on larger screens, especially for UWQHD displays. The solution uses viewport-based units rather than fixed pixel values to ensure it scales appropriately across different ultra-wide monitor sizes.

Summary by cubic

Make modal dialogs scale better on large and ultra‑wide screens by increasing their max width on larger breakpoints (80vw at 2xl). Improves readability in Collection Properties, Documentation, and Environment Details.

New Features
- Properties, My/Team Environment Details: sm:max-w-5xl → sm:max-w-5xl lg:max-w-6xl xl:max-w-7xl 2xl:max-w-[80vw].
- Documentation modal: sm:max-w-6xl → sm:max-w-6xl xl:max-w-7xl 2xl:max-w-[80vw] (removed redundant lg breakpoint).

^{Written for commit 98f7469749. Summary will update on new commits.}

_{🔄 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/5884 **Author:** [@iDschepe](https://github.com/iDschepe) **Created:** 2/17/2026 **Status:** ✅ Merged **Merged:** 2/24/2026 **Merged by:** [@jamesgeorge007](https://github.com/jamesgeorge007) **Base:** `next` ← **Head:** `feat/dialog-max-width-responsive` --- ### 📝 Commits (3) - [`c561b32`](https://github.com/hoppscotch/hoppscotch/commit/c561b32958c795c0bf9af286868abf0f0ce6425b) fix(common): increase modal dialog width for more screen sizes - [`ebd25d5`](https://github.com/hoppscotch/hoppscotch/commit/ebd25d5610ad037b2e77167a61ea107ee9a95007) chore: increase width for doc modal - [`98f7469`](https://github.com/hoppscotch/hoppscotch/commit/98f7469749844deb4de017b38238d8a65e1b8750) fix(common): remove redundant lg breakpoint in documentation modal styles ### 📊 Changes **4 files changed** (+4 additions, -4 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/src/components/collections/Properties.vue` (+1 -1) 📝 `packages/hoppscotch-common/src/components/collections/documentation/index.vue` (+1 -1) 📝 `packages/hoppscotch-common/src/components/environments/my/Details.vue` (+1 -1) 📝 `packages/hoppscotch-common/src/components/environments/teams/Details.vue` (+1 -1) </details> ### 📄 Description Modify maximum modal width to use responsive viewport-based sizing for ultra-wide displays Closes #4743 ## What's changed - Updated modal widths from a single breakpoint to responsive viewport-based sizing for larger screens - Changed from `sm:max-w-5xl` to `sm:max-w-5xl lg:max-w-6xl xl:max-w-7xl 2xl:max-w-[80vw]` - This applies to: - Collection properties dialog (`Properties.vue`) - Personal environment details dialog (`environments/my/Details.vue`) - Team environment details dialog (`environments/teams/Details.vue`) ## The change provides: - **Better utilization of ultra-wide displays**: On 34" UWQHD monitors (3440px width), the modal now uses 80% of the viewport width (~2752px) instead of being limited to 1024px (max-w-5xl) - **Responsive scaling**: The modal adapts dynamically to different screen sizes while maintaining reasonable limits on smaller displays - **Improved readability**: More space for viewing longer variable names and values in environment variables and collection properties - **Maintains consistency**: Still uses Tailwind's predefined utility classes for smaller breakpoints, only customizing the largest breakpoint ## Technical details - Uses Tailwind's arbitrary value syntax `max-w-[80vw]` for the `2xl` breakpoint - Smaller breakpoints remain unchanged to ensure good UX on standard displays - The 80vw width provides a good balance between maximizing space and maintaining readability ## Notes to reviewers This change addresses the feature request in #4743, which specifically mentioned the need for better width utilization on larger screens, especially for UWQHD displays. The solution uses viewport-based units rather than fixed pixel values to ensure it scales appropriately across different ultra-wide monitor sizes.  --- ## Summary by cubic Make modal dialogs scale better on large and ultra‑wide screens by increasing their max width on larger breakpoints (80vw at 2xl). Improves readability in Collection Properties, Documentation, and Environment Details. - **New Features** - Properties, My/Team Environment Details: sm:max-w-5xl → sm:max-w-5xl lg:max-w-6xl xl:max-w-7xl 2xl:max-w-[80vw]. - Documentation modal: sm:max-w-6xl → sm:max-w-6xl xl:max-w-7xl 2xl:max-w-[80vw] (removed redundant lg breakpoint). <sup>Written for commit 98f7469749844deb4de017b38238d8a65e1b8750. Summary will update on new commits.</sup>  --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>