refactor: widen section and sidebar, plain period text, Badge xs size for stack

src/entities/experience/ui/ExperienceCard/ExperienceCard.test.tsx

@@ -64,10 +64,11 @@ describe('ExperienceCard', () => {
       expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('Senior Developer');
     });
 
-    it('period badge has brutal-border, bg-blue, text-cream, md size', () => {
+    it('period has left border accent styling', () => {
       render(<ExperienceCard {...DEFAULT_PROPS} />);
-      const badge = screen.getByText('2021 – 2024');
-      expect(badge).toHaveClass('brutal-border', 'bg-blue', 'text-cream', 'px-4', 'py-2', 'text-sm');
+      const period = screen.getByText('2021 – 2024');
+      expect(period.tagName).toBe('P');
+      expect(period).toHaveClass('brutal-border-left', 'text-sm');
     });
 
     it('description renders via RichText with rich-text class', () => {
@@ -83,12 +84,13 @@ describe('ExperienceCard', () => {
   });
 
   describe('stack tags', () => {
-    it('renders stack tags in the sidebar', () => {
+    it('renders stack tags in the sidebar as xs outline badges', () => {
       render(<ExperienceCard {...DEFAULT_PROPS} stack={['React', 'TypeScript']} />);
       const react = screen.getByText('React');
       const ts = screen.getByText('TypeScript');
       expect(react.closest('.brutal-border-sidebar')).toBeInTheDocument();
       expect(ts.closest('.brutal-border-sidebar')).toBeInTheDocument();
+      expect(react).toHaveClass('brutal-border', 'bg-transparent', 'px-2');
     });
 
     it('renders nothing extra when stack is empty', () => {

src/entities/experience/ui/ExperienceCard/ExperienceCard.tsx

@@ -29,7 +29,7 @@ type Props = {
 
 /**
  * Work experience card with sidebar layout.
- * Sidebar: period badge, company, stack tags.
+ * Sidebar: period, company, stack tags.
  * Main: job title and rich-text description.
  */
 export function ExperienceCard({ title, company, period, description, stack, className }: Props) {
@@ -38,12 +38,12 @@ export function ExperienceCard({ title, company, period, description, stack, cla
       <CardSidebar
         sidebar={
           <div className="flex flex-col gap-4">
-            <Badge size="md">{period}</Badge>
+            <p className="text-sm font-medium brutal-border-left pl-3">{period}</p>
             <p className="text-base font-medium">{company}</p>
             {stack.length > 0 && (
               <div className="flex flex-wrap gap-2">
                 {stack.map((tech) => (
-                  <Badge key={tech} variant="outline">
+                  <Badge key={tech} variant="outline" size="xs">
                     {tech}
                   </Badge>
                 ))}