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

@@ -1,4 +1,9 @@
 // TODO: cleanup and refactor component markup and style
+.modal-asset
+  align-items: center
+  display: flex !important
+  justify-content: center
+
 .modal-asset-zoom
   img
     display: block
@@ -31,7 +36,7 @@
 
 .modal-body
   +margin(auto, x)
-  max-width: 117.0rem
+  max-width: calc(100% )
   overflow-y: scroll
   +padding(3)
   +padding(5, top)
@@ -46,12 +51,14 @@
 .modal-dialog
   border-radius: var(--border-radius-lg)
   height: 100vh
+  max-width: calc(100% - (7.2rem * 2 + var(--spacer-4) * 4)
   overflow: hidden
-
-  +media-md
-    max-width: map-get($container-max-widths, 'xxl')
+  +padding(4, y)
 
 .modal-header
+  // TODO: consider changing background noise img raster to svg
+  background-blend-mode: multiply
+  background-color: var(--color-bg)
   border-bottom: 0
   display: block
   justify-content: center
@@ -67,22 +74,19 @@
     width: 100%
 
 .modal-navigation
-  &.modal-close, &.next, &.previous
+  width: 7.2rem
+
+  &.modal-close,
+  &.next,
+  &.previous
     position: absolute
 
   &.modal-close
-    right: var(--spacer-3)
-    top: var(--spacer-3)
-
-    +media-md
-      right: calc(var(--spacer) * 2)
-      top: calc(var(--spacer) * 2)
-
-  &.next, &.previous
-    top: 50%
+    right: var(--spacer-4)
+    top: var(--spacer-4)
 
   &.next
-    right: calc(var(--spacer) * 2)
+    right: var(--spacer-4)
 
   &.previous
-    left: calc(var(--spacer) * 2)
+    left: var(--spacer-4)

common/templates/common/components/modal_asset.html

@@ -30,7 +30,7 @@
           {% include 'common/components/spoiler_alert.html' %}
         {% endif %}
 
-        <div class="col-md-7 modal-header p-0" style="background-image: url('{% static 'common/images/asset-bg-noise-2x-opacity-10.png' %}')">
+        <div class="col-md-7 modal-header p-0" style="background-image: url('{% static 'common/images/asset-bg-noise-2x-opacity-20.png' %}')">
           <div class="d-md-none p-3">
             <div>
               <p class="text-muted">{{ asset.static_asset.get_source_type_display }}</p>