From 795b856d560036a87b43f6404ae1fa0b4959ff37 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Thu, 9 Apr 2026 22:42:43 +0100
Subject: [PATCH] feat(wiki): add admin wiki management page

---
 app/layouts/admin.vue    |  17 +
 app/pages/admin/wiki.vue | 886 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 903 insertions(+)
 create mode 100644 app/pages/admin/wiki.vue

diff --git a/app/layouts/admin.vue b/app/layouts/admin.vue
index 7f7d290..0802815 100644
--- a/app/layouts/admin.vue
+++ b/app/layouts/admin.vue
@@ -50,6 +50,14 @@
               Series
             </NuxtLink>
           </li>
+          <li>
+            <NuxtLink
+              to="/admin/wiki"
+              :class="{ active: route.path.startsWith('/admin/wiki') }"
+            >
+              Wiki
+            </NuxtLink>
+          </li>
         </ul>
 
         <div class="sidebar-section">Site</div>
@@ -136,6 +144,15 @@
                   Series
                 </NuxtLink>
               </li>
+              <li>
+                <NuxtLink
+                  to="/admin/wiki"
+                  :class="{ active: route.path.startsWith('/admin/wiki') }"
+                  @click="isMobileMenuOpen = false"
+                >
+                  Wiki
+                </NuxtLink>
+              </li>
             </ul>
 
             <div class="sidebar-section">Site</div>
