From 59304f4ae3f5a00f6181da87bbb5b99e14103c07 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 14 Jul 2026 10:35:35 +0300
Subject: [PATCH] feat(theme): golden-ratio width cap for tag groups

---
 .../experience/ui/ExperienceCard/ExperienceCard.tsx        | 3 ++-
 src/entities/project/ui/ProjectCard/ProjectCard.tsx        | 3 ++-
 src/shared/styles/theme.css                                | 7 +++++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/entities/experience/ui/ExperienceCard/ExperienceCard.tsx b/src/entities/experience/ui/ExperienceCard/ExperienceCard.tsx
index 1208d4d..a7fc021 100644
--- a/src/entities/experience/ui/ExperienceCard/ExperienceCard.tsx
+++ b/src/entities/experience/ui/ExperienceCard/ExperienceCard.tsx
@@ -41,7 +41,8 @@ export function ExperienceCard({ title, company, period, description, stack, cla
             <p className="text-sm font-medium brutal-border-left pl-3">{period}</p>
             <p className="text-lg font-black">{company}</p>
             {stack.length > 0 && (
-              <div className="flex flex-wrap gap-2">
+              /* Golden-ratio cap for the stacked (top) tablet layout; full width on mobile, and lg sidebar is already width-constrained. */
+              <div className="flex flex-wrap gap-2 sm:max-w-golden lg:max-w-none">
                 {stack.map((tech) => (
                   <Badge key={tech} variant="outline" size="xs">
                     {tech}
diff --git a/src/entities/project/ui/ProjectCard/ProjectCard.tsx b/src/entities/project/ui/ProjectCard/ProjectCard.tsx
index 6a1cd63..efc5e99 100644
--- a/src/entities/project/ui/ProjectCard/ProjectCard.tsx
+++ b/src/entities/project/ui/ProjectCard/ProjectCard.tsx
@@ -47,7 +47,8 @@ export function ProjectCard({ title, year, description, tags, url, imageUrl, pri
           <div className="flex flex-col gap-4">
             <p className="text-sm font-medium brutal-border-left pl-3">{year}</p>
             {tags.length > 0 && (
-              <div className="flex flex-wrap gap-2">
+              /* Golden-ratio cap for the stacked (top) tablet layout; full width on mobile, and lg sidebar is already width-constrained. */
+              <div className="flex flex-wrap gap-2 sm:max-w-golden lg:max-w-none">
                 {tags.map((tag) => (
                   <Badge key={tag} variant="outline" size="xs">
                     {tag}
diff --git a/src/shared/styles/theme.css b/src/shared/styles/theme.css
index e5e90f4..aa13707 100644
--- a/src/shared/styles/theme.css
+++ b/src/shared/styles/theme.css
@@ -293,6 +293,13 @@
 .brutal-shadow-lg {
   box-shadow: var(--shadow-brutal-lg);
 }
+/* Golden-ratio (1/φ ≈ 0.618) cap for badge/tag groups so they form a tidy
+ * block instead of spanning the full width. Apply with a breakpoint prefix
+ * (e.g. sm:) — on mobile the group should use the full available width. */
+@utility max-w-golden {
+  max-width: 61.8%;
+}
+
 @utility brutal-border {
   border: var(--border-width) solid var(--blue);
   border-radius: var(--radius);