From f0af0c81f0c6483fc7015e0a36fe89e23ed482f9 Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Tue, 12 Dec 2023 15:44:36 +0200
Subject: [PATCH] min-height for quote & spinner

---
 packages/app/src/Element/Event/Note.css      | 7 -------
 packages/app/src/Element/Event/NoteInner.tsx | 2 +-
 packages/app/src/Element/Event/NoteQuote.tsx | 7 ++++++-
 packages/app/src/index.css                   | 1 -
 4 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/app/src/Element/Event/Note.css b/packages/app/src/Element/Event/Note.css
index 9bea0b5d..138ce236 100644
--- a/packages/app/src/Element/Event/Note.css
+++ b/packages/app/src/Element/Event/Note.css
@@ -1,10 +1,3 @@
-.note {
-  min-height: 110px;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
 .note > .header .reply {
   font-size: 13px;
   color: var(--font-secondary-color);
diff --git a/packages/app/src/Element/Event/NoteInner.tsx b/packages/app/src/Element/Event/NoteInner.tsx
index a7275746..bb8a70fe 100644
--- a/packages/app/src/Element/Event/NoteInner.tsx
+++ b/packages/app/src/Element/Event/NoteInner.tsx
@@ -33,7 +33,7 @@ const TEXT_TRUNCATE_LENGTH = 400;
 export function NoteInner(props: NoteProps) {
   const { data: ev, related, highlight, options: opt, ignoreModeration = false, className } = props;
 
-  const baseClassName = classNames("note card", className);
+  const baseClassName = classNames("note min-h-[110px] flex flex-col gap-4 card", className);
   const navigate = useNavigate();
   const [showReactions, setShowReactions] = useState(false);
 
diff --git a/packages/app/src/Element/Event/NoteQuote.tsx b/packages/app/src/Element/Event/NoteQuote.tsx
index 455031ab..58b74919 100644
--- a/packages/app/src/Element/Event/NoteQuote.tsx
+++ b/packages/app/src/Element/Event/NoteQuote.tsx
@@ -6,7 +6,12 @@ import PageSpinner from "@/Element/PageSpinner";
 
 export default function NoteQuote({ link, depth }: { link: NostrLink; depth?: number }) {
   const ev = useEventFeed(link);
-  if (!ev.data) return <PageSpinner />;
+  if (!ev.data)
+    return (
+      <div className="note-quote flex items-center justify-center h-[110px]">
+        <PageSpinner />
+      </div>
+    );
   return (
     <Note
       data={ev.data}
diff --git a/packages/app/src/index.css b/packages/app/src/index.css
index 5cf67985..e2cf1624 100644
--- a/packages/app/src/index.css
+++ b/packages/app/src/index.css
@@ -210,7 +210,6 @@ a.ext {
 .card .card {
   border: 1px solid var(--border-color);
   border-radius: 16px;
-  min-height: 0;
 }
 
 .card .header {