fix: resolve mobile layout swipe and word cloud scaling

client/src/App.jsx

@@ -1163,10 +1163,12 @@ export default function App() {
                   const placedBoxes = [];
                   const laidOutWords = [];
                   
-                  const stretchX = 2.8; 
+                  const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
+                  const stretchX = isMobile ? 1.4 : 2.8; 
                   const stretchY = 1.0;
-                  const paddingX = 12; 
-                  const paddingY = 8; 
+                  const paddingX = isMobile ? 6 : 12; 
+                  const paddingY = isMobile ? 4 : 8; 
+                  const fontScale = isMobile ? 0.45 : 1.0;
                   const remToPx = 16;
 
                   // Identify center group: words with count within 500 of the max count,
@@ -1221,6 +1223,8 @@ export default function App() {
                       fontWeight = fontSize > 2.0 ? '700' : (fontSize > 1.4 ? '600' : '500');
                     }
                     
+                    fontSize = fontSize * fontScale;
+                    
                     // Precise width calculation based on custom width factors
                     const wordWidth = fontSize * getWordWidthFactor(w.word) * remToPx;
                     const wordHeight = fontSize * 1.1 * remToPx;

client/src/index.css

@@ -1130,6 +1130,15 @@ body {
     justify-content: flex-start;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none; /* Firefox */
+    flex-wrap: nowrap;
+  }
+  
+  .nav-tabs > * {
+    flex-shrink: 0;
+  }
+  
+  .tab-content p {
+    padding: 0 0.5rem;
   }
   
   .nav-tabs::-webkit-scrollbar {