Fix profile page horizontal overflow on narrow/mobile screens

The public profile page overflowed sideways on phones, pushing the Info /
Contributions / Crews sidebar off-screen. Cause: the About text contained a
64-char unbreakable URL (ContextVM server link) with no word-breaking, forcing
the layout wider than the viewport.

- About text now uses break-words + overflow-wrap:anywhere so long URLs wrap
- Added min-w-0 to both grid columns so they can shrink instead of overflowing

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
This commit is contained in:
shakespeare.diy 2026-07-30 22:00:43 +07:00
parent d056f41ac7
commit 38343eb438

View file

@ -202,12 +202,12 @@ function ProfilePage({ pubkey }: { pubkey: string }) {
{/* Profile Info */} {/* Profile Info */}
<div className="grid lg:grid-cols-3 gap-6"> <div className="grid lg:grid-cols-3 gap-6">
{/* Main Content */} {/* Main Content */}
<div className="lg:col-span-2 space-y-6"> <div className="lg:col-span-2 space-y-6 min-w-0">
{/* About */} {/* About */}
{about && ( {about && (
<Card className="bg-black/90 border-2 border-gray-800"> <Card className="bg-black/90 border-2 border-gray-800">
<CardContent className="p-4 sm:p-6"> <CardContent className="p-4 sm:p-6">
<p className="text-gray-300 whitespace-pre-wrap">{about}</p> <p className="text-gray-300 whitespace-pre-wrap break-words [overflow-wrap:anywhere]">{about}</p>
</CardContent> </CardContent>
</Card> </Card>
)} )}
@ -300,7 +300,7 @@ function ProfilePage({ pubkey }: { pubkey: string }) {
</div> </div>
{/* Sidebar */} {/* Sidebar */}
<div className="space-y-4"> <div className="space-y-4 min-w-0">
{/* Quick Info Card */} {/* Quick Info Card */}
<Card className="bg-black/90 border-2 border-gray-800"> <Card className="bg-black/90 border-2 border-gray-800">
<CardHeader className="pb-3"> <CardHeader className="pb-3">