From 979e2071d11b32219ef138522de1b245a4f3a552 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 18 May 2026 13:07:01 +0300
Subject: [PATCH] refactor: widen section and sidebar, plain period text, Badge
 xs size for stack

---
 .../ui/ExperienceCard/ExperienceCard.test.tsx          | 10 ++++++----
 .../experience/ui/ExperienceCard/ExperienceCard.tsx    |  6 +++---
 src/shared/styles/theme.css                            |  2 +-
 src/shared/ui/Badge/ui/Badge.test.tsx                  |  5 +++++
 src/shared/ui/Badge/ui/Badge.tsx                       |  3 ++-
 src/shared/ui/Card/ui/Card.test.tsx                    |  2 +-
 src/shared/ui/Card/ui/Card.tsx                         |  2 +-
 7 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/entities/experience/ui/ExperienceCard/ExperienceCard.test.tsx b/src/entities/experience/ui/ExperienceCard/ExperienceCard.test.tsx
index 0d81cf5..8b5158d 100644
--- a/src/entities/experience/ui/ExperienceCard/ExperienceCard.test.tsx
+++ b/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', () => {
diff --git a/src/entities/experience/ui/ExperienceCard/ExperienceCard.tsx b/src/entities/experience/ui/ExperienceCard/ExperienceCard.tsx
index 337c1bc..d5f3d71 100644
--- a/src/entities/experience/ui/ExperienceCard/ExperienceCard.tsx
+++ b/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>
                 ))}
diff --git a/src/shared/styles/theme.css b/src/shared/styles/theme.css
index d2e3f1c..c8b4cfc 100644
--- a/src/shared/styles/theme.css
+++ b/src/shared/styles/theme.css
@@ -80,7 +80,7 @@
 
   /* === GRID === */
   --grid-gap: var(--space-3);
-  --section-content-width: 56rem;
+  --section-content-width: 72rem;
 
   /* === ANIMATION === */
   --ease-default: ease;
diff --git a/src/shared/ui/Badge/ui/Badge.test.tsx b/src/shared/ui/Badge/ui/Badge.test.tsx
index 8cb88bf..6830574 100644
--- a/src/shared/ui/Badge/ui/Badge.test.tsx
+++ b/src/shared/ui/Badge/ui/Badge.test.tsx
@@ -48,6 +48,11 @@ describe('Badge', () => {
       expect(screen.getByText('Tag')).toHaveClass('px-3', 'py-1', 'text-xs');
     });
 
+    it('applies xs size classes', () => {
+      render(<Badge size="xs">Tag</Badge>);
+      expect(screen.getByText('Tag')).toHaveClass('px-2', 'py-0.5');
+    });
+
     it('applies sm size classes', () => {
       render(<Badge size="sm">Tag</Badge>);
       expect(screen.getByText('Tag')).toHaveClass('px-3', 'py-1', 'text-xs');
diff --git a/src/shared/ui/Badge/ui/Badge.tsx b/src/shared/ui/Badge/ui/Badge.tsx
index 657cc3a..9150fd5 100644
--- a/src/shared/ui/Badge/ui/Badge.tsx
+++ b/src/shared/ui/Badge/ui/Badge.tsx
@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import { cn } from '$shared/lib';
 
 export type BadgeVariant = 'default' | 'primary' | 'secondary' | 'outline';
-export type BadgeSize = 'sm' | 'md';
+export type BadgeSize = 'xs' | 'sm' | 'md';
 
 interface Props {
   /**
@@ -33,6 +33,7 @@ const VARIANTS: Record<BadgeVariant, string> = {
 };
 
 const SIZES: Record<BadgeSize, string> = {
+  xs: 'px-2 py-0.5 text-[10px]',
   sm: 'px-3 py-1 text-xs',
   md: 'px-4 py-2 text-sm',
 };
diff --git a/src/shared/ui/Card/ui/Card.test.tsx b/src/shared/ui/Card/ui/Card.test.tsx
index fa5c56d..ccb4a3a 100644
--- a/src/shared/ui/Card/ui/Card.test.tsx
+++ b/src/shared/ui/Card/ui/Card.test.tsx
@@ -100,7 +100,7 @@ describe('CardSidebar', () => {
     it('sidebar column has fixed width on md', () => {
       render(<CardSidebar sidebar={<span>Sidebar</span>}>Main</CardSidebar>);
       const sidebar = screen.getByText('Sidebar').parentElement;
-      expect(sidebar).toHaveClass('md:w-52');
+      expect(sidebar).toHaveClass('md:w-64');
     });
 
     it('main column fills remaining space', () => {
diff --git a/src/shared/ui/Card/ui/Card.tsx b/src/shared/ui/Card/ui/Card.tsx
index e9ab93c..8a823ed 100644
--- a/src/shared/ui/Card/ui/Card.tsx
+++ b/src/shared/ui/Card/ui/Card.tsx
@@ -109,7 +109,7 @@ interface CardSidebarProps {
 export function CardSidebar({ sidebar, children, className }: CardSidebarProps) {
   return (
     <div className={cn('flex flex-col md:flex-row', className)}>
-      <div className="shrink-0 md:w-52 brutal-border-sidebar pb-6 md:pb-0 md:pr-8 mb-6 md:mb-0">{sidebar}</div>
+      <div className="shrink-0 md:w-64 brutal-border-sidebar pb-6 md:pb-0 md:pr-8 mb-6 md:mb-0">{sidebar}</div>
       <div className="flex-1 min-w-0 md:pl-8">{children}</div>
     </div>
   );