From 974203d325b04c49ac2a3db88be6c4c8bcc8163a Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Wed, 15 May 2019 11:53:43 -0400
Subject: [PATCH 1/4] fix alignment of remix credit avatar, text

---
 src/views/preview/preview.scss | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss
index c949398f8..45f7bf584 100644
--- a/src/views/preview/preview.scss
+++ b/src/views/preview/preview.scss
@@ -129,9 +129,10 @@ $stage-width: 480px;
             height: 3rem;
 
             &.remix {
-                margin-right: .5em;
+                margin-right: .75em;
                 width: 2rem;
                 height: 2rem;
+                align-self: flex-start;
             }
         }
     }
@@ -403,8 +404,12 @@ $stage-width: 480px;
             width: 100%;
         }
 
-        > .description-block:first-child {
-            margin-top: 1rem;
+        > * {
+            margin-bottom: .75rem;
+        }
+
+        > .description-block:last-child {
+            margin-bottom: 0;
         }
     }
 
@@ -413,10 +418,11 @@ $stage-width: 480px;
         border: 1px solid $ui-blue-10percent;
         border-radius: 8px;
         background-color: $ui-blue-10percent;
-        padding: .5rem;
-        width: calc(100% - 1rem);
+        padding: .75rem;
+        width: calc(100% - 1.5rem);
         flex-wrap: nowrap;
         align-items: center;
+        justify-content: flex-start;
 
         @media #{$medium-and-smaller} {
             flex-direction: row;
@@ -427,15 +433,15 @@ $stage-width: 480px;
     .credit-text {
         font-size: .875rem;
         flex-shrink: 1;
+        text-align: left;
     }
 
     .description-block {
         display: flex;
         width: 100%;
-        min-height: 0;
+        height: 100%;
         flex-direction: column;
         align-items: flex-start;
-        flex: 1;
     }
 
     .project-textlabel {
@@ -465,12 +471,13 @@ $stage-width: 480px;
     .project-description-form {
         display: flex;
         width: 100%;
+        height: 100%;
+        min-height: 2rem;
         flex-grow: 1;
     }
 
     .project-description-edit {
         display: flex;
-        margin-bottom: .75rem;
         border: 1px solid $ui-blue-10percent;
         border-radius: 8px;
         background-color: $ui-blue-10percent;

From 9afe46622b562b2d5247e75a12916dc56ed38393 Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Wed, 15 May 2019 18:08:25 -0400
Subject: [PATCH 2/4] added comments about form height

---
 src/views/preview/preview.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss
index 45f7bf584..4c90e0879 100644
--- a/src/views/preview/preview.scss
+++ b/src/views/preview/preview.scss
@@ -471,8 +471,14 @@ $stage-width: 480px;
     .project-description-form {
         display: flex;
         width: 100%;
+        // surprisingly, without setting height: 100% here, flex-grow causes the
+        // height to be too large
         height: 100%;
+        // surprisingly, just having some min-height actually reduces the height
+        // of the element when it is being vertically crowded by other elements
         min-height: 2rem;
+        // necessary to cause the element to take up the maximum height
+        // available
         flex-grow: 1;
     }
 

From 1cb4bb5f7e54d445fa2e57a7f3f66dd3d92cc1bd Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Tue, 21 May 2019 00:22:37 -0400
Subject: [PATCH 3/4] adjust instructions column padding-top

---
 src/views/preview/preview.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss
index 4c90e0879..8ec4f0a41 100644
--- a/src/views/preview/preview.scss
+++ b/src/views/preview/preview.scss
@@ -397,6 +397,7 @@ $stage-width: 480px;
         align-items: flex-start;
         flex: 1;
         flex-flow: column;
+        padding-top: .25rem;
 
         @media #{$medium-and-smaller} {
             margin-top: .5rem;

From 69eca8ed49f12c735c084919450d91fc0b80fcc5 Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Tue, 21 May 2019 23:37:10 -0400
Subject: [PATCH 4/4] defined player-header and redefined player-height to make
 project notes correct height

---
 src/views/preview/preview.scss | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss
index 8ec4f0a41..02e75ea6c 100644
--- a/src/views/preview/preview.scss
+++ b/src/views/preview/preview.scss
@@ -3,7 +3,8 @@
 
 /* stage size constants */
 $player-width: 482px;
-$player-height: 406px;
+$player-height: 362px;
+$player-header: 44px;
 $stage-width: 480px;
 
 /* override view padding for share banner */
@@ -393,11 +394,11 @@ $stage-width: 480px;
 
     .project-notes {
         margin-left: 1rem;
-        height: $player-height;
+        height: calc(#{$player-height} + #{$player-header} - .3125rem);
         align-items: flex-start;
         flex: 1;
         flex-flow: column;
-        padding-top: .25rem;
+        margin-top: .3125rem;
 
         @media #{$medium-and-smaller} {
             margin-top: .5rem;