Mirror/vega
1
0
Fork 0
mirror of https://github.com/hoornet/vega.git synced 2026-05-07 12:49:13 -07:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
Jure
2026-03-25 15:34:19 +01:00
parent f460a53875
commit 5b627879ac
8 changed files with 21 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/feed/ComposeBox.tsx
View File

@@ -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)}

4
src/components/feed/Feed.tsx
View File

@@ -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)}

2
src/components/feed/NoteActions.tsx
View File

@@ -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 ${

2
src/components/feed/NoteCard.tsx
View File

@@ -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)}

4
src/components/media/MediaFeed.tsx
View File

@@ -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

4
src/components/profile/ProfileView.tsx
View File

@@ -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)}

6
src/components/shared/SettingsView.tsx
View File

@@ -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}