From e63de14515bc4af38e6d559e99b5e1f20cc7f170 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sat, 16 May 2026 19:04:18 +0300
Subject: [PATCH] feat: apply RichText to content sections and experience cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../experience/ui/ExperienceCard/ExperienceCard.test.tsx      | 4 ++--
 src/entities/experience/ui/ExperienceCard/ExperienceCard.tsx  | 4 ++--
 src/widgets/BioSection/ui/BioSection/BioSection.tsx           | 2 +-
 src/widgets/IntroSection/ui/IntroSection/IntroSection.tsx     | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/entities/experience/ui/ExperienceCard/ExperienceCard.test.tsx b/src/entities/experience/ui/ExperienceCard/ExperienceCard.test.tsx
index 1d14dbf..ecfc824 100644
--- a/src/entities/experience/ui/ExperienceCard/ExperienceCard.test.tsx
+++ b/src/entities/experience/ui/ExperienceCard/ExperienceCard.test.tsx
@@ -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)', () => {
diff --git a/src/entities/experience/ui/ExperienceCard/ExperienceCard.tsx b/src/entities/experience/ui/ExperienceCard/ExperienceCard.tsx
index 51a7a32..ba05de3 100644
--- a/src/entities/experience/ui/ExperienceCard/ExperienceCard.tsx
+++ b/src/entities/experience/ui/ExperienceCard/ExperienceCard.tsx
@@ -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>
   );
 }
diff --git a/src/widgets/BioSection/ui/BioSection/BioSection.tsx b/src/widgets/BioSection/ui/BioSection/BioSection.tsx
index 518c3bf..455bf0a 100644
--- a/src/widgets/BioSection/ui/BioSection/BioSection.tsx
+++ b/src/widgets/BioSection/ui/BioSection/BioSection.tsx
@@ -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} />;
 }
diff --git a/src/widgets/IntroSection/ui/IntroSection/IntroSection.tsx b/src/widgets/IntroSection/ui/IntroSection/IntroSection.tsx
index 28b54f4..2861198 100644
--- a/src/widgets/IntroSection/ui/IntroSection/IntroSection.tsx
+++ b/src/widgets/IntroSection/ui/IntroSection/IntroSection.tsx
@@ -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} />;
 }