responsive style for transfer outcome tiles

src/views/studio/modals/transfer-host-confirmation.jsx

@@ -85,7 +85,7 @@ const TransferHostConfirmation = ({
     return (
         <ModalInnerContent>
             <div className="transfer-outcome">
-                <div>
+                <div className="transfer-outcome-tile-container">
                     <div className="transfer-outcome-label">
                         <FormattedMessage id="studio.transfer.currentHost" />
                     </div>
@@ -102,7 +102,7 @@ const TransferHostConfirmation = ({
                     className="transfer-outcome-arrow"
                     src="/svgs/studio/r-arrow.svg"
                 />
-                <div>
+                <div className="transfer-outcome-tile-container">
                     <div className="transfer-outcome-label">
                         <FormattedMessage id="studio.transfer.newHost" />
                     </div>

src/views/studio/modals/transfer-host-modal.scss

@@ -173,8 +173,11 @@
         display: flex;
     }
 
+    .transfer-outcome-tile-container {
+        flex-basis: 220px;
+    }
+
     .transfer-outcome-tile {
-        width: 220px;
         box-shadow: 0px 3px 5px $box-shadow-light-gray;
     }
 
@@ -203,5 +206,8 @@
             margin-top: 1rem;
             margin-bottom: 1rem;
         }
+        .transfer-outcome-arrow {
+            margin: auto 1.5rem 1rem 1.5rem;
+        }
     }
 }
\ No newline at end of file