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

@@ -30,24 +30,40 @@
     z-index: 1
 
 .modal-body
-  padding: var(--spacer)
+  +margin(auto, x)
+  max-width: 117.0rem
+  overflow-y: scroll
+  +padding(3)
+  +padding(5, top)
 
 .modal-content
   background-color: var(--color-bg-secondary)
 
+  +media-md
+    flex-direction: row
+    height: 100%
+
 .modal-dialog
   border-radius: var(--border-radius-lg)
+  height: 100vh
   overflow: hidden
 
+  +media-md
+    max-width: map-get($container-max-widths, 'xxl')
+
 .modal-header
   border-bottom: 0
   display: block
+  justify-content: center
 
   +media-md
+    align-items: center
     display: flex
 
   .modal-asset-img-wrapper
     cursor: zoom-in
+    display: flex
+    justify-content: center
     width: 100%
 
 .modal-navigation

common/templates/common/components/modal_asset.html

@@ -30,7 +30,7 @@
           {% include 'common/components/spoiler_alert.html' %}
         {% endif %}
 
-        <div class="modal-header p-0">
+        <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="d-md-none p-3">
             <div>
               <p class="text-muted">{{ asset.static_asset.get_source_type_display }}</p>
@@ -63,7 +63,7 @@
             {% include 'common/components/content_locked.html' with background=asset.static_asset.thumbnail_s_url %}
           {% endif %}
         </div>
-        <div class="modal-body">
+        <div class="col-md-5 modal-body">
           <div class="align-items-start row">
             <div class="col-12 col-md mb-2">
               <div class="d-none d-md-block">