[GH-ISSUE #4743] [feature]: Improve Environment Variables Dialog Width for Larger Screens #1768

New issue

Closed

opened 2026-03-16 21:40:37 +03:00 by kerem · 2 comments

kerem commented

2026-03-16 21:40:37 +03:00

Owner

Originally created by @iDschepe on GitHub (Feb 10, 2025).
Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/4743

Originally assigned to: @iDschepe on GitHub.

Is there an existing issue for this?

I have searched the existing issues

Summary

Description:
Currently, the environment variables dialog in Hoppscotch is limited to a maximum width of 32rem. This constraint makes it difficult to view longer variable names and values efficiently. A more adaptive or configurable width would improve the usability, especially for users working with extensive environment variables.

Suggested Improvement:

Allow the environment variables dialog to scale dynamically based on the screen size, rather than being fixed at 32rem.
Implement a more flexible max-width, e.g., a percentage-based limit (max-width: 65%) for larger screens.
Optionally, provide a resizable or user-configurable width for better customization.

Current Workaround (User Script):
We have temporarily addressed this issue using a user script that overrides the CSS:

(function() {
    'use strict';

    // Function to inject CSS into the page
    function addCustomCSS(css) {
        const style = document.createElement('style');
        style.type = 'text/css';
        style.textContent = css;
        document.head.appendChild(style);
    }

    // Adjust max-width for larger screens
    const customCSS = `
        @media (min-width: 640px) {
            .sm\\:max-w-lg {
                max-width: 65%;
            }
        }
    `;

    // Inject the custom CSS
    addCustomCSS(customCSS);
})();

While this workaround helps, a native solution within Hoppscotch would be much more elegant and reliable.

Development Contribution:
I’d be happy to contribute a pull request for this improvement. If you could point me to the relevant part of the codebase where the modal width is defined, I can make the necessary adjustments and submit a PR.

Why should this be worked on?

Inefficient use of screen space → On larger screens, a small fixed-width dialog feels cramped and does not take advantage of the available display area.

Originally created by @iDschepe on GitHub (Feb 10, 2025). Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/4743 Originally assigned to: @iDschepe on GitHub. ### Is there an existing issue for this? - [x] I have searched the existing issues ### Summary **Description:** Currently, the environment variables dialog in Hoppscotch is limited to a maximum width of 32rem. This constraint makes it difficult to view longer variable names and values efficiently. A more adaptive or configurable width would improve the usability, especially for users working with extensive environment variables. ![Image](https://github.com/user-attachments/assets/7fb61784-543d-46a5-a29f-c853536307f2) **Suggested Improvement:** Allow the environment variables dialog to scale dynamically based on the screen size, rather than being fixed at 32rem. Implement a more flexible max-width, e.g., a percentage-based limit (max-width: 65%) for larger screens. Optionally, provide a resizable or user-configurable width for better customization. ![Image](https://github.com/user-attachments/assets/4b7d5702-58c4-4e74-9423-85e0f66c4733) **Current Workaround (User Script):** We have temporarily addressed this issue using a user script that overrides the CSS: ``` (function() { 'use strict'; // Function to inject CSS into the page function addCustomCSS(css) { const style = document.createElement('style'); style.type = 'text/css'; style.textContent = css; document.head.appendChild(style); } // Adjust max-width for larger screens const customCSS = ` @media (min-width: 640px) { .sm\\:max-w-lg { max-width: 65%; } } `; // Inject the custom CSS addCustomCSS(customCSS); })(); ``` While this workaround helps, a native solution within Hoppscotch would be much more elegant and reliable. **Development Contribution:** I’d be happy to contribute a pull request for this improvement. If you could point me to the relevant part of the codebase where the modal width is defined, I can make the necessary adjustments and submit a PR. ### Why should this be worked on? Inefficient use of screen space → On larger screens, a small fixed-width dialog feels cramped and does not take advantage of the available display area.

kerem

2026-03-16 21:40:37 +03:00

closed this issue
added the
feature
label

kerem commented

2026-03-16 21:40:54 +03:00

Author

Owner

@srmaties7 commented on GitHub (Mar 5, 2025):

This is an Issue that is also affecting me and my team when working with Hoppscotch.
We use a lot of very long variables such as website-urls and it is very hard to work with and make little changes.

Some in my team started to export the environment then make their changes and import it again because they think it is easier to work this way.

Please, this would improve user experience by alot

@srmaties7 commented on GitHub (Mar 5, 2025): This is an Issue that is also affecting me and my team when working with Hoppscotch. We use a lot of very long variables such as website-urls and it is very hard to work with and make little changes. Some in my team started to export the environment then make their changes and import it again because they think it is easier to work this way. Please, this would improve user experience by alot

kerem commented

2026-03-16 21:40:59 +03:00

Author

Owner

@jamesgeorge007 commented on GitHub (Feb 26, 2026):

Closing since this is addressed in the v2026.2.0 release.

@jamesgeorge007 commented on GitHub (Feb 26, 2026): Closing since this is addressed in the [v2026.2.0](https://github.com/hoppscotch/hoppscotch/releases/tag/2026.2.0) release.

kerem referenced this issue

2026-03-17 01:05:37 +03:00

[PR #1768] [CLOSED] chore(deps): bump core-js from 3.16.0 to 3.16.1 #3485