Tests, UX improvements.

app/components/SidebarLayout.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="sidebar-layout">
+    <div class="sidebar-layout-main">
+      <slot />
+    </div>
+    <EventsMiniSidebar :events="upcomingEvents" />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  limit: { type: Number, default: 3 },
+})
+
+const { data: upcomingEvents } = await useFetch('/api/events', {
+  query: { limit: props.limit, upcoming: true },
+  default: () => [],
+})
+</script>
+
+<style scoped>
+.sidebar-layout {
+  flex: 1;
+  display: grid;
+  grid-template-columns: 1fr 200px;
+  align-items: stretch;
+  min-height: 0;
+}
+
+.sidebar-layout-main {
+  min-width: 0;
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+@media (max-width: 1024px) {
+  .sidebar-layout {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
+```
+
+Now let me apply this to each page. Let me update all four in parallel: