Goutam/lynkeduppro-crm
2
1
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Show real flag image in registration phone field

Browse Source 
Flag emojis don't render on Windows, so derive an ISO code from the
emoji's regional indicators and load a flagcdn image in front of the
country-code selector (Account + Verify steps).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Goutam Patidar
2026-06-30 20:00:37 +05:30
parent 0b76c97445
commit b79d925552
3 changed files with 28 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/portal/portal.css
+5 -1
View File
@@ -508,8 +508,12 @@ select.input option { background: var(--ink); color: var(--text); }
/* ---- country code select ---- */
.phone-row { display: flex; gap: 8px; }
.cc-field { position: relative; flex: 0 0 118px; width: 118px; }
.cc-field .cc-select { width: 100%; flex: none; padding-left: 40px; }
.cc-flag-img { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 22px; height: 16px; border-radius: 3px; object-fit: cover; pointer-events: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); }
.cc-flag-img.static { position: static; transform: none; }
.cc-select { width: 110px; flex: 0 0 110px; }
@media (max-width: 420px) { .cc-select { width: 96px; flex-basis: 96px; } }
@media (max-width: 420px) { .cc-field { flex-basis: 104px; width: 104px; } .cc-select { width: 96px; flex-basis: 96px; } }
/* ---- misc login/register bits ---- */
.tips { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; }