marty/cbp-calculator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: checkbox text overflow + center share link section

Browse Source 
- 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
This commit is contained in:
Marty Bostick
2026-07-11 13:18:33 +00:00
parent ebc79fe999
commit f47bf1101d
1 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+12 -10
View File
@@ -147,7 +147,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding-top: 20px; padding: 0;
} }
.checkbox-group label { .checkbox-group label {
font-size: 0.82rem; font-size: 0.82rem;
@@ -155,7 +155,7 @@
text-transform: none; text-transform: none;
letter-spacing: 0; letter-spacing: 0;
color: var(--text); color: var(--text);
white-space: nowrap; white-space: normal;
} }
.checkbox-group input[type="checkbox"] { .checkbox-group input[type="checkbox"] {
width: 16px; width: 16px;
@@ -523,14 +523,16 @@
<div class="control-group" style="grid-column: 1 / -1;"> <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> <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"> <div style="max-width:520px;width:100%;margin:0 auto;">
<input type="text" id="sharedLink" readonly> <div class="shared-link-row">
<button class="copy-sm-btn" id="copyLinkBtn" onclick="copySharedLink()">📄 Copy</button> <input type="text" id="sharedLink" readonly>
</div> <button class="copy-sm-btn" id="copyLinkBtn" onclick="copySharedLink()">📄 Copy</button>
<div class="sub-hint">The referral opens the calculator with your username pre-loaded</div> </div>
<div class="qr-row" style="margin-top: 12px; text-align: center;"> <div class="sub-hint">The referral opens the calculator with your username pre-loaded</div>
<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 class="qr-row" style="margin-top: 12px; text-align: center;">
<div style="font-size:12px;color:var(--text-secondary);margin-top:6px;">📱 Scan to open calculator</div> <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> </div>
</div> </div>