fix new post layout

src/app/auth/components/features/enableOutbox.tsx

@@ -21,7 +21,7 @@ export function OutboxModel() {
     <div className="rounded-xl bg-neutral-100 p-3 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200">
       <div className="flex items-start justify-between gap-2">
         <div>
-          <h5 className="font-semibold">Enable Outbox (experiment)</h5>
+          <h5 className="font-semibold">Enable Outbox</h5>
           <p className="text-sm">
             When you request information about a user, Lume will automatically query the
             user&apos;s outbox relays and subsequent queries will favour using those

src/app/new/article.tsx

@@ -114,122 +114,124 @@ export function NewArticleScreen() {
   };
 
   return (
-    <div className="flex h-full flex-col justify-between">
-      <div className="flex flex-col gap-4">
-        {cover ? (
-          <img
-            src={cover}
-            alt="post cover"
-            className="h-72 w-full rounded-lg object-cover"
-          />
-        ) : null}
-        <div className="group flex justify-between gap-2">
-          <input
-            name="title"
-            className="h-9 flex-1 border-none bg-transparent text-2xl font-semibold text-neutral-900 shadow-none outline-none placeholder:text-neutral-400 dark:text-neutral-100 dark:placeholder:text-neutral-600"
-            placeholder="Untitled"
-            value={title}
-            onChange={(e) => setTitle(e.target.value)}
-          />
-          <div
-            className={twMerge(
-              'inline-flex shrink-0 gap-2 group-hover:inline-flex',
-              title.length > 0 ? '' : 'hidden'
-            )}
-          >
-            <ArticleCoverUploader setCover={setCover} />
-            <button
-              type="button"
-              onClick={() => setSummary((prev) => ({ ...prev, open: !prev.open }))}
-              className="inline-flex h-9 w-max items-center gap-2 rounded-lg bg-neutral-100 px-2.5 text-sm font-medium hover:bg-neutral-200 dark:bg-neutral-800 dark:hover:bg-neutral-800"
+    <div className="flex flex-1 flex-col justify-between">
+      <div className="flex-1 overflow-y-auto">
+        <div className="flex flex-col gap-4">
+          {cover ? (
+            <img
+              src={cover}
+              alt="post cover"
+              className="h-72 w-full rounded-lg object-cover"
+            />
+          ) : null}
+          <div className="group flex justify-between gap-2">
+            <input
+              name="title"
+              className="h-9 flex-1 border-none bg-transparent text-2xl font-semibold text-neutral-900 shadow-none outline-none placeholder:text-neutral-400 dark:text-neutral-100 dark:placeholder:text-neutral-600"
+              placeholder="Untitled"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+            />
+            <div
+              className={twMerge(
+                'inline-flex shrink-0 gap-2 group-hover:inline-flex',
+                title.length > 0 ? '' : 'hidden'
+              )}
             >
-              <ThreadsIcon className="h-4 w-4" />
-              Add summary
-            </button>
-          </div>
-        </div>
-        {summary.open ? (
-          <div className="flex gap-3">
-            <div className="h-16 w-1 shrink-0 rounded-full bg-neutral-200 dark:bg-neutral-800" />
-            <div className="flex-1">
-              <textarea
-                className="h-16 w-full border-none bg-transparent px-1 py-1 text-neutral-900 shadow-none outline-none placeholder:text-neutral-400 dark:text-neutral-100 dark:placeholder:text-neutral-600"
-                placeholder="A brief summary of your article"
-                value={summary.content}
-                onChange={(e) =>
-                  setSummary((prev) => ({ ...prev, content: e.target.value }))
-                }
-              />
+              <ArticleCoverUploader setCover={setCover} />
+              <button
+                type="button"
+                onClick={() => setSummary((prev) => ({ ...prev, open: !prev.open }))}
+                className="inline-flex h-9 w-max items-center gap-2 rounded-lg bg-neutral-100 px-2.5 text-sm font-medium hover:bg-neutral-200 dark:bg-neutral-800 dark:hover:bg-neutral-800"
+              >
+                <ThreadsIcon className="h-4 w-4" />
+                Add summary
+              </button>
             </div>
           </div>
-        ) : null}
-        <div>
-          {editor && (
-            <FloatingMenu
+          {summary.open ? (
+            <div className="flex gap-3">
+              <div className="h-16 w-1 shrink-0 rounded-full bg-neutral-200 dark:bg-neutral-800" />
+              <div className="flex-1">
+                <textarea
+                  className="h-16 w-full border-none bg-transparent px-1 py-1 text-neutral-900 shadow-none outline-none placeholder:text-neutral-400 dark:text-neutral-100 dark:placeholder:text-neutral-600"
+                  placeholder="A brief summary of your article"
+                  value={summary.content}
+                  onChange={(e) =>
+                    setSummary((prev) => ({ ...prev, content: e.target.value }))
+                  }
+                />
+              </div>
+            </div>
+          ) : null}
+          <div>
+            {editor && (
+              <FloatingMenu
+                editor={editor}
+                tippyOptions={{ duration: 100 }}
+                className="ml-36 inline-flex h-10 items-center gap-1 rounded-lg border border-neutral-200 bg-neutral-100 px-px dark:border-neutral-800 dark:bg-neutral-900"
+              >
+                <button
+                  onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+                  className={twMerge(
+                    'inline-flex h-9 w-9 items-center justify-center rounded-md text-neutral-900 hover:bg-neutral-50 dark:text-neutral-100 dark:hover:bg-neutral-950',
+                    editor.isActive('heading', { level: 1 })
+                      ? 'bg-white shadow dark:bg-black'
+                      : ''
+                  )}
+                >
+                  <Heading1Icon className="h-5 w-5" />
+                </button>
+                <button
+                  onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+                  className={twMerge(
+                    'inline-flex h-9 w-9 items-center justify-center rounded-md text-neutral-900 hover:bg-neutral-50 dark:text-neutral-100 dark:hover:bg-neutral-950',
+                    editor.isActive('heading', { level: 2 })
+                      ? 'bg-white shadow dark:bg-black'
+                      : ''
+                  )}
+                >
+                  <Heading2Icon className="h-5 w-5" />
+                </button>
+                <button
+                  onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+                  className={twMerge(
+                    'inline-flex h-9 w-9 items-center justify-center rounded-md text-neutral-900 hover:bg-neutral-50 dark:text-neutral-100 dark:hover:bg-neutral-950',
+                    editor.isActive('heading', { level: 3 })
+                      ? 'bg-white shadow dark:bg-black'
+                      : ''
+                  )}
+                >
+                  <Heading3Icon className="h-5 w-5" />
+                </button>
+                <button
+                  onClick={() => editor.chain().focus().toggleBold().run()}
+                  className={twMerge(
+                    'inline-flex h-9 w-9 items-center justify-center rounded-md text-neutral-900 hover:bg-neutral-50 dark:text-neutral-100 dark:hover:bg-neutral-950',
+                    editor.isActive('bold') ? 'bg-white shadow dark:bg-black' : ''
+                  )}
+                >
+                  <BoldIcon className="h-5 w-5" />
+                </button>
+                <button
+                  onClick={() => editor.chain().focus().toggleItalic().run()}
+                  className={twMerge(
+                    'inline-flex h-9 w-9 items-center justify-center rounded-md text-neutral-900 hover:bg-neutral-50 dark:text-neutral-100 dark:hover:bg-neutral-950',
+                    editor.isActive('italic') ? 'bg-white shadow dark:bg-black' : ''
+                  )}
+                >
+                  <ItalicIcon className="h-5 w-5" />
+                </button>
+              </FloatingMenu>
+            )}
+            <EditorContent
               editor={editor}
-              tippyOptions={{ duration: 100 }}
-              className="ml-36 inline-flex h-10 items-center gap-1 rounded-lg border border-neutral-200 bg-neutral-100 px-px dark:border-neutral-800 dark:bg-neutral-900"
-            >
-              <button
-                onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
-                className={twMerge(
-                  'inline-flex h-9 w-9 items-center justify-center rounded-md text-neutral-900 hover:bg-neutral-50 dark:text-neutral-100 dark:hover:bg-neutral-950',
-                  editor.isActive('heading', { level: 1 })
-                    ? 'bg-white shadow dark:bg-black'
-                    : ''
-                )}
-              >
-                <Heading1Icon className="h-5 w-5" />
-              </button>
-              <button
-                onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
-                className={twMerge(
-                  'inline-flex h-9 w-9 items-center justify-center rounded-md text-neutral-900 hover:bg-neutral-50 dark:text-neutral-100 dark:hover:bg-neutral-950',
-                  editor.isActive('heading', { level: 2 })
-                    ? 'bg-white shadow dark:bg-black'
-                    : ''
-                )}
-              >
-                <Heading2Icon className="h-5 w-5" />
-              </button>
-              <button
-                onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
-                className={twMerge(
-                  'inline-flex h-9 w-9 items-center justify-center rounded-md text-neutral-900 hover:bg-neutral-50 dark:text-neutral-100 dark:hover:bg-neutral-950',
-                  editor.isActive('heading', { level: 3 })
-                    ? 'bg-white shadow dark:bg-black'
-                    : ''
-                )}
-              >
-                <Heading3Icon className="h-5 w-5" />
-              </button>
-              <button
-                onClick={() => editor.chain().focus().toggleBold().run()}
-                className={twMerge(
-                  'inline-flex h-9 w-9 items-center justify-center rounded-md text-neutral-900 hover:bg-neutral-50 dark:text-neutral-100 dark:hover:bg-neutral-950',
-                  editor.isActive('bold') ? 'bg-white shadow dark:bg-black' : ''
-                )}
-              >
-                <BoldIcon className="h-5 w-5" />
-              </button>
-              <button
-                onClick={() => editor.chain().focus().toggleItalic().run()}
-                className={twMerge(
-                  'inline-flex h-9 w-9 items-center justify-center rounded-md text-neutral-900 hover:bg-neutral-50 dark:text-neutral-100 dark:hover:bg-neutral-950',
-                  editor.isActive('italic') ? 'bg-white shadow dark:bg-black' : ''
-                )}
-              >
-                <ItalicIcon className="h-5 w-5" />
-              </button>
-            </FloatingMenu>
-          )}
-          <EditorContent
-            editor={editor}
-            spellCheck="false"
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="off"
-          />
+              spellCheck="false"
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+            />
+          </div>
         </div>
       </div>
       <div>

src/app/new/post.tsx

@@ -5,7 +5,7 @@ import Placeholder from '@tiptap/extension-placeholder';
 import { EditorContent, useEditor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import { convert } from 'html-to-text';
-import { useEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { toast } from 'sonner';
 
@@ -25,9 +25,11 @@ export function NewPostScreen() {
   const { addWidget } = useWidget();
 
   const [loading, setLoading] = useState(false);
+  const [height, setHeight] = useState(0);
   const [searchParams, setSearchParams] = useSearchParams();
 
   const navigate = useNavigate();
+  const containerRef = useRef(null);
   const editor = useEditor({
     extensions: [
       StarterKit.configure(),
@@ -115,34 +117,40 @@ export function NewPostScreen() {
     }
   };
 
+  useLayoutEffect(() => {
+    setHeight(containerRef.current.clientHeight);
+  }, []);
+
   useEffect(() => {
     if (editor) editor.commands.focus('end');
   }, [editor]);
 
   return (
-    <div className="flex h-full flex-col justify-between">
-      <div>
-        <EditorContent
-          editor={editor}
-          spellCheck="false"
-          autoComplete="off"
-          autoCorrect="off"
-          autoCapitalize="off"
-        />
-        {searchParams.get('replyTo') && (
-          <div className="relative max-w-lg">
-            <MentionNote id={searchParams.get('replyTo')} editing />
-            <button
-              type="button"
-              onClick={() => setSearchParams({})}
-              className="absolute right-3 top-3 inline-flex h-6 w-6 items-center justify-center rounded bg-neutral-200 px-2 dark:bg-neutral-800"
-            >
-              <CancelIcon className="h-5 w-5" />
-            </button>
-          </div>
-        )}
+    <div className="flex flex-1 flex-col gap-4">
+      <div className="flex-1 overflow-y-auto">
+        <div ref={containerRef} style={{ height: `${height}px` }}>
+          <EditorContent
+            editor={editor}
+            spellCheck="false"
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="off"
+          />
+          {searchParams.get('replyTo') && (
+            <div className="relative max-w-lg">
+              <MentionNote id={searchParams.get('replyTo')} editing />
+              <button
+                type="button"
+                onClick={() => setSearchParams({})}
+                className="absolute right-3 top-3 inline-flex h-6 w-6 items-center justify-center rounded bg-neutral-200 px-2 dark:bg-neutral-800"
+              >
+                <CancelIcon className="h-5 w-5" />
+              </button>
+            </div>
+          )}
+        </div>
       </div>
-      <div className="flex h-16 w-full items-center justify-between border-t border-neutral-100 dark:border-neutral-900">
+      <div className="inline-flex h-16 w-full items-center justify-between border-t border-neutral-100 bg-neutral-50 dark:border-neutral-900 dark:bg-neutral-950">
         <span className="text-sm font-medium tabular-nums text-neutral-600 dark:text-neutral-400">
           {editor?.storage?.characterCount.characters()} characters
         </span>