Fixes the copy on new sessions, some additional styling work

src/components/documents/scene/NewSceneForm.tsx

@@ -3,6 +3,8 @@
 import { useState } from "react";
 import type { CampaignId, Scene } from "@/lib/types";
 import { pb } from "@/lib/pocketbase";
+import { BaseForm } from "@/components/form/BaseForm";
+import { MultiLineInput } from "@/components/form/MultiLineInput";
 
 /**
  * Renders a form to add a new scene. Calls onCreate with the new scene document.
@@ -41,28 +43,22 @@ export const NewSceneForm = ({
   }
 
   return (
-    <form
-      className="flex flex-col items-left gap-2 mt-4"
+    <BaseForm
+      title="Create new scene"
       onSubmit={handleSubmit}
-    >
-      <h3>Create new scene</h3>
-      <input
-        type="text"
-        className="flex-1 px-3 py-2 rounded bg-slate-800 text-slate-100 border border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500"
-        placeholder="Add a new scene..."
-        value={text}
-        onChange={(e) => setText(e.target.value)}
-        disabled={adding}
-        aria-label="Add new scene"
-      />
-      {error && <div className="text-red-400 mt-2 text-sm">{error}</div>}
-      <button
-        type="submit"
-        className="px-4 py-2 rounded bg-emerald-600 hover:bg-emerald-700 text-white font-semibold transition-colors disabled:opacity-60"
-        disabled={adding || !text.trim()}
-      >
-        {adding ? "Adding..." : "Create"}
-      </button>
-    </form>
+      error={error}
+      buttonText={adding ? "Adding..." : "Create"}
+      content={
+        <>
+          <MultiLineInput
+            value={text}
+            onChange={(v) => setText(v)}
+            disabled={adding}
+            placeholder="Scene description..."
+            aria-label="Add new scene"
+          />
+        </>
+      }
+    />
   );
 };

src/components/documents/scene/ScenePrintRow.tsx

@@ -4,5 +4,5 @@ import type { Scene } from "@/lib/types";
  * Renders an editable scene row
  */
 export const ScenePrintRow = ({ scene }: { scene: Scene }) => {
-  return <li className="">{scene.data.text}</li>;
+  return <div className="">{scene.data.text}</div>;
 };