Align to baseline

src/components/OrderDetailsPanel/OrderDetailsPanel.css

@@ -24,7 +24,7 @@
     flex-direction: row;
     justify-content: center;
     max-width: 1156px; /* 1060 + (paddingLeft + paddingRight) */
-    margin: 0 auto 60px;
+    margin: 0 auto 57px auto;
     padding: 0 48px;
   }
 }

src/components/SaleDetailsPanel/SaleDetailsPanel.css

@@ -11,7 +11,7 @@
   @media (--viewportLarge) {
     flex-direction: row;
     max-width: 1156px; /* 1060 + (paddingLeft + paddingRight) */
-    margin: 0 auto 60px;
+    margin: 0 auto 57px auto;
     padding: 0 48px;
   }
 }
@@ -79,16 +79,18 @@
 
   @media (--viewportLarge) {
     max-width: 100%;
-    margin: 40px 0 0 0;
+    margin: 42px 0 0 0;
   }
 }
 
 .infoText {
-  margin: 24px 24px 0 24px;
+  margin: 18px 24px 0 24px;
 
+  @media (--viewportMedium) {
+    margin: 23px 24px 0 24px;
+  }
   @media (--viewportLarge) {
-    margin: 31px 0 0 0;
-    line-height: 32px;
+    margin: 23px 0 0 0;
   }
 }
 
@@ -138,13 +140,27 @@
 
   @media (--viewportLarge) {
     display: flex;
-    margin-top: 121px;
+    margin-top: 119px;
+  }
+}
+
+.breakdown {
+  margin: 14px 0 0 0;
+
+  @media (--viewportMedium) {
+    margin: 18px 0 0 0;
+  }
+  @media (--viewportLarge) {
+    margin: 14px 0 0 0;
   }
 }
 
 .breakdownContainerMobile {
-  margin: 0 24px 0 24px;
+  margin: 47px 24px 0 24px;
 
+  @media (--viewportMedium) {
+    margin-top: 43px;
+  }
   @media (--viewportLarge) {
     display: none;
   }
@@ -176,8 +192,11 @@
 .breakdownTitleMobile {
   /* Font */
   color: var(--matterColorAnti);
+  margin: 0;
 
-  margin: 47px 0 14px 0;
+  @media (--viewportMedium) {
+    margin: 0;
+  }
 }
 
 .breakdownTitleDesktop {
@@ -190,29 +209,39 @@
 }
 
 .messagesContainer {
-  margin: 0 24px 0 24px;
+  margin: 46px 24px 0 24px;
+
+  @media (--viewportMedium) {
+    margin: 46px 24px 0 24px;
+  }
+  @media (--viewportLarge) {
+    margin: 43px 0 0 0;
+  }
+}
+
+.messagesContainerWithInfoAbove {
+  @media (--viewportLarge) {
+    margin: 36px 0 0 0;
+  }
+}
+
+.messagesHeading {
+  color: var(--matterColorAnti);
+  margin: 0;
 
   @media (--viewportMedium) {
     margin: 0;
   }
 }
 
-.messagesContainerWithInfoAbove {
-}
-
-.messagesHeading {
-  color: var(--matterColorAnti);
-  margin: 48px 0 0 0;
+.messages {
+  margin-top: 17px;
 
   @media (--viewportMedium) {
-    margin: 48px 0 0 0;
+    margin-top: 19px;
   }
 }
 
-.messages {
-  margin-top: 24px;
-}
-
 .actionButtons {
   /* Position action button row above the footer */
   z-index: 9;
@@ -235,7 +264,7 @@
     position: static;
     box-shadow: none;
     width: auto;
-    margin: 104px 0 0 0;
+    margin: 82px 0 0 0;
     padding: 0;
   }
 }

src/components/SaleDetailsPanel/SaleDetailsPanel.js

@@ -22,7 +22,12 @@ const breakdown = transaction => {
   const loaded = transaction && transaction.id && transaction.booking && transaction.booking.id;
 
   return loaded ? (
-    <BookingBreakdown userRole="provider" transaction={transaction} booking={transaction.booking} />
+    <BookingBreakdown
+      className={css.breakdown}
+      userRole="provider"
+      transaction={transaction}
+      booking={transaction.booking}
+    />
   ) : null;
 };
 
@@ -143,14 +148,14 @@ export const SaleDetailsPanelComponent = props => {
         id: 'SaleDetailsPanel.customerBannedStatus',
       })
     : saleInfoText(currentTransaction, customerDisplayName);
-  const showInfoMessage = !!infoText;
+  const showInfoText = !!infoText;
 
   const listingTitle = currentListing.attributes.title;
   const firstImage =
     currentListing.images && currentListing.images.length > 0 ? currentListing.images[0] : null;
 
   const messagesContainerClasses = classNames(css.messagesContainer, {
-    [css.messagesContainerWithInfoAbove]: showInfoMessage,
+    [css.messagesContainerWithInfoAbove]: showInfoText,
   });
   const showMessages = messages.length > 0 || fetchMessagesError;
   // TODO: handle fetchMessagesError
@@ -229,7 +234,7 @@ export const SaleDetailsPanelComponent = props => {
             <AvatarLarge user={currentCustomer} className={css.avatarDesktop} />
           </div>
           <h1 className={css.title}>{title}</h1>
-          <p className={css.infoText}>{infoText}</p>
+          {showInfoText ? <p className={css.infoText}>{infoText}</p> : null}
           <div className={css.errorMobile}>
             {acceptErrorMessage}
             {declineErrorMessage}

src/components/SaleDetailsPanel/__snapshots__/SaleDetailsPanel.test.js.snap

@@ -89,7 +89,6 @@ exports[`SaleDetailsPanel accepted matches snapshot 1`] = `
           }
         />
       </h1>
-      <p />
       <div />
       <div>
         <h3>
@@ -529,7 +528,6 @@ exports[`SaleDetailsPanel autodeclined matches snapshot 1`] = `
           }
         />
       </h1>
-      <p />
       <div />
       <div>
         <h3>
@@ -1441,7 +1439,6 @@ exports[`SaleDetailsPanel declined matches snapshot 1`] = `
           }
         />
       </h1>
-      <p />
       <div />
       <div>
         <h3>
@@ -1881,7 +1878,6 @@ exports[`SaleDetailsPanel delivered matches snapshot 1`] = `
           }
         />
       </h1>
-      <p />
       <div />
       <div>
         <h3>

src/containers/OrderPage/OrderPage.css

@@ -1,9 +1,6 @@
 @import '../../marketplace.css';
 
 .mainContent {
-  @media (--viewportLarge) {
-    margin-bottom: 122px;
-  }
 }
 
 .loading {