@deriv-web-design/ui 0.1.25 → 0.1.26

package/block-registry.json

@@ -4825,6 +4825,7 @@
       "ctaHref",
       "languageLabel",
       "languageItems",
+      "languageRows",
       "activeLanguageCode"
     ],
     "variants": [
@@ -4900,6 +4901,11 @@
         "maxLength": 10,
         "description": "Current language code shown in the switcher, e.g. \"EN\". No default — omit it and the language switcher is not rendered at all."
       },
+      "languageRows": {
+        "type": "number",
+        "required": false,
+        "description": "Max items per column in the language dropdown. When set, columns are derived (ceil(items / languageRows)); when omitted, the existing 3-column layout is unchanged."
+      },
       "loginHref": {
         "type": "url",
         "required": false,

package/components.manifest.json

@@ -2929,6 +2929,11 @@
           "required": false,
           "description": "Language label rendered next to the globe icon, e.g. \"EN\""
         },
+        "languageRows": {
+          "type": "number",
+          "required": false,
+          "description": "Max items per column in the language dropdown. When set (integer ≥ 1), the number of columns is derived (`ceil(items / languageRows)`); when omitted, the existing 3-column layout is unchanged."
+        },
         "loginHref": {
           "type": "string",
           "required": false,

package/dist/index.css

@@ -4739,8 +4739,12 @@
 .navbar__lang-dropdown {
   position: absolute;
   top: calc(100% + var(--spacing-8));
-  left: calc(50% - 352px);
-  width: 704px;
+  left: 0;
+  right: 0;
+  margin-inline: auto;
+  width: max-content;
+  min-width: 704px;
+  max-width: calc(100vw - 2 * var(--spacing-24));
   background-color: var(--color-slate-50);
   border: 1px solid var(--color-slate-100);
   border-radius: var(--navbar-dropdown-radius);
@@ -4752,7 +4756,7 @@
 }
 .navbar__lang-dropdown-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(var(--lang-cols, 3), 1fr);
   grid-auto-flow: column;
   grid-template-rows: repeat(var(--lang-rows, 7), auto);
   gap: 0;