Update code-box and full-width-text-code-column markup and styles.

Author: Jesse Borden

_includes/new-includes/components/code-box.html

@@ -1,35 +1,29 @@
 <div
   class="code-box content-wrapper {% if include.with-tabs %}code-box-with-tabs{% endif %}"
 >
-  <div class="content-body">
-    <h2>{{include.content.headline}}</h2>
-    {% if include.content.pre-code-text %}
-    <p class="body-copy">{{include.content.pre-code-text}}</p>
-    {% endif %}
-    {% if include.content.tabs %}
-    <nav>
-      <ul class="code-box-tabs">
-        {% for tab in include.content.tabs %}
-        <li class="body-copy{% if forloop.first %} active{% endif %}">
-          <button data-tab-index="{{forloop.index0}}">{{tab.label}}</button>
-        </li>
-        {% endfor %}
-      </ul>
-    </nav>
-    {% for tab in include.content.tabs %}
-    <pre
-      data-tab-index="{{forloop.index0}}"
-      class="{% if forloop.first %}active{% endif %}"
-    ><code>{{tab.code}}</code></pre>
-    {% endfor %} {% else %}
-    {% if include.content.code %}
-    <pre><code>{{include.content.code}}</code></pre>
-    {% endif %}
-    {% endif %} {% if include.content.after-code-text %}
-    <p class="body-copy">{{include.content.after-code-text}}</p>
-  {% endif %}
-  </div>
-  {% if include.content.links %}
+  <h2>{{include.content.headline}}</h2>
+  {% if include.content.pre-code-text %}
+  <p class="body-copy">{{include.content.pre-code-text}}</p>
+  {% endif %} {% if include.content.tabs %}
+  <nav>
+    <ul class="code-box-tabs">
+      {% for tab in include.content.tabs %}
+      <li class="body-copy{% if forloop.first %} active{% endif %}">
+        <button data-tab-index="{{forloop.index0}}">{{tab.label}}</button>
+      </li>
+      {% endfor %}
+    </ul>
+  </nav>
+  {% for tab in include.content.tabs %}
+  <pre
+    data-tab-index="{{forloop.index0}}"
+    class="{% if forloop.first %}active{% endif %}"
+  ><code>{{tab.code | escape}}</code></pre>
+  {% endfor %} {% else %} {% if include.content.code %}
+  <pre><code>{{include.content.code | escape}}</code></pre>
+  {% endif %} {% endif %} {% if include.content.after-code-text %}
+  <p class="body-copy">{{include.content.after-code-text}}</p>
+  {% endif %}{% if include.content.links %}
   <div class="link-wrapper">
     {% for link in include.content.links %}
     <a class="body-copy" href="{{ link.href }}"> {{ link.copy }} <i></i> </a>

_includes/new-includes/components/full-width-text-code-column.html

@@ -5,10 +5,11 @@
     <h2>{{ include.content.headline }}</h2>
     {% for paragraph in include.content.paragraphs %}
     <p class="body-copy">{{paragraph}}</p>
-    {% endfor %}
+    {% endfor %} {% if include.content.link %}
     <a class="body-copy" href="{{ include.content.link.url }}"
       >{{ include.content.link.text }} <i></i
     ></a>
+    {% endif %}
   </div>
   <!-- prettier-ignore -->
   <div class="code body-copy" markdown="1">

assets/stylesheets/new-stylesheets/pages/_get-started.scss

@@ -379,12 +379,17 @@
   flex-direction: column;
   align-items: flex-start;
   text-align: left;
-  padding: 37px 111px 41px 49px;
+  padding: 37px 50px 41px 50px;
   margin-bottom: 70px;
   box-sizing: border-box;
   border-radius: 22px;
 
+  pre {
+    max-height: 400px;
+  }
+
   &.code-box-with-tabs {
+    overflow: hidden;
     pre {
       display: none;
 
@@ -397,6 +402,7 @@
   &-tabs {
     margin-bottom: 20px;
     padding-left: 0 !important;
+
     button {
       outline: none;
       border: none;
@@ -469,6 +475,16 @@
   a {
     @include link-with-right-arrow;
   }
+
+  @media only screen and (max-width: 768px) {
+    nav {
+      ul {
+        white-space: nowrap;
+        width: calc(100% - 59px);
+        overflow: scroll;
+      }
+    }
+  }
 }
 
 .headline-section {