Skip to content

Commit 38f6220

Browse files
dillonstreatordillonstreator
committed
fix respnsiveness
1 parent 52a1a09 commit 38f6220

3 files changed

Lines changed: 44 additions & 32 deletions

File tree

‎src/components/sections/LinkDeviceSection.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export function VerifyEmailPanel() {
3535
};
3636

3737
return (
38-
<div id="verify" className="card mt-5 p-6">
38+
<div id="verify" className="card mt-5 p-4 sm:p-6">
3939
<div className="flex items-center gap-2">
4040
<span className="flex h-7 w-7 items-center justify-center rounded-md border border-purple/40 text-purple">
4141
✉
@@ -54,19 +54,19 @@ export function VerifyEmailPanel() {
5454
<p className="mt-4 text-sm text-purple">Check your inbox — click the link to verify.</p>
5555
) : (
5656
<form onSubmit={sendMagicLink} className="mt-5 flex max-w-md flex-col gap-2">
57-
<div className="flex gap-2">
57+
<div className="flex flex-col gap-2 sm:flex-row sm:items-stretch">
5858
<input
5959
type="email"
6060
required
6161
value={email}
6262
onChange={(e) => setEmail(e.target.value)}
6363
placeholder="you@email.com"
64-
className="flex-1 rounded-xl border border-white/10 bg-black/30 px-4 py-3 text-sm outline-none placeholder:text-muted/50 focus:border-purple/50"
64+
className="min-w-0 flex-1 rounded-xl border border-white/10 bg-black/30 px-4 py-3 text-sm outline-none placeholder:text-muted/50 focus:border-purple/50"
6565
/>
6666
<button
6767
type="submit"
6868
disabled={sendMagic.isPending}
69-
className="btn-ghost shrink-0 whitespace-nowrap border-purple/40 px-4 py-3 text-sm text-purple"
69+
className="btn-ghost w-full shrink-0 whitespace-nowrap border-purple/40 px-4 py-3 text-sm text-purple sm:w-auto"
7070
>
7171
{sendMagic.isPending ? "Sending…" : "Send link"}
7272
</button>
@@ -157,7 +157,7 @@ export function LinkDevicesPanel({ nodeCode }: { nodeCode: string }) {
157157
}, [session?.url]);
158158

159159
return (
160-
<div id="devices" className="card mt-5 p-6">
160+
<div id="devices" className="card mt-5 p-4 sm:p-6">
161161
<div className="flex items-center gap-2">
162162
<span className="flex h-7 w-7 items-center justify-center rounded-md border border-blue/40 text-blue">
163163
⇄
@@ -183,8 +183,8 @@ export function LinkDevicesPanel({ nodeCode }: { nodeCode: string }) {
183183
</p>
184184
)}
185185

186-
<div className="mt-6 grid gap-5 lg:grid-cols-2">
187-
<div className="rounded-xl border border-white/10 bg-black/20 p-5">
186+
<div className="mt-6 grid min-w-0 gap-5 lg:grid-cols-2">
187+
<div className="min-w-0 rounded-xl border border-white/10 bg-black/20 p-4 sm:p-5">
188188
<div className="label text-blue">On this device</div>
189189
<p className="mt-2 text-sm text-muted">Generate a code for your other device to enter.</p>
190190
{session ? (
@@ -219,15 +219,15 @@ export function LinkDevicesPanel({ nodeCode }: { nodeCode: string }) {
219219
)}
220220
</div>
221221

222-
<div className="rounded-xl border border-dashed border-white/10 bg-black/10 p-5">
222+
<div className="min-w-0 rounded-xl border border-dashed border-white/10 bg-black/10 p-4 sm:p-5">
223223
<div className="label">On your other device</div>
224224
<p className="mt-2 text-sm text-muted">Enter the code from your desktop or scan its QR.</p>
225225
<form
226226
onSubmit={(e) => {
227227
e.preventDefault();
228228
void acceptCode(enterCode);
229229
}}
230-
className="mt-3 flex gap-2"
230+
className="mt-3 flex flex-col gap-2 sm:flex-row sm:items-stretch"
231231
>
232232
<input
233233
type="text"
@@ -242,12 +242,12 @@ export function LinkDevicesPanel({ nodeCode }: { nodeCode: string }) {
242242
)
243243
}
244244
placeholder="6-char code"
245-
className="flex-1 rounded-xl border border-white/10 bg-black/30 px-4 py-3 font-mono text-sm tracking-widest outline-none placeholder:text-muted/50 focus:border-blue/50"
245+
className="min-w-0 flex-1 rounded-xl border border-white/10 bg-black/30 px-4 py-3 font-mono text-sm tracking-widest outline-none placeholder:text-muted/50 focus:border-blue/50"
246246
/>
247247
<button
248248
type="submit"
249249
disabled={loading || enterCode.length !== 6}
250-
className="btn-ghost shrink-0 border-blue/40 px-4 py-3 text-sm text-blue"
250+
className="btn-ghost w-full shrink-0 border-blue/40 px-4 py-3 text-sm text-blue sm:w-auto"
251251
>
252252
Link
253253
</button>
@@ -268,7 +268,7 @@ export function LinkDevicesPanel({ nodeCode }: { nodeCode: string }) {
268268
Unlink this device
269269
</button>
270270
) : (
271-
<div className="rounded-xl border border-amber-500/30 bg-amber-500/5 p-5">
271+
<div className="rounded-xl border border-amber-500/30 bg-amber-500/5 p-4 sm:p-5">
272272
<h4 className="text-sm font-semibold text-amber-200">Unlink this device?</h4>
273273
<ul className="mt-3 space-y-2 text-sm leading-relaxed text-muted">
274274
<li>

‎src/components/sections/Network.tsx‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,12 @@ function ChainStrip({ node, m }: { node: NodeResponse | null; m?: { direct: numb
3333
const Node = ({
3434
glyph,
3535
title,
36+
shortTitle,
3637
state,
3738
}: {
3839
glyph: string;
3940
title: string;
41+
shortTitle?: string;
4042
state: "dim" | "blue" | "you" | "purple";
4143
}) => {
4244
const ring =
@@ -48,32 +50,39 @@ function ChainStrip({ node, m }: { node: NodeResponse | null; m?: { direct: numb
4850
? "border-purple/60 text-purple"
4951
: "border-white/15 text-muted";
5052
return (
51-
<div className="flex w-16 shrink-0 flex-col items-center text-center sm:w-20">
52-
<div className={`flex h-11 w-11 items-center justify-center rounded-full border text-xs font-semibold ${ring}`}>
53+
<div className="flex min-w-0 flex-1 flex-col items-center text-center">
54+
<div
55+
className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-full border text-[10px] font-semibold sm:h-11 sm:w-11 sm:text-xs ${ring}`}
56+
>
5357
{glyph}
5458
</div>
55-
<div className={`mt-2 text-[11px] leading-tight ${state === "you" ? "text-purple" : "text-muted"}`}>
56-
{title}
59+
<div
60+
className={`mt-1.5 max-w-full px-0.5 text-[10px] leading-tight sm:mt-2 sm:text-[11px] ${state === "you" ? "text-purple" : "text-muted"}`}
61+
>
62+
<span className="sm:hidden">{shortTitle ?? title}</span>
63+
<span className="hidden sm:inline">{title}</span>
5764
</div>
5865
</div>
5966
);
6067
};
6168
const Link = ({ color }: { color: "blue" | "purple" }) => (
62-
<div className="mx-1 mb-6 h-px min-w-4 flex-1 self-center sm:min-w-6"
63-
style={{ background: `linear-gradient(90deg, transparent, var(--${color}), transparent)` }} />
69+
<div
70+
className="mx-0.5 mb-5 h-px min-w-2 flex-1 self-center sm:mx-1 sm:mb-6 sm:min-w-4"
71+
style={{ background: `linear-gradient(90deg, transparent, var(--${color}), transparent)` }}
72+
/>
6473
);
6574

6675
return (
67-
<div className="card mt-4 overflow-hidden px-4 py-5 sm:px-6">
76+
<div className="card mt-4 p-4 sm:p-6">
6877
<div className="label mb-4">where you sit in the web</div>
69-
<div className="flex items-start justify-between">
70-
<Node glyph="↗" title="shared with you" state="blue" />
78+
<div className="flex min-w-0 items-start justify-between">
79+
<Node glyph="↗" title="shared with you" shortTitle="from" state="blue" />
7180
<Link color="blue" />
72-
<Node glyph="YOU" title="this device" state="you" />
81+
<Node glyph="YOU" title="this device" shortTitle="you" state="you" />
7382
<Link color="purple" />
74-
<Node glyph={`×${direct}`} title="you shared" state="purple" />
83+
<Node glyph={`×${direct}`} title="you shared" shortTitle="out" state="purple" />
7584
<Link color="purple" />
76-
<Node glyph={fmtCompact(reach)} title="downstream" state="dim" />
85+
<Node glyph={fmtCompact(reach)} title="downstream" shortTitle="reach" state="dim" />
7786
</div>
7887
</div>
7988
);
@@ -82,7 +91,7 @@ function ChainStrip({ node, m }: { node: NodeResponse | null; m?: { direct: numb
8291
export default function Network({ node, me }: { node: NodeResponse | null; me: MeDetail | null }) {
8392
const m = me?.metrics ?? node?.metrics;
8493
return (
85-
<section id="network" className="mx-auto w-full max-w-6xl overflow-x-clip px-6 py-24">
94+
<section id="network" className="mx-auto w-full max-w-6xl overflow-x-clip px-4 py-24 sm:px-6">
8695
<div className="mb-10 flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
8796
<div>
8897
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">Your network</h2>

‎src/components/sections/ShareSection.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export default function ShareSection({ code, fpLabel }: { code: string; fpLabel:
3232
};
3333

3434
return (
35-
<section id="share" className="mx-auto w-full max-w-6xl overflow-x-clip px-6 py-24">
35+
<section id="share" className="mx-auto w-full max-w-6xl overflow-x-clip px-4 py-24 sm:px-6">
3636
<h2 className="text-4xl font-bold tracking-tight">Share &amp; account</h2>
3737
<p className="mt-3 max-w-2xl text-muted">
3838
Three separate things: invite <span className="text-fg">other people</span> with your share
@@ -52,14 +52,17 @@ export default function ShareSection({ code, fpLabel }: { code: string; fpLabel:
5252
Your public referral link — send it to anyone. Each new visitor adds a node to your chain.
5353
</p>
5454

55-
<div className="mt-5 grid gap-5 lg:grid-cols-[1.6fr_1fr]">
56-
<div className="card p-6">
55+
<div className="mt-5 grid min-w-0 gap-5 lg:grid-cols-[1.6fr_1fr]">
56+
<div className="card min-w-0 p-4 sm:p-6">
5757
<div className="label text-purple">Your share link</div>
58-
<div className="mt-3 flex gap-3">
59-
<div className="flex min-w-0 flex-1 items-center overflow-hidden rounded-xl border border-white/10 bg-black/30 px-4 py-3 font-mono text-sm">
58+
<div className="mt-3 flex flex-col gap-3 sm:flex-row sm:items-stretch">
59+
<div className="flex min-w-0 flex-1 items-center overflow-hidden rounded-xl border border-white/10 bg-black/30 px-3 py-3 font-mono text-sm sm:px-4">
6060
<span className="truncate">{display}</span>
6161
</div>
62-
<button onClick={copy} className="btn-primary shrink-0 px-6 py-3 text-sm">
62+
<button
63+
onClick={copy}
64+
className="btn-primary w-full shrink-0 px-6 py-3 text-sm sm:w-auto"
65+
>
6366
{copied ? "Copied!" : "Copy"}
6467
</button>
6568
</div>
@@ -81,7 +84,7 @@ export default function ShareSection({ code, fpLabel }: { code: string; fpLabel:
8184
</div>
8285
</div>
8386

84-
<div className="card flex flex-col items-center justify-center p-6">
87+
<div className="card flex min-w-0 flex-col items-center justify-center p-4 sm:p-6">
8588
{qr && <img src={qr} alt="Share link QR" className="h-44 w-44 rounded-xl" />}
8689
<p className="label mt-4 text-purple">For others — scan to join your web</p>
8790
</div>

0 commit comments

Comments
 (0)