Fix mobile tab navigation overflow

- Add horizontal scrolling for Principles and Values tab navigation
- Contain tabs within full-width on mobile with scroll access
- Add scrollbar-hide utility class for clean mobile experience
- Maintain centered layout on desktop while enabling scroll on mobile
- Ensure all tabs are accessible via horizontal scrolling

Author: mmaxence

src/app/globals.css

@@ -8,6 +8,15 @@
   perspective: 1000px;
 }
 
+/* Hide scrollbar but keep functionality */
+.scrollbar-hide {
+  -ms-overflow-style: none;  /* Internet Explorer 10+ */
+  scrollbar-width: none;  /* Firefox */
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;  /* Safari and Chrome */
+}
+
 :root {
   /* Dark theme with blue accent */
   --background: 0 0% 3%;

src/components/PrinciplesValuesShowcase.tsx

@@ -351,13 +351,14 @@ const PrinciplesValuesShowcase = () => {
           </div>
 
           {/* Principle Navigation */}
-          <div className="flex justify-center mb-12">
-            <div 
-              ref={principlesNavRef}
-              className="flex gap-2 bg-muted/30 p-2 rounded-xl"
-              onMouseEnter={() => setIsHovered(true)}
-              onMouseLeave={() => setIsHovered(false)}
-            >
+          <div className="mb-12 px-4">
+            <div className="overflow-x-auto scrollbar-hide">
+              <div 
+                ref={principlesNavRef}
+                className="flex gap-2 bg-muted/30 p-2 rounded-xl w-fit mx-auto min-w-full justify-center md:w-fit md:min-w-0"
+                onMouseEnter={() => setIsHovered(true)}
+                onMouseLeave={() => setIsHovered(false)}
+              >
               {translatedPrinciples.map((principle, index) => (
                 <button
                   key={principle.id}
@@ -371,6 +372,7 @@ const PrinciplesValuesShowcase = () => {
                   {principle.shortTitle}
                 </button>
               ))}
+              </div>
             </div>
           </div>
 
@@ -459,13 +461,14 @@ const PrinciplesValuesShowcase = () => {
           </div>
 
           {/* Value Navigation */}
-          <div className="flex justify-center mb-12">
-            <div 
-              ref={valuesNavRef}
-              className="flex gap-2 bg-muted/30 p-2 rounded-xl"
-              onMouseEnter={() => setIsHovered(true)}
-              onMouseLeave={() => setIsHovered(false)}
-            >
+          <div className="mb-12 px-4">
+            <div className="overflow-x-auto scrollbar-hide">
+              <div 
+                ref={valuesNavRef}
+                className="flex gap-2 bg-muted/30 p-2 rounded-xl w-fit mx-auto min-w-full justify-center md:w-fit md:min-w-0"
+                onMouseEnter={() => setIsHovered(true)}
+                onMouseLeave={() => setIsHovered(false)}
+              >
               {translatedValues.map((value, index) => (
                 <button
                   key={value.id}
@@ -479,6 +482,7 @@ const PrinciplesValuesShowcase = () => {
                   {value.shortTitle}
                 </button>
               ))}
+              </div>
             </div>
           </div>