3 column view on mobile devices (#95)

static/js/index.js

@@ -794,12 +794,13 @@ function displayPatternBatch() {
 // Create a pattern card element
 function createPatternCard(pattern) {
     const card = document.createElement('div');
-    card.className = 'pattern-card group relative flex flex-col items-center gap-3 bg-gray-50';
+    card.className = 'pattern-card flex flex-col items-center gap-3 bg-gray-50';
+    card.style = 'max-width:128px; width:100%; min-width:80px;';
     card.dataset.pattern = pattern;
     
     // Create preview container with proper styling for loading indicator
     const previewContainer = document.createElement('div');
-    previewContainer.className = 'w-32 h-32 rounded-full shadow-md relative pattern-preview';
+    previewContainer.className = 'rounded-full shadow-md relative pattern-preview group aspect-square w-full max-w-[128px] min-w-[80px] overflow-hidden';
     previewContainer.dataset.pattern = pattern;
     
     // Add loading indicator

templates/index.html

@@ -259,7 +259,7 @@
         </div>
     </div>
     <section class="px-4 py-6">
-        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 sm:gap-5 md:gap-6">
+        <div class="grid grid-cols-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 sm:gap-5 md:gap-6 max-w-[680px] mx-auto">
             <!-- All patterns will be populated here -->
         </div>
         <!-- Spacer to allow scrolling past last patterns -->