fix: comprehensive mobile responsiveness across all components

- Carousel: auto-adapt columns for screen size (1 col on mobile,
  max 2 on tablet), hide progress dots when >10 positions
- Navbar: solid background when mobile menu is open (fixes invisible
  dropdown items over dark hero)
- Table: responsive thumbnail sizes (w-40 on mobile, w-72 on desktop)
- Featured strip: dynamically measure card width for auto-scroll
- Modal: flex-wrap on action buttons for narrow screens
- About: responsive gap on stats row (gap-6 on mobile, gap-12 on sm+)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: davidagustin

src/components/About.tsx

@@ -181,7 +181,7 @@ const About: React.FC = () => {
             </p>
 
             {/* ---- stats ---- */}
-            <div className="flex gap-12">
+            <div className="flex gap-6 sm:gap-12">
               {stats.map((stat) => (
                 <div key={stat.label}>
                   <div className="text-3xl font-bold text-surface-900 dark:text-white">

src/components/Navbar.tsx

@@ -37,7 +37,7 @@ const Navbar: React.FC<NavbarProps> = ({ theme, toggleTheme }) => {
     <motion.nav
       aria-label="Main navigation"
       className={`fixed top-0 w-full z-50 transition-all duration-300 ${
-        scrolled
+        scrolled || isOpen
           ? 'bg-white/95 dark:bg-surface-950/95 backdrop-blur-md shadow-sm border-b border-surface-100 dark:border-surface-800'
           : 'bg-transparent'
       }`}
@@ -53,7 +53,7 @@ const Navbar: React.FC<NavbarProps> = ({ theme, toggleTheme }) => {
               type="button"
               onClick={() => scrollToSection('home')}
               className={`text-lg font-bold tracking-tight transition-colors ${
-                scrolled
+                scrolled || isOpen
                   ? 'text-surface-900 dark:text-white hover:text-primary-700 dark:hover:text-primary-400'
                   : 'text-white hover:text-primary-300'
               }`}
@@ -93,7 +93,7 @@ const Navbar: React.FC<NavbarProps> = ({ theme, toggleTheme }) => {
               onClick={toggleTheme}
               aria-label={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
               className={`p-2 rounded-lg transition-colors duration-200 ${
-                scrolled
+                scrolled || isOpen
                   ? 'text-surface-500 dark:text-surface-400 hover:text-surface-900 dark:hover:text-white hover:bg-surface-100 dark:hover:bg-surface-800'
                   : 'text-surface-300 hover:text-white hover:bg-white/10'
               }`}
@@ -112,21 +112,21 @@ const Navbar: React.FC<NavbarProps> = ({ theme, toggleTheme }) => {
               >
                 <span
                   className={`w-5 h-px transition-all duration-300 ${
-                    scrolled
+                    scrolled || isOpen
                       ? 'bg-surface-800 dark:bg-white'
                       : 'bg-white'
                   } ${isOpen ? 'rotate-45 translate-y-[3.5px]' : ''}`}
                 />
                 <span
                   className={`w-5 h-px transition-all duration-300 ${
-                    scrolled
+                    scrolled || isOpen
                       ? 'bg-surface-800 dark:bg-white'
                       : 'bg-white'
                   } ${isOpen ? 'opacity-0' : ''}`}
                 />
                 <span
                   className={`w-5 h-px transition-all duration-300 ${
-                    scrolled
+                    scrolled || isOpen
                       ? 'bg-surface-800 dark:bg-white'
                       : 'bg-white'
                   } ${isOpen ? '-rotate-45 -translate-y-[3.5px]' : ''}`}
@@ -151,11 +151,7 @@ const Navbar: React.FC<NavbarProps> = ({ theme, toggleTheme }) => {
                     scrollToSection(item.id);
                     setIsOpen(false);
                   }}
-                  className={`block py-3 px-2 text-sm transition-colors ${
-                    scrolled
-                      ? 'text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-white'
-                      : 'text-surface-300 hover:text-white'
-                  }`}
+                  className="block py-3 px-2 text-sm transition-colors text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-white"
                 >
                   {item.label}
                 </a>

src/components/Projects.tsx

@@ -60,8 +60,9 @@ const FeaturedStrip: React.FC<{ onSelect: (p: Project) => void }> = ({ onSelect
 
     const interval = setInterval(() => {
       if (!isHoveredRef.current && scrollRef.current) {
-        // Card width: w-96 (384px) + gap-4 (16px) = 400px
-        const cardWidth = 400;
+        // Measure actual card width + gap dynamically for responsiveness
+        const firstCard = scrollRef.current.firstElementChild as HTMLElement | null;
+        const cardWidth = firstCard ? firstCard.offsetWidth + 16 : 336;
         scrollRef.current.scrollBy({ left: cardWidth, behavior: 'smooth' });
 
         // If reached the end, scroll back to start
@@ -136,12 +137,26 @@ const CarouselView: React.FC<{
   const [currentIndex, setCurrentIndex] = useState(0);
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const maxIndex = Math.max(0, projects.length - columns);
+  // Responsive column override: force fewer columns on small screens
+  const [effectiveCols, setEffectiveCols] = useState(columns);
+  useEffect(() => {
+    const update = () => {
+      const w = window.innerWidth;
+      if (w < 640) setEffectiveCols(1);
+      else if (w < 1024) setEffectiveCols(Math.min(columns, 2) as 1 | 2 | 3);
+      else setEffectiveCols(columns);
+    };
+    update();
+    window.addEventListener('resize', update);
+    return () => window.removeEventListener('resize', update);
+  }, [columns]);
+
+  const maxIndex = Math.max(0, projects.length - effectiveCols);
 
   // Reset when filter or columns change
   useEffect(() => {
     setCurrentIndex(0);
-  }, [projects.length, columns]);
+  }, [projects.length, effectiveCols]);
 
   const go = useCallback(
     (dir: 1 | -1) => {
@@ -161,9 +176,9 @@ const CarouselView: React.FC<{
 
   if (projects.length === 0) return null;
 
-  // Each card takes 1/columns of the container width, with gap
+  // Each card takes 1/effectiveCols of the container width, with gap
   const gapPx = 24;
-  const cardPercent = 100 / columns;
+  const cardPercent = 100 / effectiveCols;
   const offsetPercent = -(currentIndex * cardPercent);
 
   return (
@@ -202,7 +217,7 @@ const CarouselView: React.FC<{
                 key={project.id}
                 onClick={() => onSelect(project)}
                 className="bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700 rounded-xl overflow-hidden hover:shadow-lg dark:hover:border-surface-600 transition-shadow cursor-pointer flex-shrink-0"
-                style={{ width: `calc(${cardPercent}% - ${gapPx * (columns - 1) / columns}px)` }}
+                style={{ width: `calc(${cardPercent}% - ${gapPx * (effectiveCols - 1) / effectiveCols}px)` }}
               >
                 <ProjectThumbnail project={project} className="h-44" />
                 <div className="p-5">
@@ -261,24 +276,26 @@ const CarouselView: React.FC<{
         </div>
       </div>
 
-      {/* Progress indicator */}
-      <div className="flex items-center gap-1.5 mt-6">
-        {Array.from({ length: maxIndex + 1 }).map((_, i) => (
-          <button
-            key={i}
-            type="button"
-            onClick={() => setCurrentIndex(i)}
-            className={`rounded-full transition-all duration-200 ${
-              i === currentIndex
-                ? 'w-6 h-2 bg-surface-900 dark:bg-white'
-                : 'w-2 h-2 bg-surface-300 dark:bg-surface-600 hover:bg-surface-400 dark:hover:bg-surface-500'
-            }`}
-            aria-label={`Go to position ${i + 1}`}
-          />
-        ))}
-      </div>
+      {/* Progress indicator - dots for <=10 positions, text-only otherwise */}
+      {maxIndex + 1 <= 10 && (
+        <div className="flex items-center gap-1.5 mt-6">
+          {Array.from({ length: maxIndex + 1 }).map((_, i) => (
+            <button
+              key={i}
+              type="button"
+              onClick={() => setCurrentIndex(i)}
+              className={`rounded-full transition-all duration-200 ${
+                i === currentIndex
+                  ? 'w-6 h-2 bg-surface-900 dark:bg-white'
+                  : 'w-2 h-2 bg-surface-300 dark:bg-surface-600 hover:bg-surface-400 dark:hover:bg-surface-500'
+              }`}
+              aria-label={`Go to position ${i + 1}`}
+            />
+          ))}
+        </div>
+      )}
       <p className="text-xs text-surface-400 mt-3">
-        {currentIndex + 1}&ndash;{Math.min(currentIndex + columns, projects.length)} of {projects.length}
+        {currentIndex + 1}&ndash;{Math.min(currentIndex + effectiveCols, projects.length)} of {projects.length}
       </p>
     </div>
   );
@@ -326,7 +343,7 @@ const TableView: React.FC<{
               <td className="px-5 py-6">
                 <ProjectThumbnail
                   project={project}
-                  className="w-72 h-48 rounded-lg flex-shrink-0"
+                  className="w-40 h-28 sm:w-56 sm:h-36 lg:w-72 lg:h-48 rounded-lg flex-shrink-0"
                 />
               </td>
               <td className="px-5 py-6">
@@ -810,7 +827,7 @@ const Projects: React.FC = () => {
                   </ul>
                 </div>
 
-                <div className="flex items-center gap-3 pt-6 border-t border-surface-100 dark:border-surface-800">
+                <div className="flex flex-wrap items-center gap-3 pt-6 border-t border-surface-100 dark:border-surface-800">
                   <a
                     href={selectedProject.githubUrl}
                     target="_blank"