fix: Mobile tabs - truncate with ellipsis instead of scroll

- Tabs now shrink equally (flex: 1 1 0) and truncate long labels
- Added padding to align tabs with canvas border-radius
- Removed horizontal scrolling and momentum bounce
- All tabs always visible without overflow

examples/ir-report.html

@@ -257,28 +257,20 @@
     @media (max-width: 600px) {
       .tabs {
         flex-wrap: nowrap;
-        overflow-x: auto;
-        overflow-y: hidden; /* Prevent vertical movement */
-        -webkit-overflow-scrolling: touch;
-        padding-bottom: 0;
-        margin-left: 0; /* Reset margin on mobile to prevent overflow */
-        max-width: 100%; /* Ensure it doesn't overflow parent */
-        /* Hide scrollbars */
-        scrollbar-width: none;
-        -ms-overflow-style: none;
-      }
-      
-      .tabs::-webkit-scrollbar {
-        display: none;
+        overflow: hidden; /* No scrolling - tabs will truncate */
+        padding: 0 12px; /* Align with canvas border-radius */
+        margin-left: 0;
       }
 
       .tab {
-        padding: 10px 14px;
+        padding: 10px 12px;
         font-size: 12px;
-        flex: 0 0 auto; /* Don't shrink, let them scroll */
+        flex: 1 1 0; /* Shrink equally */
         text-align: center;
-        min-width: 0;
+        min-width: 60px; /* Don't get too small */
         white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
     }
     
@@ -1181,7 +1173,7 @@
                 <a href="https://github.com/lennyzeltser/conversation-replay" target="_blank" rel="noopener noreferrer" class="info-title-link">Conversation Replay</a>
                 <div class="info-meta">
                     <span>Created by <a href="https://zeltser.com" target="_blank" rel="noopener noreferrer" class="info-link">Lenny Zeltser</a></span>
-                    <span>Version 0.1.11</span>
+                    <span>Version 0.1.12</span>
                 </div>
             </div>
         </div>

examples/london-scam.html

@@ -1090,7 +1090,7 @@
                 <a href="https://github.com/lennyzeltser/conversation-replay" target="_blank" rel="noopener noreferrer" class="info-title-link">Conversation Replay</a>
                 <div class="info-meta">
                     <span>Created by <a href="https://zeltser.com" target="_blank" rel="noopener noreferrer" class="info-link">Lenny Zeltser</a></span>
-                    <span>Version 0.1.11</span>
+                    <span>Version 0.1.12</span>
                 </div>
             </div>
         </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "conversation-replay",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "Create annotated replays of text conversations",
   "main": "dist/cli.js",
   "type": "module",

src/generator.ts

@@ -231,28 +231,20 @@ function generateCss(theme: Theme, hasMultipleScenarios: boolean, colors?: Color
     @media (max-width: 600px) {
       .tabs {
         flex-wrap: nowrap;
-        overflow-x: auto;
-        overflow-y: hidden; /* Prevent vertical movement */
-        -webkit-overflow-scrolling: touch;
-        padding-bottom: 0;
-        margin-left: 0; /* Reset margin on mobile to prevent overflow */
-        max-width: 100%; /* Ensure it doesn't overflow parent */
-        /* Hide scrollbars */
-        scrollbar-width: none;
-        -ms-overflow-style: none;
-      }
-      
-      .tabs::-webkit-scrollbar {
-        display: none;
+        overflow: hidden; /* No scrolling - tabs will truncate */
+        padding: 0 12px; /* Align with canvas border-radius */
+        margin-left: 0;
       }
 
       .tab {
-        padding: 10px 14px;
+        padding: 10px 12px;
         font-size: 12px;
-        flex: 0 0 auto; /* Don't shrink, let them scroll */
+        flex: 1 1 0; /* Shrink equally */
         text-align: center;
-        min-width: 0;
+        min-width: 60px; /* Don't get too small */
         white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
     }