Font Awesome to Unicode icons. Part 4.

Thanks to xet7 !

client/components/main/popup.css

@@ -73,7 +73,7 @@
 }
 .pop-over .content-wrapper {
   width: 100%;
-  max-height: 70vh;
+  max-height: calc(70vh + 20px);
   overflow-y: auto;
   overflow-x: hidden;
 }
@@ -84,7 +84,7 @@
 }
 .pop-over .content-container {
   width: 100%;
-  max-height: 70vh;
+  max-height: calc(70vh + 20px);
   transition: transform 0.2s;
 }
 
@@ -99,6 +99,22 @@
   overflow: visible;
 }
 
+/* Specific styling for language popup list */
+.pop-over[data-popup="changeLanguage"] .pop-over-list {
+  max-height: none;
+  overflow: visible;
+  height: auto;
+  flex: 1;
+}
+
+/* Ensure content div in language popup contains all items */
+.pop-over[data-popup="changeLanguage"] .content {
+  height: auto;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
 /* Allow dynamic height for Change Language popup */
 .pop-over[data-popup="changeLanguage"] .content-wrapper {
   max-height: inherit; /* Use dynamic height from JavaScript */
@@ -108,6 +124,32 @@
   max-height: inherit; /* Use dynamic height from JavaScript */
 }
 
+/* Make language popup extend to bottom of browser window */
+.pop-over[data-popup="changeLanguage"] {
+  height: calc(100vh - 30px);
+  min-height: 300px;
+  /* Adjust positioning to move popup 30px higher */
+  transform: translateY(-30px);
+}
+
+.pop-over[data-popup="changeLanguage"] .content-wrapper {
+  height: calc(100% - 50px); /* Subtract header height more precisely */
+  min-height: 250px;
+  overflow-y: auto;
+  max-height: none; /* Remove any max-height constraints */
+  display: flex;
+  flex-direction: column;
+}
+
+.pop-over[data-popup="changeLanguage"] .content-container {
+  height: auto; /* Let content determine height */
+  min-height: 250px;
+  max-height: none; /* Remove any max-height constraints */
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
 /* Date popup sizing for native HTML inputs */
 .pop-over[data-popup="editCardReceivedDatePopup"],
 .pop-over[data-popup="editCardStartDatePopup"],

client/components/users/userHeader.jade

@@ -171,7 +171,8 @@ template(name="changeLanguagePopup")
     each languages
       li(class="{{# if isCurrentLanguage}}active{{/if}}")
         a.js-set-language
-          = name
+          | {{languageFlag}}
+          | {{name}}
           if isCurrentLanguage
             | ✅
 

client/components/users/userHeader.js

@@ -294,6 +294,30 @@ Template.changeLanguagePopup.helpers({
   isCurrentLanguage() {
     return this.tag === TAPi18n.getLanguage();
   },
+
+  languageFlag() {
+    const flagMap = {
+      'en': '🇺🇸', 'es': '🇪🇸', 'fr': '🇫🇷', 'de': '🇩🇪', 'it': '🇮🇹', 'pt': '🇵🇹', 'ru': '🇷🇺',
+      'ja': '🇯🇵', 'ko': '🇰🇷', 'zh': '🇨🇳', 'ar': '🇸🇦', 'hi': '🇮🇳', 'th': '🇹🇭', 'vi': '🇻🇳',
+      'tr': '🇹🇷', 'pl': '🇵🇱', 'nl': '🇳🇱', 'sv': '🇸🇪', 'da': '🇩🇰', 'no': '🇳🇴', 'fi': '🇫🇮',
+      'cs': '🇨🇿', 'hu': '🇭🇺', 'ro': '🇷🇴', 'bg': '🇧🇬', 'hr': '🇭🇷', 'sk': '🇸🇰', 'sl': '🇸🇮',
+      'et': '🇪🇪', 'lv': '🇱🇻', 'lt': '🇱🇹', 'el': '🇬🇷', 'he': '🇮🇱', 'uk': '🇺🇦', 'be': '🇧🇾',
+      'ca': '🇪🇸', 'eu': '🇪🇸', 'gl': '🇪🇸', 'cy': '🇬🇧', 'ga': '🇮🇪', 'mt': '🇲🇹', 'is': '🇮🇸',
+      'mk': '🇲🇰', 'sq': '🇦🇱', 'sr': '🇷🇸', 'bs': '🇧🇦', 'me': '🇲🇪', 'fa': '🇮🇷', 'ur': '🇵🇰',
+      'bn': '🇧🇩', 'ta': '🇮🇳', 'te': '🇮🇳', 'ml': '🇮🇳', 'kn': '🇮🇳', 'gu': '🇮🇳', 'pa': '🇮🇳',
+      'or': '🇮🇳', 'as': '🇮🇳', 'ne': '🇳🇵', 'si': '🇱🇰', 'my': '🇲🇲', 'km': '🇰🇭', 'lo': '🇱🇦',
+      'ka': '🇬🇪', 'hy': '🇦🇲', 'az': '🇦🇿', 'kk': '🇰🇿', 'ky': '🇰🇬', 'uz': '🇺🇿', 'mn': '🇲🇳',
+      'bo': '🇨🇳', 'dz': '🇧🇹', 'ug': '🇨🇳', 'ii': '🇨🇳', 'za': '🇨🇳', 'yue': '🇭🇰', 'zh-HK': '🇭🇰',
+      'zh-TW': '🇹🇼', 'zh-CN': '🇨🇳', 'id': '🇮🇩', 'ms': '🇲🇾', 'tl': '🇵🇭', 'ceb': '🇵🇭',
+      'haw': '🇺🇸', 'mi': '🇳🇿', 'sm': '🇼🇸', 'to': '🇹🇴', 'fj': '🇫🇯', 'ty': '🇵🇫', 'mg': '🇲🇬',
+      'sw': '🇹🇿', 'am': '🇪🇹', 'om': '🇪🇹', 'so': '🇸🇴', 'ti': '🇪🇷', 'ha': '🇳🇬', 'yo': '🇳🇬',
+      'ig': '🇳🇬', 'zu': '🇿🇦', 'xh': '🇿🇦', 'af': '🇿🇦', 'st': '🇿🇦', 'tn': '🇿🇦', 'ss': '🇿🇦',
+      've': '🇿🇦', 'ts': '🇿🇦', 'nr': '🇿🇦', 'nso': '🇿🇦', 'wo': '🇸🇳', 'ff': '🇸🇳', 'dy': '🇲🇱',
+      'bm': '🇲🇱', 'tw': '🇬🇭', 'ak': '🇬🇭', 'lg': '🇺🇬', 'rw': '🇷🇼', 'rn': '🇧🇮', 'ny': '🇲🇼',
+      'sn': '🇿🇼', 'nd': '🇿🇼'
+    };
+    return flagMap[this.tag] || '🌐';
+  },
 });
 
 Template.changeLanguagePopup.events({