[PR #5631] [MERGED] fix(common): increase modal dialog width for bigger screen #5292

New issue

Closed

opened 2026-03-17 02:45:16 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 02:45:16 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/5631
Author: @Nilanshu-Ankit
Created: 11/28/2025
Status: ✅ Merged
Merged: 12/8/2025
Merged by: @jamesgeorge007

Base: patch ← Head: fix/dialog-width-for-bigger-screen

📝 Commits (3)

47d6d18 fix(common): modify max modal width to 5xl from 3xl in my components
e479e09 fix(common): modify max modal width to 5xl from 3xl in teams components
cebeb47 chore: increase width for properties modal

📊 Changes

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

View changed files

📝 packages/hoppscotch-common/src/components/collections/Properties.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 from 48rem to 64rem

Closes FE-4743

What's changed

Updated the modal width from sm:max-w-3xl (48rem) to sm:max-w-5xl (64rem)
This applies to both personal environments, team environments and collection properties dialogs

The change from max-w-3xl (48rem / 768px) to max-w-5xl (64rem / 1024px) provides:

33% more width for viewing environment variables
Better utilization of screen real estate on larger displays
More comfortable viewing of longer variable names and values
Maintains consistency with Tailwind's predefined utility classes for easier maintenance

Notes to reviewers

Summary by cubic

Increase the environment details modal max width from 48rem (sm:max-w-3xl) to 64rem (sm:max-w-5xl) to improve readability on larger screens and reduce truncation of long variable names. Applies to personal and team environments and aligns with FE-4743.

^{Written for commit e479e09473. Summary will update automatically 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/5631 **Author:** [@Nilanshu-Ankit](https://github.com/Nilanshu-Ankit) **Created:** 11/28/2025 **Status:** ✅ Merged **Merged:** 12/8/2025 **Merged by:** [@jamesgeorge007](https://github.com/jamesgeorge007) **Base:** `patch` ← **Head:** `fix/dialog-width-for-bigger-screen` --- ### 📝 Commits (3) - [`47d6d18`](https://github.com/hoppscotch/hoppscotch/commit/47d6d18c663bb18481208b7e0389eb6b3d7929f2) fix(common): modify max modal width to 5xl from 3xl in my components - [`e479e09`](https://github.com/hoppscotch/hoppscotch/commit/e479e0947336d89cc50279e614ebe476bab98cd0) fix(common): modify max modal width to 5xl from 3xl in teams components - [`cebeb47`](https://github.com/hoppscotch/hoppscotch/commit/cebeb47f8f7faab06693d7b081a2226965cdae31) chore: increase width for properties modal ### 📊 Changes **3 files changed** (+3 additions, -3 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/src/components/collections/Properties.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 from 48rem to 64rem Closes FE-4743 ### What's changed - Updated the modal width from sm:max-w-3xl (48rem) to sm:max-w-5xl (64rem) - This applies to both personal environments, team environments and collection properties dialogs ### The change from max-w-3xl (48rem / 768px) to max-w-5xl (64rem / 1024px) provides: - 33% more width for viewing environment variables - Better utilization of screen real estate on larger displays - More comfortable viewing of longer variable names and values - Maintains consistency with Tailwind's predefined utility classes for easier maintenance ### Notes to reviewers   --- ## Summary by cubic Increase the environment details modal max width from 48rem (sm:max-w-3xl) to 64rem (sm:max-w-5xl) to improve readability on larger screens and reduce truncation of long variable names. Applies to personal and team environments and aligns with FE-4743. <sup>Written for commit e479e0947336d89cc50279e614ebe476bab98cd0. Summary will update automatically on new commits.</sup>  --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>