diff --git a/app/pages/admin/wiki.vue b/app/pages/admin/wiki.vue
new file mode 100644
index 0000000..3edeff9
--- /dev/null
+++ b/app/pages/admin/wiki.vue
@@ -0,0 +1,886 @@
+<template>
+  <div class="admin-wiki">
+    <!-- Page Header -->
+    <div class="page-header">
+      <div class="header-row">
+        <div>
+          <h1>Wiki</h1>
+          <p v-if="articles">
+            {{ articles.length }} articles
+            <template v-if="collections.length"> across {{ collections.length }} collections</template>
+          </p>
+        </div>
+        <div class="header-actions">
+          <button
+            class="btn"
+            :disabled="syncing"
+            @click="syncFromOutline"
+          >
+            {{ syncing ? 'Syncing...' : 'Sync from Outline' }}
+          </button>
+        </div>
+      </div>
+
+      <!-- Sync Results -->
+      <div v-if="syncResults" class="sync-results">
+        <span v-if="syncResults.created" class="sync-stat sync-created">{{ syncResults.created }} created</span>
+        <span v-if="syncResults.updated" class="sync-stat sync-updated">{{ syncResults.updated }} updated</span>
+        <span v-if="syncResults.deleted" class="sync-stat sync-deleted">{{ syncResults.deleted }} removed</span>
+        <span v-if="syncResults.errors" class="sync-stat sync-errors">{{ syncResults.errors }} errors</span>
+        <span v-if="!syncResults.created && !syncResults.updated && !syncResults.deleted && !syncResults.errors" class="sync-stat">Already up to date</span>
+      </div>
+    </div>
+
+    <!-- Filter Bar -->
+    <div class="filter-bar">
+      <div class="field" style="margin-bottom: 0; flex: 1">
+        <input
+          v-model="searchQuery"
+          placeholder="Search articles by title..."
+        />
+      </div>
+      <div class="field" style="margin-bottom: 0">
+        <select v-model="collectionFilter" aria-label="Filter by collection">
+          <option value="">All Collections</option>
+          <option v-for="col in collections" :key="col" :value="col">{{ col }}</option>
+        </select>
+      </div>
+    </div>
+
+    <!-- Batch Action Bar -->
+    <div v-if="selectedIds.length" class="batch-bar">
+      <span class="batch-count">{{ selectedIds.length }} selected</span>
+      <button
+        v-if="collectionFilter && !allInCollectionSelected"
+        class="link-btn"
+        @click="selectAllInCollection"
+      >
+        Select all in "{{ collectionFilter }}"
+      </button>
+      <div class="batch-tag-picker">
+        <select v-model="batchTagToAdd" aria-label="Tag to add" class="batch-select">
+          <option value="">Add tag...</option>
+          <option v-for="tag in availableTags" :key="tag.slug" :value="tag.slug">{{ tag.label }}</option>
+        </select>
+        <button
+          class="btn btn-primary"
+          :disabled="!batchTagToAdd || batchApplying"
+          @click="applyBatchTag"
+        >
+          {{ batchApplying ? 'Applying...' : 'Apply' }}
+        </button>
+      </div>
+      <button class="link-btn" @click="selectedIds = []">Clear selection</button>
+    </div>
+
+    <!-- Loading / Error -->
+    <div v-if="pending" class="loading-state">
+      <div class="spinner" />
+      <span>Loading articles...</span>
+    </div>
+
+    <div v-else-if="error" class="error-state">
+      Error loading articles: {{ error }}
+    </div>
+
+    <!-- Article Table -->
+    <div v-else class="table-wrap">
+      <table v-if="filtered.length">
+        <thead>
+          <tr>
+            <th class="col-check">
+              <label class="custom-check" aria-label="Select all">
+                <input
+                  type="checkbox"
+                  :checked="allVisibleSelected"
+                  :indeterminate="!allVisibleSelected && someVisibleSelected"
+                  @change="toggleSelectAll"
+                />
+                <span class="check-mark" />
+              </label>
+            </th>
+            <th class="sortable" @click="toggleSort('collection')">
+              Collection
+              <span v-if="sortKey === 'collection'" class="sort-arrow">{{ sortDir === 'asc' ? '↑' : '↓' }}</span>
+            </th>
+            <th class="sortable col-title" @click="toggleSort('title')">
+              Title
+              <span v-if="sortKey === 'title'" class="sort-arrow">{{ sortDir === 'asc' ? '↑' : '↓' }}</span>
+            </th>
+            <th>Tags</th>
+            <th class="col-actions-head">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="article in filtered"
+            :key="article._id"
+            class="selectable-row"
+            :class="{ 'row-selected': selectedIds.includes(article._id) }"
+            @click="toggleSelect(article._id)"
+          >
+            <td class="col-check" @click.stop>
+              <label class="custom-check" :aria-label="`Select ${article.title}`">
+                <input
+                  type="checkbox"
+                  :checked="selectedIds.includes(article._id)"
+                  @change="toggleSelect(article._id)"
+                />
+                <span class="check-mark" />
+              </label>
+            </td>
+            <td class="col-collection">{{ article.collection || '—' }}</td>
+            <td class="col-title">
+              <a :href="article.url" target="_blank" rel="noopener" class="article-link">
+                {{ article.title }}
+              </a>
+            </td>
+            <td class="col-tags" @click.stop>
+              <div v-if="editingId !== article._id" class="tag-display">
+                <span v-for="tag in article.tags" :key="tag" class="tag-chip">{{ tagLabel(tag) }}</span>
+                <span v-if="!article.tags?.length" class="no-tags">no tags</span>
+              </div>
+              <div v-else class="tag-edit-inline">
+                <select
+                  v-model="tagToAdd"
+                  aria-label="Add tag"
+                  class="tag-add-select"
+                  @change="addTagToEditing"
+                >
+                  <option value="">Add...</option>
+                  <option
+                    v-for="tag in availableTagsForEditing"
+                    :key="tag.slug"
+                    :value="tag.slug"
+                  >{{ tag.label }}</option>
+                </select>
+                <div class="editing-tags">
+                  <span
+                    v-for="tag in editingTags"
+                    :key="tag"
+                    class="tag-chip tag-chip-editable"
+                  >
+                    {{ tagLabel(tag) }}
+                    <button class="tag-remove" @click="removeTagFromEditing(tag)" aria-label="Remove tag">&times;</button>
+                  </span>
+                </div>
+                <div class="tag-edit-actions">
+                  <button class="link-btn" @click="cancelEditing">Cancel</button>
+                  <button class="link-btn link-btn-save" :disabled="savingTags" @click="saveArticleTags">
+                    {{ savingTags ? 'Saving...' : 'Save' }}
+                  </button>
+                </div>
+              </div>
+            </td>
+            <td class="col-actions" @click.stop>
+              <button
+                v-if="editingId !== article._id"
+                class="link-btn"
+                @click="startEditing(article)"
+              >
+                Edit tags
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <div v-else class="empty-state">
+        No articles found matching your criteria
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  layout: 'admin',
+  middleware: 'admin',
+})
+
+const toast = useToast()
+
+// ---- Data Fetching ----
+const {
+  data: articles,
+  pending,
+  error,
+  refresh,
+} = await useFetch('/api/admin/wiki')
+
+const { data: tagsData } = await useFetch('/api/tags')
+
+const availableTags = computed(() => tagsData.value?.tags || [])
+
+const tagLabelMap = computed(() => {
+  const map = {}
+  for (const tag of availableTags.value) {
+    map[tag.slug] = tag.label
+  }
+  return map
+})
+
+const tagLabel = (slug) => tagLabelMap.value[slug] || slug
+
+// ---- Filters & Sort ----
+const searchQuery = ref('')
+const collectionFilter = ref('')
+const sortKey = ref('')
+const sortDir = ref('asc')
+
+const collections = computed(() => {
+  if (!articles.value) return []
+  const names = new Set()
+  for (const a of articles.value) {
+    if (a.collection) names.add(a.collection)
+  }
+  return [...names].sort()
+})
+
+const toggleSort = (key) => {
+  if (sortKey.value === key) {
+    sortDir.value = sortDir.value === 'asc' ? 'desc' : 'asc'
+  } else {
+    sortKey.value = key
+    sortDir.value = 'asc'
+  }
+}
+
+const filtered = computed(() => {
+  if (!articles.value) return []
+
+  const result = articles.value.filter((a) => {
+    const q = searchQuery.value.toLowerCase()
+    const matchesSearch = !q || a.title.toLowerCase().includes(q)
+    const matchesCollection = !collectionFilter.value || a.collection === collectionFilter.value
+    return matchesSearch && matchesCollection
+  })
+
+  if (sortKey.value) {
+    const dir = sortDir.value === 'asc' ? 1 : -1
+    const key = sortKey.value
+    result.sort((a, b) => {
+      const aVal = (a[key] || '').toString().toLowerCase()
+      const bVal = (b[key] || '').toString().toLowerCase()
+      return aVal < bVal ? -dir : aVal > bVal ? dir : 0
+    })
+  }
+
+  return result
+})
+
+// ---- Selection ----
+const selectedIds = ref([])
+
+const allVisibleSelected = computed(() => {
+  if (!filtered.value.length) return false
+  return filtered.value.every((a) => selectedIds.value.includes(a._id))
+})
+
+const someVisibleSelected = computed(() => {
+  return filtered.value.some((a) => selectedIds.value.includes(a._id))
+})
+
+const allInCollectionSelected = computed(() => {
+  if (!collectionFilter.value || !articles.value) return false
+  const inCollection = articles.value.filter((a) => a.collection === collectionFilter.value)
+  return inCollection.every((a) => selectedIds.value.includes(a._id))
+})
+
+const toggleSelectAll = () => {
+  if (allVisibleSelected.value) {
+    const visibleIds = new Set(filtered.value.map((a) => a._id))
+    selectedIds.value = selectedIds.value.filter((id) => !visibleIds.has(id))
+  } else {
+    const currentSet = new Set(selectedIds.value)
+    for (const a of filtered.value) {
+      currentSet.add(a._id)
+    }
+    selectedIds.value = [...currentSet]
+  }
+}
+
+const toggleSelect = (id) => {
+  const idx = selectedIds.value.indexOf(id)
+  if (idx >= 0) {
+    selectedIds.value.splice(idx, 1)
+  } else {
+    selectedIds.value.push(id)
+  }
+}
+
+const selectAllInCollection = () => {
+  if (!collectionFilter.value || !articles.value) return
+  const currentSet = new Set(selectedIds.value)
+  for (const a of articles.value) {
+    if (a.collection === collectionFilter.value) {
+      currentSet.add(a._id)
+    }
+  }
+  selectedIds.value = [...currentSet]
+}
+
+// ---- Sync ----
+const syncing = ref(false)
+const syncResults = ref(null)
+
+const syncFromOutline = async () => {
+  syncing.value = true
+  syncResults.value = null
+  try {
+    const result = await $fetch('/api/admin/wiki/sync', { method: 'POST' })
+    syncResults.value = result
+    await refresh()
+    toast.add({
+      title: 'Sync complete',
+      description: `${result.created} created, ${result.updated} updated, ${result.deleted} removed`,
+      color: result.errors ? 'orange' : 'green',
+    })
+  } catch (err) {
+    toast.add({
+      title: 'Sync failed',
+      description: err.data?.statusMessage || err.message,
+      color: 'red',
+    })
+  } finally {
+    syncing.value = false
+  }
+}
+
+// ---- Per-Article Tag Editing ----
+const editingId = ref(null)
+const editingTags = ref([])
+const tagToAdd = ref('')
+const savingTags = ref(false)
+
+const availableTagsForEditing = computed(() => {
+  return availableTags.value.filter((t) => !editingTags.value.includes(t.slug))
+})
+
+const startEditing = (article) => {
+  editingId.value = article._id
+  editingTags.value = [...(article.tags || [])]
+  tagToAdd.value = ''
+}
+
+const cancelEditing = () => {
+  editingId.value = null
+  editingTags.value = []
+  tagToAdd.value = ''
+}
+
+const addTagToEditing = () => {
+  if (tagToAdd.value && !editingTags.value.includes(tagToAdd.value)) {
+    editingTags.value.push(tagToAdd.value)
+  }
+  tagToAdd.value = ''
+}
+
+const removeTagFromEditing = (tag) => {
+  editingTags.value = editingTags.value.filter((t) => t !== tag)
+}
+
+const saveArticleTags = async () => {
+  savingTags.value = true
+  try {
+    await $fetch(`/api/admin/wiki/${editingId.value}`, {
+      method: 'PATCH',
+      body: { tags: editingTags.value },
+    })
+    await refresh()
+    cancelEditing()
+    toast.add({ title: 'Tags updated', color: 'green' })
+  } catch (err) {
+    toast.add({
+      title: 'Failed to update tags',
+      description: err.data?.statusMessage || err.message,
+      color: 'red',
+    })
+  } finally {
+    savingTags.value = false
+  }
+}
+
+// ---- Batch Tagging ----
+const batchTagToAdd = ref('')
+const batchApplying = ref(false)
+
+const applyBatchTag = async () => {
+  if (!batchTagToAdd.value || !selectedIds.value.length) return
+  batchApplying.value = true
+  try {
+    const result = await $fetch('/api/admin/wiki/batch-tag', {
+      method: 'POST',
+      body: {
+        articleIds: selectedIds.value,
+        addTags: [batchTagToAdd.value],
+      },
+    })
+    await refresh()
+    toast.add({
+      title: 'Batch tag applied',
+      description: `${result.modified} articles updated`,
+      color: 'green',
+    })
+    batchTagToAdd.value = ''
+    selectedIds.value = []
+  } catch (err) {
+    toast.add({
+      title: 'Batch tag failed',
+      description: err.data?.statusMessage || err.message,
+      color: 'red',
+    })
+  } finally {
+    batchApplying.value = false
+  }
+}
+</script>
+
+<style scoped>
+.admin-wiki {}
+
+/* ---- PAGE HEADER ---- */
+.page-header {
+  padding: 28px 28px 20px;
+  border-bottom: 1px dashed var(--border);
+}
+
+.header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.page-header h1 {
+  font-family: 'Brygada 1918', serif;
+  font-size: 24px;
+  font-weight: 500;
+  color: var(--text-bright);
+  line-height: 1.2;
+  margin-bottom: 4px;
+}
+
+.page-header p {
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
+.header-actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+/* ---- SYNC RESULTS ---- */
+.sync-results {
+  display: flex;
+  gap: 12px;
+  margin-top: 12px;
+  flex-wrap: wrap;
+}
+
+.sync-stat {
+  font-size: 11px;
+  padding: 2px 8px;
+  border: 1px dashed var(--border);
+  color: var(--text-dim);
+}
+
+.sync-created {
+  color: var(--green, #4a7);
+  border-color: var(--green, #4a7);
+}
+
+.sync-updated {
+  color: var(--candle);
+  border-color: var(--candle);
+}
+
+.sync-deleted {
+  color: var(--text-faint);
+}
+
+.sync-errors {
+  color: var(--ember);
+  border-color: var(--ember);
+}
+
+/* ---- FILTER BAR ---- */
+.filter-bar {
+  display: flex;
+  gap: 12px;
+  padding: 16px 28px;
+  border-bottom: 1px dashed var(--border);
+}
+
+/* ---- BATCH ACTION BAR ---- */
+.batch-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 28px;
+  border-bottom: 1px dashed var(--border);
+  background: var(--surface);
+  flex-wrap: wrap;
+}
+
+.batch-count {
+  font-size: 12px;
+  color: var(--text-bright);
+  font-weight: 500;
+}
+
+.batch-tag-picker {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-left: auto;
+}
+
+.batch-select {
+  font-family: 'Commit Mono', monospace;
+  font-size: 12px;
+  padding: 4px 8px;
+  border: 1px solid var(--border);
+  background: var(--input-bg);
+  color: var(--text);
+}
+
+.batch-select:focus {
+  border-color: var(--candle);
+  outline: none;
+}
+
+/* ---- TABLE ---- */
+.table-wrap {
+  padding: 0 28px 24px;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+thead th {
+  text-align: left;
+  padding: 12px 10px;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-faint);
+  border-bottom: 1px dashed var(--border);
+  font-weight: normal;
+}
+
+thead th.sortable {
+  cursor: pointer;
+  user-select: none;
+}
+
+thead th.sortable:hover {
+  color: var(--text-dim);
+}
+
+.sort-arrow {
+  font-size: 10px;
+  color: var(--candle);
+}
+
+tbody tr {
+  border-bottom: 1px dashed var(--border);
+  transition: background 0.1s;
+}
+
+tbody tr:hover {
+  background: var(--surface);
+}
+
+tbody td {
+  padding: 10px;
+  color: var(--text);
+  vertical-align: middle;
+}
+
+.col-check {
+  width: 40px;
+  padding-left: 12px;
+  padding-right: 4px;
+}
+
+.selectable-row {
+  cursor: pointer;
+}
+
+.row-selected {
+  background: var(--surface);
+}
+
+/* ---- CUSTOM CHECKBOX ---- */
+.custom-check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  position: relative;
+  width: 16px;
+  height: 16px;
+}
+
+.custom-check input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.check-mark {
+  width: 14px;
+  height: 14px;
+  border: 1px solid var(--border);
+  background: var(--input-bg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.custom-check:hover .check-mark {
+  border-color: var(--candle);
+}
+
+.custom-check input:checked + .check-mark {
+  background: var(--candle);
+  border-color: var(--candle);
+}
+
+.custom-check input:checked + .check-mark::after {
+  content: '';
+  width: 4px;
+  height: 8px;
+  border: solid var(--bg);
+  border-width: 0 1.5px 1.5px 0;
+  transform: rotate(45deg) translateY(-1px);
+}
+
+.custom-check input:indeterminate + .check-mark {
+  background: var(--candle);
+  border-color: var(--candle);
+}
+
+.custom-check input:indeterminate + .check-mark::after {
+  content: '';
+  width: 8px;
+  height: 0;
+  border-bottom: 1.5px solid var(--bg);
+}
+
+/* ---- COLUMNS ---- */
+.col-collection {
+  font-size: 11px;
+  color: var(--text-dim);
+  white-space: nowrap;
+}
+
+.col-title {
+  min-width: 200px;
+}
+
+.article-link {
+  color: var(--text-bright);
+  font-size: 13px;
+  text-decoration: none;
+}
+
+.article-link:hover {
+  color: var(--candle);
+  text-decoration: underline;
+}
+
+/* ---- TAGS ---- */
+.col-tags {
+  min-width: 180px;
+}
+
+.tag-display {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.tag-chip {
+  font-size: 10px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  padding: 2px 6px;
+  border: 1px dashed var(--border);
+  color: var(--text-dim);
+}
+
+.tag-chip-editable {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.tag-remove {
+  background: none;
+  border: none;
+  color: var(--text-faint);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 0 2px;
+  line-height: 1;
+}
+
+.tag-remove:hover {
+  color: var(--ember);
+}
+
+.no-tags {
+  font-size: 11px;
+  color: var(--text-faint);
+  font-style: italic;
+}
+
+/* ---- INLINE TAG EDITING ---- */
+.tag-edit-inline {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.tag-add-select {
+  font-family: 'Commit Mono', monospace;
+  font-size: 11px;
+  padding: 3px 6px;
+  border: 1px solid var(--border);
+  background: var(--input-bg);
+  color: var(--text);
+  max-width: 160px;
+}
+
+.tag-add-select:focus {
+  border-color: var(--candle);
+  outline: none;
+}
+
+.editing-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.tag-edit-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* ---- ACTIONS ---- */
+.col-actions-head {
+  text-align: right;
+}
+
+.col-actions {
+  text-align: right;
+  white-space: nowrap;
+}
+
+.link-btn {
+  background: none;
+  border: none;
+  color: var(--candle);
+  cursor: pointer;
+  font-family: 'Commit Mono', monospace;
+  font-size: 11px;
+  padding: 2px 6px;
+  text-decoration: none;
+}
+
+.link-btn:hover {
+  text-decoration: underline;
+}
+
+.link-btn:disabled {
+  color: var(--text-faint);
+  cursor: default;
+  text-decoration: none;
+}
+
+.link-btn-save {
+  font-weight: 500;
+}
+
+/* ---- STATES ---- */
+.loading-state {
+  text-align: center;
+  padding: 48px 24px;
+  color: var(--text-faint);
+  font-size: 12px;
+}
+
+.error-state {
+  text-align: center;
+  padding: 48px 24px;
+  color: var(--ember);
+  font-size: 12px;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 48px 24px;
+  color: var(--text-faint);
+  font-size: 12px;
+}
+
+.spinner {
+  width: 24px;
+  height: 24px;
+  border: 2px dashed var(--candle);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin: 0 auto 12px;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ---- RESPONSIVE ---- */
+@media (max-width: 768px) {
+  .page-header {
+    padding: 24px 20px 16px;
+  }
+
+  .header-row {
+    flex-direction: column;
+  }
+
+  .filter-bar {
+    flex-direction: column;
+    padding: 12px 20px;
+  }
+
+  .batch-bar {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 12px 20px;
+  }
+
+  .batch-tag-picker {
+    margin-left: 0;
+  }
+
+  .table-wrap {
+    padding: 0 12px 20px;
+    overflow-x: auto;
+  }
+
+  table {
+    min-width: 600px;
+  }
+}
+</style>