diff --git a/parse-qr/index.html b/parse-qr/index.html index 0262006..e3b3a3c 100644 --- a/parse-qr/index.html +++ b/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,13 +503,13 @@ const displayText = item.text.length > 100 ? item.text.substring(0, 100) + '...' : item.text; return `
-
-
${escapeHtml(displayText)}
+
${escapeHtml(displayText)}
+ -
- - +
+ + +
`;