From 374e571aa699879e9c1dbd46c8b86434c4c42c3f Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Tue, 14 Feb 2023 22:33:13 +0100
Subject: [PATCH] fix: QR alignment

---
 packages/app/src/Pages/ProfilePage.css | 10 +++++++++-
 packages/app/src/Pages/ProfilePage.tsx |  6 +++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/Pages/ProfilePage.css b/packages/app/src/Pages/ProfilePage.css
index d72795be..a318607f 100644
--- a/packages/app/src/Pages/ProfilePage.css
+++ b/packages/app/src/Pages/ProfilePage.css
@@ -224,13 +224,21 @@
 }
 
 .qr-modal .pfp .username {
-  text-align: center;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
 }
 
 .qr-modal canvas {
   border-radius: 10px;
 }
 
+.qr-modal .pfp .display-name {
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
 .profile .zap-amount {
   font-weight: normal;
   margin-left: 4px;
diff --git a/packages/app/src/Pages/ProfilePage.tsx b/packages/app/src/Pages/ProfilePage.tsx
index 1099e076..580259d0 100644
--- a/packages/app/src/Pages/ProfilePage.tsx
+++ b/packages/app/src/Pages/ProfilePage.tsx
@@ -259,7 +259,11 @@ export default function ProfilePage() {
         {showProfileQr && (
           <Modal className="qr-modal" onClose={() => setShowProfileQr(false)}>
             <ProfileImage pubkey={id} />
-            <QrCode data={`nostr:${hexToBech32(NostrPrefix.PublicKey, id)}`} link={undefined} className="m10" />
+            <QrCode
+              data={`nostr:${hexToBech32(NostrPrefix.PublicKey, id)}`}
+              link={undefined}
+              className=" m10 align-center"
+            />
           </Modal>
         )}
         {isMe ? (