common/static/common/styles/studio/_modal.sass

@@ -73,7 +73,7 @@
 
   +media-md
     height: 100vh
-    max-width: calc(100% - (7.2rem * 2 + var(--spacer-4) * 4)
+    max-width: calc(100% - (5.6rem * 2 + var(--spacer-4) * 4)
     +padding(4, y)
 
 .modal-header
@@ -99,7 +99,8 @@
       height: calc(100vh - var(--spacer-4) * 2) // height must be explicitly defined in order to make img max-height work
 
 .modal-navigation
-  width: 7.2rem
+  +media-md
+    width: 5.6rem
 
   &.modal-close,
   &.next,

common/templates/common/components/modal_asset.html

@@ -3,19 +3,19 @@
 {% load pipeline %}
 
 {% if next_asset %}
-  <button class="btn btn-lg d-none d-md-flex modal-navigation next"
+  <button class="btn d-none d-md-flex modal-navigation next"
     data-url="{% url 'api-asset' next_asset.id %}?site_context={{ site_context }}" data-asset-id="{{ next_asset.id }}">
     <i class="i-chevron-right"></i>
   </button>
 {% endif %}
 {% if previous_asset %}
-  <button class="btn btn-lg d-md-block d-none modal-navigation previous"
+  <button class="btn d-md-block d-none modal-navigation previous"
     data-url="{% url 'api-asset' previous_asset.id %}?site_context={{ site_context }}"
     data-asset-id="{{ previous_asset.id }}">
     <i class="i-chevron-left"></i>
   </button>
 {% endif %}
-<button class="btn btn-lg d-md-block d-none modal-navigation modal-close d-none d-md-block" data-bs-dismiss="modal">
+<button class="btn d-md-block d-none modal-navigation modal-close d-none d-md-block" data-bs-dismiss="modal">
   <i class="i-cancel"></i>
 </button>
 
@@ -35,7 +35,7 @@
             <div>
               <h3 class="mb-0">{{ asset.name }}</h3>
             </div>
-            <button class="btn btn-lg modal-close modal-navigation" data-bs-dismiss="modal">
+            <button class="btn modal-close modal-navigation" data-bs-dismiss="modal">
               <i class="i-cancel"></i>
             </button>
           </div>