Show full QR codes with copy button in GroupDetailPage

2025-11-23 22:09:11 +01:00
parent 646ab0aef1
commit 587847e7ed
2 changed files with 31 additions and 4 deletions
@@ -76,13 +76,27 @@ export default function GroupDetailPage() {
            <Card className="shadow-sm h-100">
              <Card.Body>
                <div className="d-flex justify-content-between align-items-start mb-3">
-                  <div>
+                  <div className="flex-grow-1">
                    <h5 className="mb-1">{person.name}</h5>
                    {person.email && <small className="text-muted d-block">{person.email}</small>}
                    {person.phoneNumber && <small className="text-muted d-block">{person.phoneNumber}</small>}
-                    <small className="font-monospace text-muted d-block mt-2">
-                      QR: {person.qrCode.substring(0, 8)}...
-                    </small>
+                    <div className="mt-2 p-2 bg-light rounded">
+                      <small className="text-muted d-block">QR Code:</small>
+                      <code className="d-block text-break" style={{ fontSize: '0.75rem' }}>
+                        {person.qrCode}
+                      </code>
+                      <Button
+                        variant="outline-primary"
+                        size="sm"
+                        className="mt-2 w-100"
+                        onClick={() => {
+                          navigator.clipboard.writeText(person.qrCode);
+                          alert('QR code copied to clipboard!');
+                        }}
+                      >
+                        Copy QR Code
+                      </Button>
+                    </div>
                  </div>
                  <Button
                    variant={selectedPerson?.id === person.id ? 'secondary' : 'outline-primary'}