fix: Mobile CSS - circular play button and tabs alignment

- Fix stretched play button on small phones by using flex: 0 0 auto
  instead of flex: 1 1 100% in @media (max-width: 400px)
- Fix tabs overflowing viewport by resetting margin-left: 0 on mobile

examples/ir-report.html

@@ -261,6 +261,7 @@
         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;
@@ -1006,8 +1007,9 @@
 
       .control-btn.primary {
         order: -1;
-        flex: 1 1 100%;
-        justify-content: center;
+        flex: 0 0 auto;
+        width: 44px;
+        height: 44px;
         margin-bottom: 4px;
       }
     }
@@ -1179,7 +1181,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.10</span>
+                    <span>Version 0.1.11</span>
                 </div>
             </div>
         </div>

examples/london-scam.html

@@ -922,8 +922,9 @@
 
       .control-btn.primary {
         order: -1;
-        flex: 1 1 100%;
-        justify-content: center;
+        flex: 0 0 auto;
+        width: 44px;
+        height: 44px;
         margin-bottom: 4px;
       }
     }
@@ -1089,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.10</span>
+                    <span>Version 0.1.11</span>
                 </div>
             </div>
         </div>

package.json

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

src/generator.ts

@@ -235,6 +235,7 @@ function generateCss(theme: Theme, hasMultipleScenarios: boolean, colors?: Color
         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;
@@ -1186,8 +1187,9 @@ function generateCss(theme: Theme, hasMultipleScenarios: boolean, colors?: Color
 
       .control-btn.primary {
         order: -1;
-        flex: 1 1 100%;
-        justify-content: center;
+        flex: 0 0 auto;
+        width: 44px;
+        height: 44px;
         margin-bottom: 4px;
       }
     }