Fix mobile snippet overflow

- Add overflow-x-hidden and max-w-full to snippets-container
- Add CSS rules to constrain snippet boxes and code blocks to viewport width
- Enable word wrapping for long code lines to prevent horizontal overflow
- Ensure proper box-sizing for mobile responsiveness

Author: codebude

public/index.html

@@ -59,7 +59,7 @@ <h1 class="text-2xl font-bold truncate">massCode-Web</h1>
             <div id="search-info-bar" class="hidden px-4 py-2 bg-blue-50 border-b border-blue-200 text-blue-800 text-sm dark:bg-blue-900 dark:border-blue-700 dark:text-blue-200">
                 <!-- Search results info will be displayed here -->
             </div>
-            <div id="snippets-container" class="flex-1 p-4 overflow-y-auto">
+            <div id="snippets-container" class="flex-1 p-4 overflow-y-auto overflow-x-hidden max-w-full">
                 <!-- Snippets will be rendered here -->
             </div>
         </main>

public/styles.css

@@ -149,4 +149,23 @@ pre.relative {
 .dark .search-highlight {
     background-color: #451a03;
     box-shadow: 0 0 0 1px #d97706;
+}
+
+/* Mobile responsive snippet styles */
+#snippets-container > div {
+    max-width: 100%;
+    box-sizing: border-box;
+}
+
+#snippets-container pre {
+    max-width: 100%;
+    box-sizing: border-box;
+}
+
+/* Ensure code blocks don't overflow on mobile */
+#snippets-container pre code {
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    max-width: 100%;
+    overflow-wrap: break-word;
 }