From 583656c30b0b0abb87d02a0b333c3ae09311ad0d Mon Sep 17 00:00:00 2001
From: Rana Al-Khulaidi <ralkhulaidi@gmail.com>
Date: Thu, 10 Sep 2026 23:13:53 -0400
Subject: [PATCH] fix(nimbus): Show larger rollout screenshots when expanded

Because

- Expanded screenshots could appear smaller than their preview
- The modal was too narrow and forced screenshots to fit its width

This commit

- Uses a larger modal so screenshots can display closer to their natural size and bigger than the preview

Fixes #17245
---
 .../nimbus_ui/templates/new/rollouts/preview/card.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/experimenter/experimenter/nimbus_ui/templates/new/rollouts/preview/card.html b/experimenter/experimenter/nimbus_ui/templates/new/rollouts/preview/card.html
index 6f506053fd..b1bbbf47b4 100644
--- a/experimenter/experimenter/nimbus_ui/templates/new/rollouts/preview/card.html
+++ b/experimenter/experimenter/nimbus_ui/templates/new/rollouts/preview/card.html
@@ -78,7 +78,7 @@
                  tabindex="-1"
                  aria-labelledby="rollout-preview-screenshot-modal-label"
                  aria-hidden="true">
-              <div class="modal-dialog modal-md modal-dialog-centered">
+              <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
                 <div class="modal-content">
                   <div class="modal-header">
                     <h1 class="modal-title fs-5" id="rollout-preview-screenshot-modal-label">Rollout experience</h1>
@@ -87,14 +87,14 @@ <h1 class="modal-title fs-5" id="rollout-preview-screenshot-modal-label">Rollout
                             data-bs-dismiss="modal"
                             aria-label="Close"></button>
                   </div>
-                  <div class="modal-body d-flex flex-column gap-3">
+                  <div class="modal-body d-flex flex-column gap-4">
                     {% for screenshot in experiment.reference_branch.screenshots.all %}
                       {% if screenshot.image %}
-                        <div>
+                        <div class="text-center border border-secondary-subtle rounded p-3">
                           <img src="{{ screenshot.image.url }}"
                                alt="{{ screenshot.description|default:'Rollout experience screenshot' }}"
-                               class="img-fluid w-100" />
-                          {% if screenshot.description %}<div class="mt-2 small text-body">{{ screenshot.description }}</div>{% endif %}
+                               class="img-fluid" />
+                          {% if screenshot.description %}<div class="mt-2 text-body">{{ screenshot.description }}</div>{% endif %}
                         </div>
                       {% endif %}
                     {% endfor %}