refactor: rows not cols

components/cards/SafetyNotesCard.tsx

@@ -1,22 +1,33 @@
-"use client"
+"use client";
 
 import { useEffect, useState } from "react";
 import { Textarea } from "../ui/textarea";
 import { toast } from "../ui/use-toast";
 import { SafetyNotes, fetchSafetyNote, updateSafetyNote } from "@/lib/db";
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../ui/card";
 import { useSession } from "next-auth/react";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
-import ReactMarkdown from 'react-markdown';
+import ReactMarkdown from "react-markdown";
-import remarkGfm from 'remark-gfm';
+import remarkGfm from "remark-gfm";
 
 dayjs.extend(relativeTime);
 
-export default function SafetyNotesCard({ objectId, type, title }: {
+export default function SafetyNotesCard({
-  objectId: string,
+  objectId,
-  type: SafetyNotes["_id"]["type"],
+  type,
-  title?: string
+  title,
+}: {
+  objectId: string;
+  type: SafetyNotes["_id"]["type"];
+  title?: string;
 }) {
   const session = useSession();
   const [draft, setDraft] = useState("");
@@ -40,18 +51,20 @@ export default function SafetyNotesCard({ objectId, type, title }: {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>{title ?? type.charAt(0).toUpperCase() + type.slice(1) + " notes"}</CardTitle>
+        <CardTitle>
+          {title ?? type.charAt(0).toUpperCase() + type.slice(1) + " notes"}
+        </CardTitle>
       </CardHeader>
       <CardContent>
-        {
+        {editing ? (
-        editing
+          <Textarea
-         ? <Textarea
+            rows={8}
             placeholder={
               error
                 ? error
                 : ready
-                  ? "Enter notes here... (save on unfocus)"
+                ? "Enter notes here... (save on unfocus)"
-                  : "Fetching notes..."
+                : "Fetching notes..."
             }
             className="!min-h-[80px] max-h-[50vh]"
             disabled={!ready || error != null}
@@ -83,33 +96,37 @@ export default function SafetyNotesCard({ objectId, type, title }: {
               }
             }}
           />
-         : <div onClick={() => setEditing(true)}>
+        ) : (
-          {
+          <div onClick={() => setEditing(true)}>
-            error
+            {error ? (
-              ? <>{error}</>
+              <>{error}</>
-              : value?.text
+            ) : value?.text ? (
-                ? <ReactMarkdown
+              <ReactMarkdown
-                  className="prose prose-a:text-[#fd6671] prose-img:max-h-96 max-w-none"
+                className="prose prose-a:text-[#fd6671] prose-img:max-h-96 max-w-none"
-                  remarkPlugins={[remarkGfm]}
+                remarkPlugins={[remarkGfm]}
-                >
+              >
-                  {value.text}
+                {value.text}
-                </ReactMarkdown>
+              </ReactMarkdown>
-                : ready
+            ) : ready ? (
-                  ? <i>Click to add a note</i>
+              <i>Click to add a note</i>
-                  : <i>Fetching notes...</i>
+            ) : (
-          }
+              <i>Fetching notes...</i>
+            )}
           </div>
-        }
+        )}
       </CardContent>
       <CardFooter className="-my-2">
-      <CardDescription>
+        <CardDescription>
-      {
+          {value ? (
-        value
+            <>
-          ? <>Last edited {dayjs(value.edited_at).fromNow()} by {value.edited_by}</>
+              Last edited {dayjs(value.edited_at).fromNow()} by{" "}
-          : <>No object note set</>
+              {value.edited_by}
-      }
+            </>
-      </CardDescription>
+          ) : (
+            <>No object note set</>
+          )}
+        </CardDescription>
       </CardFooter>
     </Card>
-  )
+  );
 }

components/pages/inspector/CaseActions.tsx

@@ -17,7 +17,7 @@ export function CaseActions({ Case }: { Case: CaseDocument }) {
       <CaseCard entry={Case} />
 
       <Textarea
-        cols={8}
+        rows={8}
         placeholder="Enter notes here... (save on unfocus)"
         className="!min-h-0 !h-[76px]"
         defaultValue={Case.notes}

components/pages/inspector/ReportActions.tsx

@@ -89,7 +89,7 @@ export function ReportActions({
       <ReportCard report={reportDraft} />
 
       <Textarea
-        cols={8}
+        rows={8}
         placeholder="Enter notes here... (save on unfocus)"
         className="!min-h-0 !h-[76px]"
         defaultValue={report.notes}