mirror/Compass
1
0
Fork 0
mirror of https://github.com/CompassConnections/Compass.git synced 2026-05-29 19:31:19 -04:00
Code Issues Packages Projects Releases Wiki Activity

Enhance profile header layout by adjusting width and adding max-width to keywords row

Browse Source
This commit is contained in:
MartinBraquet
2026-05-24 11:09:18 +02:00
parent 7b10cf8af4
commit 0d2da9dcaa
1 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web/components/profile/profile-header.tsx
View File

@@ -57,7 +57,7 @@ export default function ProfileHeader(props: {
<Row className={'flex-wrap gap-4'}>
<Col>
{currentUser && !isCurrentUser && isHiddenFromMe && (
<div className="flex items-center gap-2 rounded-lg bg-canvas-200 px-4 py-3 text-sm text-primary-800 mb-4">
<div className="w-fit flex items-center gap-2 rounded-lg bg-canvas-200 px-4 py-3 text-sm text-primary-800 mb-4">
<EyeSlashIcon className="h-4 w-4 flex-none" />
{t(
'profile_grid.hidden_notice',
@@ -66,7 +66,7 @@ export default function ProfileHeader(props: {
</div>
)}
{currentUser && isCurrentUser && disabled && (
<div className="flex items-center gap-2 rounded-lg bg-red-50 px-4 py-3 text-sm text-red-700 mb-4">
<div className="w-fit flex items-center gap-2 rounded-lg bg-red-50 px-4 py-3 text-sm text-red-700 mb-4">
<LockClosedIcon className="h-4 w-4 flex-none" />
{t(
'profile.header.disabled_notice',
@@ -126,7 +126,10 @@ export default function ProfileHeader(props: {
</Row>
</Col>
</Row>
<Row className={'gap-2 flex-wrap py-2'} data-testid="profile-keywords">
<Row
className={clsx('gap-2 flex-wrap py-2', 'max-w-full sm:max-w-[500px]')}
data-testid="profile-keywords"
>
{profile.keywords?.map(capitalizePure)?.map((tag, i) => (
<span
key={i}