From f778f9ee351fcb61684ca3071568204ea8fdb0dc Mon Sep 17 00:00:00 2001
From: Janne Koivistoinen <janne@sharetribe.com>
Date: Wed, 20 Dec 2017 13:53:56 +0200
Subject: [PATCH 1/2] position sticky and h1 margin-top fixes

---
 src/components/TransactionPanel/TransactionPanel.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/TransactionPanel/TransactionPanel.css b/src/components/TransactionPanel/TransactionPanel.css
index d7600c8c..b5cc2edb 100644
--- a/src/components/TransactionPanel/TransactionPanel.css
+++ b/src/components/TransactionPanel/TransactionPanel.css
@@ -105,7 +105,7 @@
 
   @media (--viewportLarge) {
     max-width: 100%;
-    margin: 177px 0 0 0;
+    margin: 152px 0 0 0;
   }
 }
 
@@ -166,7 +166,7 @@
   display: none;
 
   position: sticky;
-  top: -272px; /* This is a hack to showcase how the component would look when the image isn't sticky */
+  top: -200px; /* This is a hack to showcase how the component would look when the image isn't sticky */
   width: 409px;
   background-color: var(--matterColorLight);
   border: 1px solid var(--matterColorNegative);

From 81e4339928f29dce7a586d3ade120658d9e0f0ac Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Wed, 20 Dec 2017 18:53:54 +0200
Subject: [PATCH 2/2] Margins were in wrong elements

---
 src/components/TransactionPanel/TransactionPanel.css | 9 +++++++--
 src/components/TransactionPanel/TransactionPanel.js  | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/TransactionPanel/TransactionPanel.css b/src/components/TransactionPanel/TransactionPanel.css
index b5cc2edb..0d7c7026 100644
--- a/src/components/TransactionPanel/TransactionPanel.css
+++ b/src/components/TransactionPanel/TransactionPanel.css
@@ -86,14 +86,19 @@
   }
 }
 
-.avatarDesktop {
+.avatarWrapperProviderDesktop {
   display: none;
 
   @media (--viewportLarge) {
-    display: flex;
+    display: block;
     margin-top: 119px;
   }
 }
+.avatarDesktop {
+  @media (--viewportLarge) {
+    display: flex;
+  }
+}
 
 .headingOrder {
   margin: 29px 24px 0 24px;
diff --git a/src/components/TransactionPanel/TransactionPanel.js b/src/components/TransactionPanel/TransactionPanel.js
index 29ad391a..1d43e479 100644
--- a/src/components/TransactionPanel/TransactionPanel.js
+++ b/src/components/TransactionPanel/TransactionPanel.js
@@ -240,7 +240,7 @@ export class TransactionPanelComponent extends Component {
               <AvatarMedium user={currentProvider} />
             </div>
             {isProvider ? (
-              <div className={css.avatarWrapper}>
+              <div className={css.avatarWrapperProviderDesktop}>
                 <AvatarLarge user={currentCustomer} className={css.avatarDesktop} />
               </div>
             ) : null}