common/static/common/styles/studio/_custom.sass

@@ -53,6 +53,8 @@
 .btns-toolbar
   @extend .border-bottom
 
+  flex-wrap: wrap
+
 .checkbox-like
   span
     pointer-events: none

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

@@ -1,3 +1,10 @@
+.modal
+  height: auto
+  overflow-y: scroll
+
+  +media-md
+    height: 100%
+
 // TODO: cleanup and refactor component markup and style
 .modal-asset
   &.show
@@ -42,6 +49,8 @@
   max-width: calc(100% )
   overflow-y: scroll
   +padding(3)
+
+  +media-md
     +padding(5, top)
 
   img
@@ -57,9 +66,14 @@
 
 .modal-dialog
   border-radius: var(--border-radius-lg)
+  height: 100vh
+  +margin(0, y)
+  +padding(4, top)
+  max-width: 100%
+
+  +media-md
     height: 100vh
     max-width: calc(100% - (7.2rem * 2 + var(--spacer-4) * 4)
-  overflow: hidden
     +padding(4, y)
 
 .modal-header
@@ -78,20 +92,25 @@
     align-items: center
     cursor: zoom-in
     display: flex
-    height: calc(100vh - var(--spacer-4) * 2) // height must be explicitly defined in order to make img max-height work
     justify-content: center
     width: 100%
 
+    +media-md
+      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
 
   &.modal-close,
   &.next,
   &.previous
+    +media-md
       position: absolute
 
   &.modal-close
     right: var(--spacer-4)
+
+    +media-md
       top: var(--spacer-4)
 
   &.next

common/templates/common/components/modal_asset.html

@@ -3,19 +3,19 @@
 {% load pipeline %}
 
 {% if next_asset %}
-  <button class="btn btn-lg modal-navigation next"
+  <button class="btn btn-lg 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 modal-navigation previous"
+  <button class="btn btn-lg 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 modal-navigation modal-close d-none d-md-block" data-bs-dismiss="modal">
+<button class="btn btn-lg d-md-block d-none modal-navigation modal-close d-none d-md-block" data-bs-dismiss="modal">
   <i class="i-cancel"></i>
 </button>
 
@@ -30,10 +30,9 @@
           {% 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-20.png' %}')">
-          <div class="d-md-none p-3">
+        <div class="col-lg-7 col-md-6 modal-header p-0" style="background-image: url('{% static 'common/images/asset-bg-noise-2x-opacity-20.png' %}')">
+          <div class="align-items-center d-flex d-md-none justify-content-between px-3 py-4">
             <div>
-              <p class="text-muted">{{ asset.static_asset.get_source_type_display }}</p>
               <h3 class="mb-0">{{ asset.name }}</h3>
             </div>
             <button class="btn btn-lg modal-close modal-navigation" data-bs-dismiss="modal">
@@ -63,7 +62,7 @@
             {% include 'common/components/content_locked.html' with background=asset.static_asset.thumbnail_s_url %}
           {% endif %}
         </div>
-        <div class="col-md-5 modal-body">
+        <div class="col-lg-5 col-md-6 modal-body">
           <div class="align-items-start row">
             <div class="col-12 col-md mb-2">
               <div class="d-none d-md-block">