Update CSS for form and code

Author: markzegarelli

src/_sass/components/_markdown.scss

@@ -476,25 +476,22 @@ div.highlighter-rouge {
   margin-left: 3px
 }
 
-.sample-code-container {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 10px;
-  padding: 5px;
-  overflow: scroll;
-}
+// .sample-code-container {
+//   display: grid;
+//   grid-template-columns: 1fr 1fr;
+//   gap: 10px;
+//   padding: 5px;
+//   overflow: scroll;
+// }
+
+// .output {
+//   outline: 1px solid color(gray-600);
+//   outline-offset: 4px
+// }
+// .output-code {
+//   display: block;
+//   font: 12px color(code-gray) "Droid Sans Mono", "Lucida Console", "Monaco", monospace; 
+//   word-wrap: break-word;
+// }
 
-.output {
-  outline: 1px solid color(gray-600);
-  outline-offset: 4px
-}
-.output-code {
-  display: block;
-  font: 12px color(code-gray) "Droid Sans Mono", "Lucida Console", "Monaco", monospace; 
-  word-wrap: break-word;
-}
 
-.form {
-  outline: 1px solid color(gray-600);
-  outline-offset: 4px;
-}

src/_sass/components/_sample-form.scss

@@ -0,0 +1,43 @@
+.sample-code-container {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: 10px;
+    padding: 5px;
+    overflow: scroll;
+  }
+  
+  .output {
+
+    max-width: 100%;
+    overflow: scroll;
+  }
+
+  .form, .output {
+    outline: 1px solid color(gray-400);
+    outline-offset: 4px;
+    padding: 10px;
+  }
+  .output-code {
+    display: block;
+    font: 12px color(code-gray) "Droid Sans Mono", "Lucida Console", "Monaco", monospace; 
+    word-wrap: break-word;
+  }
+
+ .sample-form {
+    display: grid;
+    grid-template-columns: 50px 1fr;
+    grid-gap: 16px;
+    margin-top: 6px;
+    align-items: center;
+
+    label {
+        grid-column: 1 / 2;
+        text-align: right;
+        font-size: 12px;
+    }
+
+    input, button {
+        grid-column: 2 / 3;
+    }
+}
+

src/_sass/segment.scss

@@ -98,6 +98,7 @@
 @import "components/release-note";
 @import "components/quickinfo";
 @import "components/current-version";
+@import "components/sample-form";
 
 // Pages
 // =================================================

src/connections/spec/page.md

@@ -109,7 +109,7 @@ Here's a complete example of a `page` call:
 </script>
 <script>
   function showOutput() {
-    var show = document.getElementById("output-code");
+    var show = document.getElementById("output_container");
     if (show.style.display === "block") {
       show.style.display = "none";
     } else {
@@ -120,20 +120,21 @@ Here's a complete example of a `page` call:
 
 <div class="sample-code-container">
 <div class="form">
-  <h3> Sample Page </h3>
-  <p><b>See what your page call looks like</b></p>
-  <label for="name">Name:</label>
-  <input type="text" id="name"><br>
-  <label for="title">Title:</label>
-  <input type="text" id="title"><br>
-  <label for="url">URL:</label>
-  <input type="text" id="url"><br>
-  <input type="submit" id="submit" onclick="showMessage(); showOutput()" value="See a sample page call">
+  <h4> Sample Web Form </h4>
+  <div class="sample-form">
+    <label for="name">Name:</label>
+    <input type="text" class="input" id="name">
+    <label for="title">Title:</label>
+    <input type="text" class="input" id="title">
+    <label for="url">URL:</label>
+    <input type="text" class="input" id="url">
+    <input type="submit" class= "button button-hollow" id="submit" onclick="showMessage(); showOutput()" value="See a sample page call">
+  </div>
 </div>
 
 <div class="output">
-<h3>Sample Page Call</h3>
-<pre class="language-javascript"><code class="language-javascript" id="output_container">
+<h4>Sample Page Call</h4>
+<pre class="language-javascript code-output"><code class="language-javascript" id="output_container">
 
 </code></pre>
 </div>