From 5ae96399014254080e5fbc3ba27e58d0fd84a6b3 Mon Sep 17 00:00:00 2001
From: iDschepe <40547587+iDschepe@users.noreply.github.com>
Date: Tue, 24 Feb 2026 16:33:16 +0100
Subject: [PATCH] fix(common): increase modal dialog width for more screen
 sizes (#5884)

Co-authored-by: nivedin <nivedinp@gmail.com>
Co-authored-by: James George <25279263+jamesgeorge007@users.noreply.github.com>
---
 .../hoppscotch-common/src/components/collections/Properties.vue | 2 +-
 .../src/components/collections/documentation/index.vue          | 2 +-
 .../src/components/environments/my/Details.vue                  | 2 +-
 .../src/components/environments/teams/Details.vue               | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/hoppscotch-common/src/components/collections/Properties.vue b/packages/hoppscotch-common/src/components/collections/Properties.vue
index 18505c13..a11e1025 100644
--- a/packages/hoppscotch-common/src/components/collections/Properties.vue
+++ b/packages/hoppscotch-common/src/components/collections/Properties.vue
@@ -4,7 +4,7 @@
     dialog
     :title="t('collection.properties')"
     :full-width-body="true"
-    styles="sm:max-w-5xl"
+    styles="sm:max-w-5xl lg:max-w-6xl xl:max-w-7xl 2xl:max-w-[80vw]"
     @close="hideModal"
   >
     <template #body>
diff --git a/packages/hoppscotch-common/src/components/collections/documentation/index.vue b/packages/hoppscotch-common/src/components/collections/documentation/index.vue
index c898d421..d06b7d2c 100644
--- a/packages/hoppscotch-common/src/components/collections/documentation/index.vue
+++ b/packages/hoppscotch-common/src/components/collections/documentation/index.vue
@@ -4,7 +4,7 @@
     dialog
     :title="t('documentation.title')"
     :full-width-body="true"
-    styles="sm:max-w-6xl"
+    styles="sm:max-w-6xl xl:max-w-7xl 2xl:max-w-[80vw]"
     @close="hideModal"
   >
     <template #body>
diff --git a/packages/hoppscotch-common/src/components/environments/my/Details.vue b/packages/hoppscotch-common/src/components/environments/my/Details.vue
index 879bcf1b..271c70b7 100644
--- a/packages/hoppscotch-common/src/components/environments/my/Details.vue
+++ b/packages/hoppscotch-common/src/components/environments/my/Details.vue
@@ -3,7 +3,7 @@
     v-if="show"
     dialog
     :title="t(`environment.${action}`)"
-    styles="sm:max-w-5xl"
+    styles="sm:max-w-5xl lg:max-w-6xl xl:max-w-7xl 2xl:max-w-[80vw]"
     @close="hideModal"
   >
     <template #body>
diff --git a/packages/hoppscotch-common/src/components/environments/teams/Details.vue b/packages/hoppscotch-common/src/components/environments/teams/Details.vue
index 8ae12c10..e146f0b3 100644
--- a/packages/hoppscotch-common/src/components/environments/teams/Details.vue
+++ b/packages/hoppscotch-common/src/components/environments/teams/Details.vue
@@ -3,7 +3,7 @@
     v-if="show"
     dialog
     :title="t(`environment.${action}`)"
-    styles="sm:max-w-5xl"
+    styles="sm:max-w-5xl lg:max-w-6xl xl:max-w-7xl 2xl:max-w-[80vw]"
     @close="hideModal"
   >
     <template #body>