From f47bf1101deaa92a3efd3a1a6a9f2efb48cbf640 Mon Sep 17 00:00:00 2001
From: Marty Bostick <marty@bostick.com>
Date: Sat, 11 Jul 2026 13:18:33 +0000
Subject: [PATCH] Fix: checkbox text overflow + center share link section

- Removed padding-top:20px and white-space:nowrap from checkbox-group
  labels so long text wraps instead of overflowing
- Wrapped share link/QR section in centered 520px max-width container
  so it doesn't span the entire grid width
---
 index.html | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index b5cf39c..8123fe3 100644
--- a/index.html
+++ b/index.html
@@ -147,7 +147,7 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    padding-top: 20px;
+    padding: 0;
   }
   .checkbox-group label {
     font-size: 0.82rem;
@@ -155,7 +155,7 @@
     text-transform: none;
     letter-spacing: 0;
     color: var(--text);
-    white-space: nowrap;
+    white-space: normal;
   }
   .checkbox-group input[type="checkbox"] {
     width: 16px;
@@ -523,14 +523,16 @@
 
   <div class="control-group" style="grid-column: 1 / -1;">
     <label>Share this link <span style="font-weight:400;color:var(--text-muted);text-transform:none;letter-spacing:0;font-size:0.68rem;">(sends the plan as-is)</span></label>
-    <div class="shared-link-row">
-      <input type="text" id="sharedLink" readonly>
-      <button class="copy-sm-btn" id="copyLinkBtn" onclick="copySharedLink()">📄 Copy</button>
-    </div>
-    <div class="sub-hint">The referral opens the calculator with your username pre-loaded</div>
-    <div class="qr-row" style="margin-top: 12px; text-align: center;">
-      <img id="refQrCode" src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://cbp-calculator.saasy.top?ref=cryptoteambuild" alt="QR Code" style="width:160px;height:160px;border-radius:12px;border:2px solid var(--border);">
-      <div style="font-size:12px;color:var(--text-secondary);margin-top:6px;">📱 Scan to open calculator</div>
+    <div style="max-width:520px;width:100%;margin:0 auto;">
+      <div class="shared-link-row">
+        <input type="text" id="sharedLink" readonly>
+        <button class="copy-sm-btn" id="copyLinkBtn" onclick="copySharedLink()">📄 Copy</button>
+      </div>
+      <div class="sub-hint">The referral opens the calculator with your username pre-loaded</div>
+      <div class="qr-row" style="margin-top: 12px; text-align: center;">
+        <img id="refQrCode" src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://cbp-calculator.saasy.top?ref=cryptoteambuild" alt="QR Code" style="width:160px;height:160px;border-radius:12px;border:2px solid var(--border);">
+        <div style="font-size:12px;color:var(--text-secondary);margin-top:6px;">📱 Scan to open calculator</div>
+      </div>
     </div>
   </div>
 </div>