better preview

app/assets/stylesheets/admin/preview.sass

 .preview
     .modal-body
-        background: black
-        text-align: center
+        background: #EEEEEE
         overflow: hidden
+        padding: 0
+        text-align: center
+        transition: padding 0.5s ease
         iframe
+            background: white
+            box-shadow: 0 3px 20px rgba(0, 0, 0, 0.1)
             height: 100%
-            transition: width 0.5s ease
+            transition: width 0.5s ease, height 0.5s ease
+    &--mobile, &--tablet
+        .modal-body
+            padding: 2rem
+        iframe
+            border-radius: 10px
     &--mobile
         iframe
             width: 415px

app/views/admin/application/_preview.html.erb

@@ -5,11 +5,11 @@
         <h5 class="modal-title h4"><%= t 'preview.title' %></h5>
         <div class="btn-group m-auto" role="group" aria-label="Basic example">
           <button type="button" class="btn btn-primary preview__button" data-mode="mobile">
-            <i class="fas fa-mobile"></i>
+            <i class="fas fa-mobile-alt"></i>
             <%= t 'preview.mobile' %>
           </button>
           <button type="button" class="btn btn-light preview__button" data-mode="tablet">
-            <i class="fas fa-tablet"></i>
+            <i class="fas fa-tablet-alt"></i>
             <%= t 'preview.tablet' %>
           </button>
           <button type="button" class="btn btn-light preview__button" data-mode="desktop">
@@ -19,7 +19,7 @@
         </div>
         <button type="button" class="btn-close ms-0" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
-      <div class="modal-body p-2">
+      <div class="modal-body">
         <iframe src="<%= request.path %>/preview" loading="lazy"></iframe>
       </div>
     </div>