FAB on extra kind pages opens info modal; feed content is h-full

src/components/Feed.tsx

@@ -159,7 +159,7 @@ export function Feed({ kinds, tagFilters, header, hideCompose, emptyMessage }: F
   const showSkeleton = isPending || (isLoading && !rawData);
 
   return (
-    <main className="flex-1 min-w-0">
+    <main className="flex-1 min-w-0 h-full">
       {!hideCompose && <ComposeBox compact />}
 
       {header}

src/components/KindInfoButton.tsx

@@ -14,16 +14,18 @@ import { ExternalFavicon } from '@/components/ExternalFavicon';
 interface KindInfoButtonProps {
   kindDef: ExtraKindDef;
   icon?: React.ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
 }
 
 /** Info button that opens a modal with a blurb and external site links for an extra kind. */
-export function KindInfoButton({ kindDef, icon }: KindInfoButtonProps) {
+export function KindInfoButton({ kindDef, icon, open, onOpenChange }: KindInfoButtonProps) {
   const { label, blurb, sites } = kindDef;
 
   if (!sites?.length && !blurb) return null;
 
   return (
-    <Dialog>
+    <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogTrigger asChild>
         <Button variant="ghost" size="icon" className="size-8 rounded-full text-muted-foreground hover:text-foreground">
           <Info className="size-4" />

src/pages/KindFeedPage.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { useSeoMeta } from '@unhead/react';
 import { ArrowLeft } from 'lucide-react';
 import { Link } from 'react-router-dom';
@@ -40,12 +40,15 @@ export function KindFeedPage({ kind, title, icon, emptyMessage, kindDef, backTo
     [kindDef, primaryKind],
   );
 
+  const [infoOpen, setInfoOpen] = useState(false);
+
   useSeoMeta({
     title: `${title} | ${config.appName}`,
     description: `${title} on Nostr`,
   });
 
-  useLayoutOptions({ showFAB, fabKind: primaryKind, fabHref, onFabClick });
+  const fabClick = onFabClick ?? (resolvedDef ? () => setInfoOpen(true) : undefined);
+  useLayoutOptions({ showFAB, fabKind: primaryKind, fabHref, onFabClick: fabClick });
 
   const kinds = Array.isArray(kind) ? kind : [kind];
 
@@ -65,7 +68,7 @@ export function KindFeedPage({ kind, title, icon, emptyMessage, kindDef, backTo
               {icon}
               <h1 className="text-xl font-bold">{title}</h1>
             </div>
-            {resolvedDef && <KindInfoButton kindDef={resolvedDef} icon={icon} />}
+            {resolvedDef && <KindInfoButton kindDef={resolvedDef} icon={icon} open={infoOpen} onOpenChange={setInfoOpen} />}
           </div>
         }
       />