🎨 Update styling and layout in index.html for better UI/UX

parse-qr/index.html

@@ -20,6 +20,7 @@
             height: 100%;
             overscroll-behavior: auto;
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            overflow-x: hidden;
         }
 
         body {
@@ -33,17 +34,20 @@
             padding: calc(env(safe-area-inset-top) + 20px) env(safe-area-inset-right) calc(env(safe-area-inset-bottom) + 20px) env(safe-area-inset-left);
             margin: 0;
             overflow-y: auto;
+            overflow-x: hidden;
             -webkit-overflow-scrolling: touch;
+            max-width: 100%;
         }
 
         .container {
             background: white;
             border-radius: 16px;
             box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-            padding: 40px;
+            padding: 20px;
             max-width: 600px;
             width: 100%;
             margin: 20px;
+            box-sizing: border-box;
         }
 
         h1 {
@@ -56,8 +60,8 @@
 
         .refresh-btn {
             position: absolute;
-            top: -30px;
-            right: -30px;
+            top: -20px;
+            right: -20px;
             background: transparent;
             border: none;
             font-size: 20px;
@@ -140,6 +144,8 @@
             justify-content: center;
             align-items: center;
             flex-direction: column;
+            padding: 20px;
+            box-sizing: border-box;
         }
 
         .camera-modal.visible {
@@ -292,20 +298,19 @@
         }
 
         .history-list {
-            max-height: 300px;
-            overflow-y: auto;
-            -webkit-overflow-scrolling: touch;
+            overflow-y: visible;
         }
 
         .history-item {
             display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
+            flex-direction: column;
             padding: 12px;
             background: #f8f9ff;
             border-radius: 8px;
             margin-bottom: 10px;
             transition: transform 0.2s;
+            max-width: 100%;
+            overflow-wrap: break-word;
         }
 
         .history-item:hover {
@@ -313,32 +318,40 @@
         }
 
         .history-text {
-            flex: 1;
             word-break: break-all;
             color: #333;
             font-size: 14px;
             line-height: 1.5;
-            margin-right: 10px;
+            margin-bottom: 4px;
+            width: 100%;
+        }
+
+        .history-footer {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: 100%;
+            margin-top: 4px;
+            padding-right: 0px;
         }
 
         .history-time {
-            font-size: 12px;
+            font-size: 10px;
             color: #999;
-            margin-top: 4px;
         }
 
         .history-actions {
             display: flex;
-            gap: 6px;
-            flex-shrink: 0;
+            gap: 4px;
+            align-self: flex-end;
         }
 
         .delete-btn, .copy-history-btn {
-            padding: 6px 10px;
+            padding: 4px 8px;
             background: #fff;
             border: 1px solid #ffe6e6;
             border-radius: 4px;
-            font-size: 12px;
+            font-size: 11px;
             cursor: pointer;
             transition: all 0.2s;
             flex-shrink: 0;
@@ -490,15 +503,15 @@
                 const displayText = item.text.length > 100 ? item.text.substring(0, 100) + '...' : item.text;
                 return `
                     <div class="history-item">
-                        <div class="history-text">
-                            <div>${escapeHtml(displayText)}</div>
+                        <div class="history-text">${escapeHtml(displayText)}</div>
+                        <div class="history-footer">
                             <div class="history-time">${timeStr}</div>
-                        </div>
                             <div class="history-actions">
                                 <button class="copy-history-btn" data-index="${index}">📋 Copy</button>
                                 <button class="delete-btn" data-index="${index}">🗑️ Delete</button>
                             </div>
                         </div>
+                    </div>
                 `;
             }).join('');
             historyList.querySelectorAll('.delete-btn').forEach(btn => {