From caa7ced772a0d27504cc93c06371d366112b816e Mon Sep 17 00:00:00 2001
From: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date: Sun, 6 Sep 2026 14:00:59 +0330
Subject: [PATCH] fix(skills): make tools grid truly flexible and responsive
 across all screens

---
 src/components/SkillsSection.module.css | 65 ++++++++++++++-----------
 1 file changed, 36 insertions(+), 29 deletions(-)

diff --git a/src/components/SkillsSection.module.css b/src/components/SkillsSection.module.css
index ceeebe4..9259ec7 100644
--- a/src/components/SkillsSection.module.css
+++ b/src/components/SkillsSection.module.css
@@ -95,8 +95,9 @@
 
 .toolsGrid {
   display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  gap: 1.5rem;
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+  gap: 1rem;
+  width: 100%;
 }
 
 .toolTile {
@@ -104,12 +105,16 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 8.25rem;
-  height: 8.5rem;
+  width: 100%;
+  min-width: 0;
+  height: auto;
+  aspect-ratio: 1 / 1;
+  min-height: 6.5rem;
   background-color: transparent;
   border: 1px solid var(--border-default);
   border-radius: var(--radius-lg);
-  padding: 1rem 0.5rem;
+  padding: 0.75rem 0.375rem;
+  box-sizing: border-box;
   transition:
     opacity var(--motion-duration-default) ease,
     filter var(--motion-duration-default) ease,
@@ -125,12 +130,12 @@
 }
 
 .toolIconContainer {
-  width: 4rem;
-  height: 4rem;
+  width: clamp(2.25rem, 42%, 3.5rem);
+  height: clamp(2.25rem, 42%, 3.5rem);
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.5rem;
 }
 
 .toolIcon {
@@ -140,11 +145,15 @@
 }
 
 .toolLabel {
-  font-size: var(--font-size-body-small);
-  line-height: var(--line-height-body-small);
+  font-size: clamp(0.71875rem, 1vw, 0.8125rem);
+  line-height: 1.25;
   font-weight: 600;
   color: var(--text-primary);
   text-align: center;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .filterTabsRow {
@@ -168,15 +177,11 @@
 @media (max-width: 1180px) {
   .toolsGrid {
     grid-template-columns: repeat(6, minmax(0, 1fr));
-    gap: var(--space-4);
-  }
-
-  .toolTile {
-    width: 100%;
+    gap: 0.875rem;
   }
 }
 
-@media (max-width: 900px) {
+@media (max-width: 850px) {
   .skillsSection {
     padding-top: var(--space-8);
     padding-bottom: var(--space-9);
@@ -193,6 +198,7 @@
 
   .toolsGrid {
     grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 0.75rem;
   }
 
   .filterTabsRow {
@@ -200,7 +206,7 @@
   }
 }
 
-@media (max-width: 560px) {
+@media (max-width: 600px) {
   .mainCard {
     padding: var(--space-5);
   }
@@ -211,18 +217,8 @@
   }
 
   .toolsGrid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: var(--space-3);
-  }
-
-  .toolTile {
-    height: 7.75rem;
-    padding: var(--space-3) var(--space-2);
-  }
-
-  .toolIconContainer {
-    width: 3.25rem;
-    height: 3.25rem;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0.625rem;
   }
 
   .filterTabsRow {
@@ -236,6 +232,17 @@
   }
 }
 
+@media (max-width: 400px) {
+  .mainCard {
+    padding: var(--space-4);
+  }
+
+  .toolsGrid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.5rem;
+  }
+}
+
 @media (hover: hover) and (pointer: fine) {
   .badgePill:hover {
     border-color: var(--accent-default);