src/material/BottomSheet.css

@@ -50,8 +50,8 @@
       height: 100vh;
       height: 100dvh;
 
-      contain-intrinsic-size: auto 100vw 100vh;
+      contain-intrinsic-size: 100% 100vh;
-      contain-intrinsic-size: auto 100dvw 100dvh;
+      contain-intrinsic-size: 100% 100dvh;
     }
   }
 

src/platform/i18n.tsx

@@ -11,11 +11,7 @@ import { $settings } from "../settings/stores";
 import { enGB } from "date-fns/locale/en-GB";
 import { useStore } from "@nanostores/solid";
 import type { Locale } from "date-fns";
-import {
+import { resolveTemplate, translator, type Template } from "@solid-primitives/i18n";
-  resolveTemplate,
-  translator,
-  type Template,
-} from "@solid-primitives/i18n";
 
 async function synchronised(
   name: string,
@@ -38,35 +34,29 @@ export function autoMatchLangTag() {
   return match(Array.from(navigator.languages), SUPPORTED_LANGS, DEFAULT_LANG);
 }
 
-const DateFnLocaleCx = /* __@PURE__ */ createContext<Accessor<Locale>>(
+const DateFnLocaleCx = /* __@PURE__ */createContext<Accessor<Locale>>(() => enGB);
-  () => enGB,
-);
 
 const cachedDateFnLocale: Record<string, Locale> = {
   enGB,
 };
 
 export function autoMatchRegion() {
-  const specifiers = navigator.languages.map((x) => x.split("-"));
+  const regions = navigator.languages
-
+    .map((x) => {
-  for (const s of specifiers) {
+      const parts = x.split("_");
-    if (s.length === 1) {
+      if (parts.length > 1) {
-      const lang = s[0];
+        return parts[1];
-      for (const available of SUPPORTED_REGIONS) {
-        if (available.toLowerCase().startsWith(lang.toLowerCase())) {
-          return available;
-        }
       }
-    } else if (s.length === 2) {
+      return undefined;
-      const [lang, region] = s[1];
+    })
-      for (const available of SUPPORTED_REGIONS) {
+    .filter((x): x is string => !!x);
-        if (available.toLowerCase() === `${lang}_${region}`.toLowerCase()) {
+  for (const r of regions) {
-          return available;
+    for (const available of SUPPORTED_REGIONS) {
-        }
+      if (available.toLowerCase().endsWith(r.toLowerCase())) {
+        return available;
       }
     }
   }
-
   return "en_GB";
 }
 
@@ -158,17 +148,14 @@ export function useLanguage() {
   return () => settings().language || autoMatchLangTag();
 }
 
-type ImportFn<T> = (name: string) => Promise<{ default: T }>;
+type ImportFn<T> = (name: string) => Promise<{default: T}>
 
-type ImportedModule<F> = F extends ImportFn<infer T> ? T : never;
+type ImportedModule<F> = F extends ImportFn<infer T> ? T: never
 
-type MergedImportedModule<T> = T extends []
+type MergedImportedModule<T> =
-  ? {}
+  T extends [] ? {} :
-  : T extends [infer I]
+  T extends [infer I] ? ImportedModule<I> :
-    ? ImportedModule<I>
+  T extends [infer I, ...infer J] ? ImportedModule<I> & MergedImportedModule<J> : never
-    : T extends [infer I, ...infer J]
-      ? ImportedModule<I> & MergedImportedModule<J>
-      : never;
 
 export function createStringResource<
   T extends ImportFn<Record<string, string | Template<any> | undefined>>[],
@@ -183,11 +170,9 @@ export function createStringResource<
         return cache[nlang];
       }
 
-      const results = await Promise.all(
+      const results = await Promise.all(importFns.map(x => x(nlang).then(v => v.default)))
-        importFns.map((x) => x(nlang).then((v) => v.default)),
-      );
 
-      const merged: MergedImportedModule<T> = Object.assign({}, ...results);
+      const merged: MergedImportedModule<T> = Object.assign({}, ...results)
 
       cache[nlang] = merged;
 
@@ -196,10 +181,8 @@ export function createStringResource<
   );
 }
 
-export function createTranslator<
+export function createTranslator<T extends ImportFn<Record<string, string | Template<any> | undefined>>[],>(...importFns: T) {
-  T extends ImportFn<Record<string, string | Template<any> | undefined>>[],
+  const res = createStringResource(...importFns)
->(...importFns: T) {
-  const res = createStringResource(...importFns);
 
-  return [translator(res[0], resolveTemplate), res] as const;
+  return [translator(res[0], resolveTemplate), res] as const
 }

src/settings/Region.tsx

@@ -57,7 +57,7 @@ const ChooseRegion: Component = () => {
             <IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
               <ArrowBack />
             </IconButton>
-            <Title>{t("Choose Region")}</Title>
+            <Title>{t("Choose Language")}</Title>
           </Toolbar>
         </AppBar>
       }