Fix large font overflow on Windows — flex-wrap all dense rows

Feed header, note card header, note actions, compose box, settings
theme grid, font size presets, media feed tabs, and profile header
buttons all now wrap gracefully when CSS zoom makes content overflow
the viewport. Also add AgentDocs fetch instruction to CLAUDE.md.

CLAUDE.md

@@ -6,6 +6,14 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 Wrystr is a cross-platform Nostr desktop client built with Tauri 2.0 (Rust) + React + TypeScript. It connects to Nostr relays via NDK (Nostr Dev Kit) and aims for Telegram Desktop-quality UX. Long-form content (NIP-23) is a first-class, distinguishing feature — not an afterthought.
 
+## AgentDocs
+
+When the user shares an AgentDocs URL, fetch the raw content using:
+```
+curl https://agentdocs.exe.xyz/api/shared/<token>/raw
+```
+The `<token>` is the hash at the end of the shared URL. This returns the document as plain text/markdown with embedded image references.
+
 ## Commands
 
 ```bash

src/components/feed/ComposeBox.tsx

@@ -229,7 +229,7 @@ export function ComposeBox({ onPublished, onNoteInjected }: { onPublished?: () =
             <p className="text-danger text-[11px] mb-2">{error}</p>
           )}
 
-          <div className="flex items-center justify-between mt-1">
+          <div className="flex flex-wrap items-center justify-between gap-y-1 mt-1">
             <span className={`text-[10px] ${overLimit ? "text-danger" : warnLimit ? "text-warning" : "text-text-dim"}`}>
               {uploading ? (
                 <span className="inline-flex items-center gap-1">
@@ -241,7 +241,7 @@ export function ComposeBox({ onPublished, onNoteInjected }: { onPublished?: () =
                 <span className="ml-1 text-text-dim">(draft)</span>
               )}
             </span>
-            <div className="flex items-center gap-3">
+            <div className="flex flex-wrap items-center gap-3">
               <div className="relative">
                 <button
                   onClick={() => setShowEmoji((v) => !v)}

src/components/feed/Feed.tsx

@@ -109,7 +109,7 @@ export function Feed() {
   return (
     <div className="h-full flex flex-col">
       {/* Header */}
-      <header className="border-b border-border px-4 py-2.5 flex items-center justify-between shrink-0">
+      <header className="border-b border-border px-4 py-2.5 flex flex-wrap items-center justify-between gap-y-1 shrink-0">
         <div className="flex items-center gap-1">
           <button
             onClick={() => setTab("global")}
@@ -144,7 +144,7 @@ export function Feed() {
             Trending
           </button>
         </div>
-        <div className="flex items-center gap-3">
+        <div className="flex flex-wrap items-center gap-2">
           <select
             value={feedLanguageFilter ?? ""}
             onChange={(e) => setFeedLanguageFilter(e.target.value || null)}

src/components/feed/NoteActions.tsx

@@ -79,7 +79,7 @@ export function NoteActions({ event, onReplyToggle, showReply }: NoteActionsProp
 
   return (
     <>
-      <div className="flex items-center gap-4 mt-2">
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-1 mt-2">
         <button
           onClick={onReplyToggle}
           className={`text-[11px] transition-colors ${

src/components/feed/NoteCard.tsx

@@ -82,7 +82,7 @@ export function NoteCard({ event, focused, onReplyInThread }: NoteCardProps) {
 
         {/* Content */}
         <div className="min-w-0 flex-1">
-          <div className="flex items-baseline gap-2 mb-0.5">
+          <div className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5 mb-0.5">
             <button
               className="text-text font-medium truncate text-[13px] cursor-pointer hover:text-accent transition-colors text-left"
               onClick={() => openProfile(event.pubkey)}

src/components/media/MediaFeed.tsx

@@ -44,8 +44,8 @@ export function MediaFeed() {
 
   return (
     <div className="h-full flex flex-col">
-      <header className="border-b border-border px-4 py-2.5 flex items-center justify-between shrink-0">
+      <header className="border-b border-border px-4 py-2.5 flex flex-wrap items-center justify-between gap-y-1 shrink-0">
-        <div className="flex items-center gap-1">
+        <div className="flex flex-wrap items-center gap-1">
           <h1 className="text-text text-sm font-medium mr-3">Media</h1>
           {(["all", "videos", "images", "audio"] as const).map((t) => (
             <button

src/components/profile/ProfileView.tsx

@@ -80,7 +80,7 @@ export function ProfileView() {
   return (
     <div className="h-full flex flex-col">
       {/* Header */}
-      <header className="border-b border-border px-4 py-2.5 flex items-center justify-between shrink-0">
+      <header className="border-b border-border px-4 py-2.5 flex flex-wrap items-center justify-between gap-y-1 shrink-0">
         <div className="flex items-center gap-3">
           <button
             onClick={editing ? () => setEditing(false) : goBack}
@@ -104,7 +104,7 @@ export function ProfileView() {
           </button>
         )}
         {!isOwn && loggedIn && (
-          <div className="flex items-center gap-2">
+          <div className="flex flex-wrap items-center gap-2">
             {(lud16 || profile?.lud06) && (
               <button
                 onClick={() => setShowZap(true)}

src/components/shared/SettingsView.tsx

@@ -291,12 +291,12 @@ function ThemeSection() {
       <h2 className="text-text text-[11px] font-medium uppercase tracking-widest mb-3 text-text-dim">
         Theme
       </h2>
-      <div className="grid grid-cols-4 gap-2">
+      <div className="flex flex-wrap gap-2">
         {themes.map((theme) => (
           <button
             key={theme.id}
             onClick={() => setTheme(theme.id)}
-            className={`flex flex-col items-center gap-1.5 p-2 border transition-colors rounded-sm ${
+            className={`flex flex-col items-center gap-1.5 p-2 border transition-colors rounded-sm w-20 ${
               themeId === theme.id
                 ? "border-accent bg-bg-hover"
                 : "border-border hover:border-accent/40"
@@ -333,7 +333,7 @@ function FontSizeSection() {
       <h2 className="text-text text-[11px] font-medium uppercase tracking-widest mb-2 text-text-dim">
         Font Size
       </h2>
-      <div className="flex items-center gap-2">
+      <div className="flex flex-wrap items-center gap-2">
         {FONT_PRESETS.map(({ label, size }) => (
           <button
             key={size}