Make the locale picker fit a bit better

Refs #2044
PREreview · Oct 25, 2024 · 59c1f77 · 59c1f77
1 parent 6b482d5
commit 59c1f77
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/assets/style.css b/assets/style.css
@@ -2734,3 +2734,27 @@ skip-link {
     float: inline-end;
   }
 }
+
+locale-picker {
+  div:has(&) {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: var(--space-2xs);
+  }
+
+  :--list {
+    display: inline-flex;
+    flex-wrap: wrap;
+    margin-block-start: 0;
+    padding-inline-start: var(--space-xs);
+    column-gap: var(--space-2xs);
+    list-style-type: none;
+    row-gap: var(--space-3xs-2xs);
+
+    & li {
+      &:not(:first-child) {
+        margin-block-start: 0;
+      }
+    }
+  }
+}
diff --git a/src/page.ts b/src/page.ts
@@ -315,7 +315,7 @@ export function page({
                   ${canChooseLocale === true
                     ? html`
                         <div>
-                          <p>Choose your language:</p>
+                          <span>Choose your language:</span>
 
                           <locale-picker>
                             <ul>