feat: apply RichText to content sections and experience cards

ExperienceCard description switches from a plain <p> to RichText so
rich-text HTML from PocketBase renders correctly. BioSection and
IntroSection drop the prose class overrides — RichText handles
typography consistently.
This commit is contained in:
Ilia Mashkov
2026-05-16 19:04:18 +03:00
parent dfc3ed4715
commit e63de14515
4 changed files with 6 additions and 6 deletions
@@ -50,10 +50,10 @@ describe('ExperienceCard', () => {
expect(company).toHaveClass('opacity-80');
});
it('description paragraph has text-base and max-w-[700px]', () => {
it('description renders via RichText with rich-text class', () => {
render(<ExperienceCard {...DEFAULT_PROPS} />);
const desc = screen.getByText('Built scalable frontend systems.');
expect(desc).toHaveClass('text-base', 'max-w-[700px]');
expect(desc.closest('.rich-text')).toBeInTheDocument();
});
it('card has brutal-border class (from Card component)', () => {
@@ -1,4 +1,4 @@
import { Card } from '$shared/ui';
import { Card, RichText } from '$shared/ui';
type Props = {
/**
@@ -36,7 +36,7 @@ export function ExperienceCard({ title, company, period, description, className
</div>
<span className="brutal-border px-4 py-2 bg-blue text-cream text-sm self-start">{period}</span>
</div>
<p className="text-base max-w-[700px]">{description}</p>
<RichText html={description} />
</Card>
);
}
@@ -14,5 +14,5 @@ export default async function BioSection() {
notFound();
}
return <RichText html={data.content} className="prose prose-lg max-w-none" />;
return <RichText html={data.content} />;
}
@@ -14,5 +14,5 @@ export default async function IntroSection() {
notFound();
}
return <RichText html={data.content} className="prose prose-lg max-w-none" />;
return <RichText html={data.content} />;
}