updated

app/templates/index.html

@@ -214,7 +214,9 @@
         }
 
         .download-section {
+            display: flex;
             gap: 10px;
+            flex-wrap: wrap;
         }
 
         .btn-secondary {
@@ -292,16 +294,202 @@
         }
 
         @media (max-width: 768px) {
+            body {
+                padding: 10px;
+            }
+
+            .container {
+                border-radius: 10px;
+            }
+
+            .header {
+                padding: 20px 15px;
+                position: relative;
+            }
+
+            .header h1 {
+                font-size: 2em;
+                margin-bottom: 8px;
+            }
+
+            .header p {
+                font-size: 1em;
+            }
+
+            .header div {
+                position: static !important;
+                text-align: center;
+                margin-top: 15px;
+            }
+
             .main-content {
                 grid-template-columns: 1fr;
+                gap: 20px;
+                padding: 20px 15px;
+            }
+
+            .form-section {
+                padding: 20px 15px;
+            }
+
+            .form-section h2 {
+                font-size: 1.3em;
+                margin-bottom: 15px;
             }
             
             .color-inputs {
                 grid-template-columns: 1fr;
+                gap: 10px;
             }
             
             .style-selector {
                 grid-template-columns: 1fr;
+                gap: 8px;
+            }
+
+            .qr-preview {
+                padding: 20px 10px;
+                min-height: 250px;
+            }
+
+            .qr-preview img {
+                max-height: 200px;
+            }
+
+            .download-section {
+                gap: 8px;
+                flex-direction: column;
+            }
+
+            .download-section .btn {
+                margin: 0;
+                padding: 12px;
+                font-size: 14px;
+            }
+
+            /* QR History Mobile Optimization */
+            .qr-history {
+                margin-top: 20px;
+                padding: 15px;
+            }
+
+            .qr-history h3 {
+                font-size: 1.2em;
+                margin-bottom: 15px;
+            }
+
+            .qr-item {
+                flex-direction: column;
+                align-items: stretch;
+                gap: 12px;
+                padding: 15px;
+                margin-bottom: 15px;
+            }
+
+            .qr-item-header {
+                display: flex;
+                align-items: center;
+                gap: 12px;
+            }
+
+            .qr-item img {
+                width: 60px;
+                height: 60px;
+                flex-shrink: 0;
+            }
+
+            .qr-item-info {
+                flex: 1;
+                margin: 0;
+            }
+
+            .qr-item-info h4 {
+                font-size: 1em;
+                margin-bottom: 4px;
+            }
+
+            .qr-item-info p {
+                font-size: 0.85em;
+                margin: 0;
+            }
+
+            .qr-item-actions {
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+                gap: 8px;
+                margin-top: 10px;
+            }
+
+            .qr-item-actions.full-width {
+                grid-template-columns: 1fr 1fr 1fr;
+            }
+
+            .btn-small {
+                padding: 8px 12px;
+                font-size: 11px;
+                text-align: center;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                min-height: 32px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            /* Special handling for link_page items with more buttons */
+            .qr-item[data-type="link_page"] .qr-item-actions {
+                grid-template-columns: 1fr 1fr;
+                gap: 6px;
+            }
+
+            .qr-item[data-type="link_page"] .btn-small {
+                font-size: 10px;
+                padding: 6px 8px;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .header h1 {
+                font-size: 1.8em;
+            }
+
+            .form-section {
+                padding: 15px 10px;
+            }
+
+            .main-content {
+                padding: 15px 10px;
+            }
+
+            .qr-history {
+                padding: 10px;
+            }
+
+            .qr-item {
+                padding: 12px;
+            }
+
+            .qr-item img {
+                width: 50px;
+                height: 50px;
+            }
+
+            .qr-item-actions {
+                grid-template-columns: 1fr 1fr;
+                gap: 6px;
+            }
+
+            .btn-small {
+                font-size: 10px;
+                padding: 6px 8px;
+                min-height: 30px;
+            }
+
+            /* Stack action buttons for very small screens */
+            .qr-item[data-type="link_page"] .qr-item-actions {
+                grid-template-columns: 1fr 1fr;
+                gap: 5px;
             }
         }
     </style>
@@ -741,16 +929,18 @@
                 }
 
                 historyList.innerHTML = qrCodes.map(qr => `
-                    <div class="qr-item">
+                    <div class="qr-item" data-type="${qr.type}">
-                        <img src="${qr.preview}" alt="QR Code">
+                        <div class="qr-item-header">
-                        <div class="qr-item-info">
+                            <img src="${qr.preview}" alt="QR Code">
-                            <h4>${qr.type.toUpperCase()}${qr.type === 'link_page' ? ' 🔗' : ''}</h4>
+                            <div class="qr-item-info">
-                            <p>Created: ${new Date(qr.created_at).toLocaleDateString()}</p>
+                                <h4>${qr.type.toUpperCase()}${qr.type === 'link_page' ? ' 🔗' : ''}</h4>
+                                <p>Created: ${new Date(qr.created_at).toLocaleDateString()}</p>
+                            </div>
                         </div>
-                        <div class="qr-item-actions">
+                        <div class="qr-item-actions ${qr.type === 'link_page' ? 'full-width' : ''}">
                             <button class="btn btn-small btn-primary" onclick="downloadQRById('${qr.id}', 'png')" title="Download PNG">📥 PNG</button>
                             <button class="btn btn-small btn-success" onclick="downloadQRById('${qr.id}', 'svg')" title="Download SVG">🎨 SVG</button>
-                            ${qr.type === 'link_page' ? `<button class="btn btn-small" onclick="openLinkPage('${qr.id}')" style="background: #28a745;" title="Manage Links">📝 Manage</button>` : ''}
+                            ${qr.type === 'link_page' ? `<button class="btn btn-small" onclick="openLinkPage('${qr.id}')" style="background: #28a745;" title="Manage Links">📝 Edit</button>` : ''}
                             ${qr.type === 'link_page' ? `<button class="btn btn-small" onclick="openStatistics('${qr.id}')" style="background: #17a2b8;" title="View Statistics">📊 Stats</button>` : ''}
                             <button class="btn btn-small btn-secondary" onclick="deleteQR('${qr.id}')" title="Delete QR Code">🗑️</button>
                         </div>