I think I have a working document cache solution that's actually pretty good.

src/components/DocumentList.tsx

@@ -1,13 +1,12 @@
+import * as Icons from "@/components/Icons.tsx";
 import type { AnyDocument, DocumentId } from "@/lib/types";
 import {
   Dialog,
   DialogPanel,
-  DialogTitle,
   Transition,
   TransitionChild,
 } from "@headlessui/react";
 import { Fragment, useCallback, useState } from "react";
-import * as Icons from "@/components/Icons.tsx";
 
 type Props<T extends AnyDocument> = {
   title: React.ReactNode;
@@ -75,13 +74,13 @@ export function DocumentList<T extends AnyDocument>({
       {error && (
         <div className="bg-red-900 rounded p-4 text-slate-100">{error}</div>
       )}
-      <ul className="space-y-2">
+      <ul className="flex flex-col space-y-2">
         {items.map((item) => (
           <li
             key={item.id}
-            className="bg-slate-800 rounded p-4 text-slate-100 flex flex-row justify-between items-center"
+            className="p-4 bg-slate-800 rounded text-slate-100 flex flex-row justify-between items-center"
           >
-            <div>{renderRow(item)}</div>
+            {renderRow(item)}
 
             {isEditing && (
               <div>