From 5b627879acc8e4574f74fe43206ae5d07658a2a5 Mon Sep 17 00:00:00 2001
From: Jure <44338+hoornet@users.noreply.github.com>
Date: Wed, 25 Mar 2026 15:34:19 +0100
Subject: [PATCH] =?UTF-8?q?Fix=20large=20font=20overflow=20on=20Windows=20?=
 =?UTF-8?q?=E2=80=94=20flex-wrap=20all=20dense=20rows?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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                              | 8 ++++++++
 src/components/feed/ComposeBox.tsx     | 4 ++--
 src/components/feed/Feed.tsx           | 4 ++--
 src/components/feed/NoteActions.tsx    | 2 +-
 src/components/feed/NoteCard.tsx       | 2 +-
 src/components/media/MediaFeed.tsx     | 4 ++--
 src/components/profile/ProfileView.tsx | 4 ++--
 src/components/shared/SettingsView.tsx | 6 +++---
 8 files changed, 21 insertions(+), 13 deletions(-)

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}