From dc2d46663b8e0ec94a1508a57c4f8c2d8ba03506 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Thu, 23 Oct 2025 10:32:09 -0500
Subject: [PATCH] fix(qr-button): make button square and increase QR size
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Set button width to 100% with aspectRatio 1 for perfect square
- Reduce padding to 4px for tighter fit
- Increase mini QR code from 40px to 52px for better visibility

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/components/common/QRCodeButton.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/common/QRCodeButton.tsx b/apps/web/src/components/common/QRCodeButton.tsx
index 3e8d3dfa..1e7c7343 100644
--- a/apps/web/src/components/common/QRCodeButton.tsx
+++ b/apps/web/src/components/common/QRCodeButton.tsx
@@ -34,9 +34,10 @@ export function QRCodeButton({ url, style }: QRCodeButtonProps) {
     border: '2px solid rgba(251, 146, 60, 0.4)',
     background: 'linear-gradient(135deg, rgba(251, 146, 60, 0.2), rgba(251, 146, 60, 0.3))',
     borderRadius: '8px',
-    padding: '6px',
+    padding: '4px',
     fontSize: '16px',
     color: 'rgba(253, 186, 116, 1)',
+    width: '100%',
     aspectRatio: '1',
     alignSelf: 'stretch',
     flexShrink: 0,
@@ -61,7 +62,7 @@ export function QRCodeButton({ url, style }: QRCodeButtonProps) {
             Object.assign(e.currentTarget.style, buttonStyles)
           }}
         >
-          <QRCodeSVG value={url} size={40} level="L" />
+          <QRCodeSVG value={url} size={52} level="L" />
         </button>
       </Popover.Trigger>