diff --git a/CLAUDE.md b/CLAUDE.md
index 1221319..0f45df3 100644
--- a/CLAUDE.md
+++ b/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
diff --git a/src/components/feed/ComposeBox.tsx b/src/components/feed/ComposeBox.tsx
index daff435..fc1417d 100644
--- a/src/components/feed/ComposeBox.tsx
+++ b/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)}
diff --git a/src/components/feed/Feed.tsx b/src/components/feed/Feed.tsx
index 0d88ab1..c9ae908 100644
--- a/src/components/feed/Feed.tsx
+++ b/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)}
diff --git a/src/components/feed/NoteActions.tsx b/src/components/feed/NoteActions.tsx
index e43df37..f32dfeb 100644
--- a/src/components/feed/NoteActions.tsx
+++ b/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 ${
diff --git a/src/components/feed/NoteCard.tsx b/src/components/feed/NoteCard.tsx
index 6861656..63d6156 100644
--- a/src/components/feed/NoteCard.tsx
+++ b/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)}
diff --git a/src/components/media/MediaFeed.tsx b/src/components/media/MediaFeed.tsx
index c8bdd67..0f91147 100644
--- a/src/components/media/MediaFeed.tsx
+++ b/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">
-        <div className="flex items-center gap-1">
+      <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 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
diff --git a/src/components/profile/ProfileView.tsx b/src/components/profile/ProfileView.tsx
index 122f922..ba6dc3b 100644
--- a/src/components/profile/ProfileView.tsx
+++ b/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)}
diff --git a/src/components/shared/SettingsView.tsx b/src/components/shared/SettingsView.tsx
index ba606ac..47f1315 100644
--- a/src/components/shared/SettingsView.tsx
+++ b/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}