diff --git a/docs/source/_assets/js/app.js b/docs/source/_assets/js/app.js
index 634c5cea5..7fa375b53 100644
--- a/docs/source/_assets/js/app.js
+++ b/docs/source/_assets/js/app.js
@@ -5,7 +5,6 @@ window.anchors = new anchorJS()
 window.Vue = require('vue')
 
 Vue.component('responsive-code-sample', require('./components/ResponsiveCodeSample.vue'))
-Vue.component('class-table', require('./components/ClassTable.vue'))
 
 const app = new Vue({
   el: '#app'
diff --git a/docs/source/_assets/js/components/ClassTable.vue b/docs/source/_assets/js/components/ClassTable.vue
deleted file mode 100644
index a773cd1fc..000000000
--- a/docs/source/_assets/js/components/ClassTable.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <div class="border-t border-grey-lighter">
-    <table class="w-full text-left table-collapse">
-      <thead>
-        <tr>
-          <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-          <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-          <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-        </tr>
-      </thead>
-      <tbody class="align-baseline">
-        <tr v-for="(row, i) in visibleRows">
-          <td :class="i === 0 ? 'border-smoke' : 'border-smoke-light'" class="p-2 border-t font-mono text-xs text-purple-dark whitespace-no-wrap">{{ row[0] }}</td>
-          <td :class="i === 0 ? 'border-smoke' : 'border-smoke-light'" class="p-2 border-t font-mono text-xs text-blue-dark whitespace-pre">{{ row[1] }}</td>
-          <td :class="i === 0 ? 'border-smoke' : 'border-smoke-light'" class="p-2 border-t text-sm text-grey-darker">{{ row[2] }}</td>
-        </tr>
-      </tbody>
-    </table>
-    <p class="text-center py-4" v-show="!showAll && rows.length > 10">
-      <span role="button" @click="showAll = true" class="text-sm text-blue hover:underline">Show all {{rows.length}}</span>
-    </p>
-  </div>
-</template>
-
-<script>
-export default {
-  props: ['rows'],
-  data() {
-    return {
-      showAll: false,
-    }
-  },
-  computed: {
-    visibleRows() {
-      return this.showAll ? this.rows : this.rows.slice(0, 10)
-    }
-  }
-}
-</script>
diff --git a/docs/source/_partials/class-table.blade.php b/docs/source/_partials/class-table.blade.php
index ed1b0013e..17b225d58 100644
--- a/docs/source/_partials/class-table.blade.php
+++ b/docs/source/_partials/class-table.blade.php
@@ -1,24 +1,22 @@
-<div>
-  <class-table :rows="{{ json_encode($rows) }}"></class-table>
+<div class="border-t border-b border-grey-light">
+  <div class="max-h-sm overflow-y-scroll">
+    <table class="w-full text-left table-collapse">
+      <thead>
+        <tr>
+          <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
+          <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
+          <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
+        </tr>
+      </thead>
+      <tbody class="align-baseline">
+        @foreach ($rows as $row)
+        <tr>
+          <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-purple-dark whitespace-no-wrap">{{ $row[0] }}</td>
+          <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-blue-dark whitespace-pre">{{ $row[1] }}</td>
+          <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} text-sm text-grey-darker whitespace-no-wrap lg:whitespace-normal">{{ $row[2] }}</td>
+        </tr>
+        @endforeach
+      </tbody>
+    </table>
+  </div>
 </div>
-{{-- <div class="border-t border-grey-lighter">
-  <table class="w-full text-left table-collapse">
-    <thead>
-      <tr>
-        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Class</th>
-        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Properties</th>
-        <th class="text-sm font-semibold text-grey-darker p-2 bg-grey-lightest">Description</th>
-      </tr>
-    </thead>
-    <tbody class="align-baseline">
-      @foreach ($rows as $row)
-      <tr>
-        <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-purple-dark whitespace-no-wrap">{{ $row[0] }}</td>
-        <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} font-mono text-xs text-blue-dark whitespace-pre">{{ $row[1] }}</td>
-        <td class="p-2 border-t {{ $loop->first ? 'border-smoke' : 'border-smoke-light' }} text-sm text-grey-darker">{{ $row[2] }}</td>
-      </tr>
-      @endforeach
-    </tbody>
-  </table>
-</div>
- --}}
diff --git a/docs/tailwind.js b/docs/tailwind.js
index 52cc443e5..4a65da7a5 100644
--- a/docs/tailwind.js
+++ b/docs/tailwind.js
@@ -70,6 +70,10 @@ config.height = Object.assign(config.height, {
   '7': '1.75rem',
 })
 
+config.maxHeight = Object.assign(config.maxHeight, {
+  'sm': '30rem',
+})
+
 config.padding = Object.assign(config.padding, {
   '10': '2.5rem',
   '12': '3rem',