styling

editors/demo/src/HHMI/layout/EditorElements.js

@@ -96,33 +96,6 @@ export default css`
     }
   }
 
-  .mutiple-choice {
-    border: 3px solid #f5f5f7;
-    counter-reset: question-item-multiple;
-    margin: 38px;
-    padding: 20px;
-
-    &:before {
-      bottom: 45px;
-      content: 'Answer Group ' counter(multiple-question) '.';
-      counter-increment: multiple-question;
-      position: relative;
-      right: 20px;
-    }
-
-    .portal p {
-      display: block !important;
-    }
-
-    p:last-of-type {
-      display: none;
-    }
-  }
-
-  .mutiple-choice.ProseMirror-selectednode {
-    outline: none;
-  }
-
   sup,
   sub {
     line-height: 0;
@@ -347,4 +320,40 @@ export default css`
   .transform-icon {
     transform: rotate(40deg);
   }
+
+  /* -- Questions ---------------------------------- */
+
+  /* -- Multiple Choice ---------------------------------- */
+
+  .mutiple-choice {
+    border: 3px solid #f5f5f7;
+    counter-reset: question-item-multiple;
+    margin: 38px;
+    padding: 20px;
+
+    &:before {
+      bottom: 45px;
+      content: 'Answer Group ' counter(multiple-question) '.';
+      counter-increment: multiple-question;
+      position: relative;
+      right: 20px;
+    }
+
+    .portal p {
+      display: block !important;
+    }
+
+    p:last-of-type {
+      display: none;
+    }
+
+    .ProseMirror {
+      box-shadow: none;
+      padding: 5px 5px 0 5px;
+    }
+  }
+
+  .mutiple-choice.ProseMirror-selectednode {
+    outline: none;
+  }
 `;

editors/demo/src/HHMI/layout/HhmiLayout.js

@@ -60,6 +60,7 @@ const TopMenu = styled.div`
 `;
 
 const EditorArea = styled.div`
+  background: #f4f4f7;
   flex-grow: 1;
 `;
 
@@ -68,6 +69,7 @@ const WaxSurfaceScroll = styled.div`
   display: flex;
   height: 100%;
   overflow-y: auto;
+  padding: 25px 25% 0 25%;
   width: 100%;
   /* PM styles  for main content*/
   ${EditorElements};
@@ -79,7 +81,7 @@ const EditorContainer = styled.div`
 
   .ProseMirror {
     box-shadow: 0 0 8px #ecedf1;
-    min-height: 98%;
+    min-height: 100%;
     padding: ${grid(10)};
   }
 `;