AI: address issue #455

#455
2026-11-14 00:32:39 +09:00 · 2026-11-08 15:31:02 +09:00
@@ -0,0 +1,94 @@
+Copyright 2018 The Noto Project Authors (github.com/googlei18n/noto-fonts)
+
+This Font Software is licensed under the SIL Open Font License,
+Version 1.1.
+
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font
+creation efforts of academic and linguistic communities, and to
+provide a free and open framework in which fonts may be shared and
+improved in partnership with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply to
+any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software
+components as distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to,
+deleting, or substituting -- in part or in whole -- any of the
+components of the Original Version, by changing formats or by porting
+the Font Software to a new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed,
+modify, redistribute, and sell modified and unmodified copies of the
+Font Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components, in
+Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the
+corresponding Copyright Holder. This restriction only applies to the
+primary font name as presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created using
+the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
@@ -0,0 +1,11 @@
+Noto Sans Mongolian Regular, unmodified TrueType font.
+
+Font copyright: Copyright 2018 Google Inc. All Rights Reserved.
+
+- Source: https://github.com/notofonts/noto-fonts/tree/main/hinted/ttf/NotoSansMongolian
+- Font: https://raw.githubusercontent.com/notofonts/noto-fonts/main/hinted/ttf/NotoSansMongolian/NotoSansMongolian-Regular.ttf
+- License: SIL Open Font License 1.1; see the accompanying LICENSE.
+- Retrieved: 2026-11-08.
+
+Used by the Mongolian UI at `/mn-Mong`.
+The font and license are served together from this directory.
@@ -20,13 +20,13 @@ import { Toaster } from '@/components/ui/toaster'
 import { isApiError } from '@/lib/api'
 import { initialiseUserSession } from '@/lib/users'
 import { prepareHelpPage } from '@/lib/help'
-import { fetchLocales, isLocaleCode, legacyLocalePath,
-	 switchLocalePath, unlocalisedPath } from '@/lib/locales'
+import { fetchLocales, isLocaleCode, isVerticalPreviewPath, legacyLocalePath,
+	 localiseTo, switchLocalePath, unlocalisedPath } from '@/lib/locales'
 import { isAuthorityDependentQuery, localesKeys, sessionKeys } from '@/lib/queryKeys'
 import { isCountsPath } from '@/lib/routeLocales'
 import { switchPostFilterLocale } from '@/lib/posts'
 import { switchWikiLocale } from '@/lib/wiki'
-import { useLocale } from '@/lib/useLocale'
+import { useLocale, useUILocale, useVerticalPreview } from '@/lib/useLocale'
 import { applyClientAnimationMode,
 	 applyClientAppearance,
 	 fetchUserThemeSlots,
@@ -46,7 +46,7 @@ import ServiceUnavailable from '@/pages/ServiceUnavailable'
 import type { ComponentType, Dispatch, FC, ReactNode, SetStateAction } from 'react'
 import type { RouteMatch } from 'react-router-dom'

-import type { AvailableLocale, LocaleCode } from '@/lib/locales'
+import type { AvailableLocale, LocaleCode, UILocaleCode } from '@/lib/locales'
 import type { PageRoute } from '@/lib/routeLocales'
 import type { User } from '@/types'

@@ -267,15 +267,21 @@ const RoutedApp = ({ locales }: { locales: AvailableLocale[] }) => {
  const client = useQueryClient ()
  const location = useLocation ()
  const locale = useLocale ()
+  const verticalPreview = useVerticalPreview ()
  const route = resolvePageRoute (location.pathname)
  const robots = isCountsPath (location.pathname) ? 'noindex' : route?.route.handle?.robots
  const pagePath = unlocalisedPath (location.pathname)
  const countsPage = pagePath === '/counts' || pagePath.startsWith ('/counts/')
-  const switchLocale = async (targetLocale: LocaleCode): Promise<string> => {
+  const switchLocale = async (target: UILocaleCode): Promise<string> => {
+    const targetLocale = target === 'mn-Mong' ? 'ja' : target
+    if (targetLocale === locale)
+      return switchLocalePath (location, target)
    const resolve = route?.route.handle?.switchLocale
-    return (resolve != null && route != null)
-	? resolve ({ location, params: route.params, locale, targetLocale })
+    const destination =
+	(resolve != null && route != null)
+	? await resolve ({ location, params: route.params, locale, targetLocale })
 	: switchLocalePath (location, targetLocale)
+    return target === 'mn-Mong' ? `/mn-Mong${unlocalisedPath (destination)}` : destination
  }
  const [user, setUserState] = useState<User | null> (
      () => client.getQueryData<User> (sessionKeys.current) ?? null)
@@ -393,7 +399,8 @@ const RoutedApp = ({ locales }: { locales: AvailableLocale[] }) => {
 	      <motion.div
 		  layout={(animationMode === 'off' || countsPage) ? false : 'position'}
 		  transition={{ layout: appLayoutTransition }}
-		  className="relative flex h-dvh w-full flex-col overflow-y-hidden">
+		  data-vertical-preview={verticalPreview || undefined}
+		  className="app-layout relative flex h-dvh w-full flex-col overflow-y-hidden">
 		<TopNav user={user} locales={locales} resolveLocaleSwitch={switchLocale}/>
 		<RouteTransitionWrapper
 		    user={user}
@@ -411,7 +418,9 @@ const RoutedApp = ({ locales }: { locales: AvailableLocale[] }) => {

 const LocaleRoute: FC = () => {
  const { locale } = useParams ()
+  const uiLocale = useUILocale ()
  const location = useLocation ()
+  const verticalPreview = isVerticalPreviewPath (location.pathname)
  const { i18n } = useTranslation ()
  const { data, isError } = useQuery ({
      queryKey: localesKeys.index,
@@ -421,29 +430,30 @@ const LocaleRoute: FC = () => {
      refetchOnMount: true,
      refetchOnWindowFocus: true,
      refetchOnReconnect: true })
+  const contentLocale = verticalPreview ? 'ja' : locale
  const activeLocale =
-      (isLocaleCode (locale)
-       && data?.locales.some (entry => entry.code === locale))
-      ? locale
+      (isLocaleCode (contentLocale)
+       && data?.locales.some (entry => entry.code === contentLocale))
+      ? contentLocale
      : null

  useLayoutEffect (() => {
    if (activeLocale != null)
-      document.documentElement.lang = activeLocale
-    if (activeLocale != null && i18n.language !== activeLocale)
-      void i18n.changeLanguage (activeLocale)
-  }, [activeLocale, i18n])
+      document.documentElement.lang = uiLocale
+    if (activeLocale != null && i18n.language !== uiLocale)
+      void i18n.changeLanguage (uiLocale)
+  }, [activeLocale, uiLocale, i18n])

  const redirect = legacyLocalePath (location, pathname => resolvePageRoute (pathname) != null)
-  if (!(isLocaleCode (locale)) && redirect == null)
+  if (!(isLocaleCode (locale)) && !verticalPreview && redirect == null)
    return <NotFound/>
  if (isError && data == null)
    return <ServiceUnavailable/>
  if (data == null)
    return null
-  if (isLocaleCode (locale))
+  if (isLocaleCode (locale) || verticalPreview)
  {
-    return data.locales.some (entry => entry.code === locale)
+    return data.locales.some (entry => entry.code === contentLocale)
        ? <RoutedApp locales={data.locales}/>
        : <NotFound/>
  }
@@ -455,7 +465,8 @@ const LocaleRoute: FC = () => {
 const LocaleRedirect = ({ to }: { to: string }) => {
  const locale = useLocale ()
  const location = useLocation ()
-  return <Navigate to={switchLocalePath ({ ...location, pathname: to }, locale)} replace/>
+  return <Navigate to={localiseTo (
+      { ...location, pathname: to }, locale, location.pathname)} replace/>
 }


@@ -34,7 +34,7 @@ const PostList: FC<Props> = ({ posts, onClick }) => {
  const cardRef = useRef<HTMLDivElement> (null)

  return (
-      <div className="flex flex-wrap gap-6 p-4">
+      <div className="post-list flex flex-wrap gap-6 p-4">
 	{posts.map ((post, i) => {
 	  const sharedId = `page-${ post.id }`
 	  const layoutId = sharedId
@@ -1,9 +1,10 @@
 import { useQueryClient } from '@tanstack/react-query'
 import { forwardRef, useMemo } from 'react'
 import { flushSync } from 'react-dom'
-import { createPath } from 'react-router-dom'
+import { createPath, useLocation } from 'react-router-dom'

-import { localiseTo } from '@/lib/locales'
+import { isVerticalPreviewPath, localeFromPath,
+	 localiseTo, unlocalisedPath } from '@/lib/locales'
 import { useLocale, useLocaleNavigate } from '@/lib/useLocale'
 import { useOverlayStore } from '@/components/RouteBlockerOverlay'
 import { prefetchForURL } from '@/lib/prefetchers'
@@ -38,15 +39,18 @@ export default forwardRef<HTMLAnchorElement, Props> (({

  const navigate = useLocaleNavigate ()
  const locale = useLocale ()
+  const { pathname } = useLocation ()
  const qc = useQueryClient ()
  const behaviourSettings = useClientBehaviourSettings ()
  const linkPreloadMode = behaviourSettings.linkPreload ?? 'intent'
  const path = useMemo (
      () => {
-	const localised = localiseTo (to, locale)
-	return typeof localised === 'string' ? localised : createPath (localised)
+	const localised = localiseTo (to, locale, pathname)
+	const destination = typeof localised === 'string' ? localised : createPath (localised)
+	return (isVerticalPreviewPath (pathname) && localeFromPath (destination) === locale)
+	    ? `/mn-Mong${ unlocalisedPath (destination) }` : destination
      },
-      [to, locale],
+      [to, locale, pathname],
  )
  const url = useMemo (() => {
    return (new URL (path, currentRenderContext ()?.origin ?? 'http://localhost')).toString ()
@@ -4,7 +4,7 @@ import { Globe } from 'lucide-react'
 import { Fragment, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { useLocation } from 'react-router-dom'

-import { useLocale, useLocaleNavigate } from '@/lib/useLocale'
+import { useLocale, useLocaleNavigate, useUILocale, useVerticalPreview } from '@/lib/useLocale'
 import LocalisedText, { formatUIString } from '@/components/LocalisedText'
 import Separator from '@/components/MenuSeparator'
 import PrefetchLink from '@/components/PrefetchLink'
@@ -13,8 +13,10 @@ import TranslatedText from '@/components/TranslatedText'
 import { toast } from '@/components/ui/use-toast'
 import { WikiIdBus } from '@/lib/eventBus/WikiIdBus'
 import { isLocaleCode,
-	 localeFromPath,
+	 isUILocaleCode,
+	 MONGOLIAN_LOCALE,
 	 switchLocalePath,
+	 uiLocaleFromPath,
 	 unlocalisedPath } from '@/lib/locales'
 import { uiMessage, uiMessageLanguage } from '@/lib/messages'
 import { useUITranslation } from '@/lib/useUITranslation'
@@ -28,13 +30,13 @@ import { fetchWikiPage } from '@/lib/wiki'

 import type { FC, MouseEvent } from 'react'

-import type { AvailableLocale, LocaleCode } from '@/lib/locales'
+import type { AvailableLocale, UILocaleCode } from '@/lib/locales'
 import type { Material, Menu, MenuVisibleItem, Tag, User } from '@/types'

 type Props = {
    user: User | null
    locales: AvailableLocale[]
-    resolveLocaleSwitch?: (locale: LocaleCode) => Promise<string> }
+    resolveLocaleSwitch?: (locale: UILocaleCode) => Promise<string> }
 type NavDensity = 'auto' | 'comfortable' | 'compact'


@@ -47,7 +49,7 @@ export const menuOutline = (
 	pathName: string },
 ): Menu => {
  const pathName = unlocalisedPath (fullPathname)
-  const locale = localeFromPath (fullPathname) ?? 'ja'
+  const locale = uiLocaleFromPath (fullPathname)

  const message = (
      key: Parameters<typeof uiMessage>[1],
@@ -137,7 +139,11 @@ export const menuOutline = (
 const TopNav: FC<Props> = ({ user, locales, resolveLocaleSwitch }) => {
  const { message, label } = useUITranslation ('shared')
  const locale = useLocale ()
-  const localeName = locales.find (entry => entry.code === locale)?.name
+  const uiLocale = useUILocale ()
+  const verticalPreview = useVerticalPreview ()
+  const uiLocales = [...locales.filter (entry => isLocaleCode (entry.code)),
+      ...(locales.some (entry => entry.code === 'ja') ? [MONGOLIAN_LOCALE] : [])]
+  const localeName = uiLocales.find (entry => entry.code === uiLocale)?.name
  const navigate = useLocaleNavigate ()
  const location = useLocation ()
  const currentLocation = useRef (location)
@@ -180,11 +186,12 @@ const TopNav: FC<Props> = ({ user, locales, resolveLocaleSwitch }) => {
    let node: HTMLElement | null = el
    while (node != null && node !== nav)
    {
-      left += node.offsetLeft
+      left += verticalPreview ? node.offsetTop : node.offsetLeft
      const parent: Element | null = node.offsetParent
      node = parent instanceof HTMLElement ? parent : null
    }
-    const width = node === nav ? el.offsetWidth : 0
+    const width = node === nav
+	? (verticalPreview ? el.offsetHeight : el.offsetWidth) : 0
    const visible = width > 0
    setHL (current =>
 	(current.left === left && current.width === width && current.visible === visible)
@@ -202,6 +209,7 @@ const TopNav: FC<Props> = ({ user, locales, resolveLocaleSwitch }) => {
  const [moreVsbl, setMoreVsbl] = useState (false)
  const [openItemIdx, setOpenItemIdx] = useState (-1)
  const [submenuHeight, setSubmenuHeight] = useState (0)
+  const [submenuWidth, setSubmenuWidth] = useState (0)
  const [wikiId, setWikiId] = useState<number | null> (WikiIdBus.get ())

  const wikiIdStr = String (wikiId ?? '')
@@ -255,8 +263,22 @@ const TopNav: FC<Props> = ({ user, locales, resolveLocaleSwitch }) => {
      animationsOff
      ? undefined
      : (reducedAnimations
-	 ? 'transition-[transform,width] duration-75 ease-linear'
-	 : 'transition-[transform,width] duration-200 ease-out')
+	 ? 'transition-[transform,width,height] duration-75 ease-linear'
+	 : 'transition-[transform,width,height] duration-200 ease-out')
+  const submenuItemMotion = animationsOff ? { } : {
+      initial: { x: verticalPreview ? -40 : 0,
+	  y: verticalPreview ? 0 : -40, opacity: 0 },
+      animate: { x: 0, y: 0, opacity: 1 },
+      exit: { x: verticalPreview ? -40 : 0,
+	  y: verticalPreview ? 0 : -40, opacity: 0 } }
+  const submenuVariants = {
+      enter: (direction: -1 | 1) => ({
+	  x: verticalPreview ? direction * 24 : 0,
+	  y: verticalPreview ? 0 : direction * 24, opacity: 0 }),
+      centre: { x: 0, y: 0, opacity: 1 },
+      exit: (direction: -1 | 1) => ({
+	  x: verticalPreview ? (-direction) * 24 : 0,
+	  y: verticalPreview ? 0 : (-direction) * 24, opacity: 0 }) }

  const prevActiveIdxRef = useRef<number> (activeIdx)

@@ -287,6 +309,14 @@ const TopNav: FC<Props> = ({ user, locales, resolveLocaleSwitch }) => {
 	return
      }

+      if (verticalPreview)
+      {
+	setDesktop (true)
+	setDensity ('auto')
+	measure (moreVsbl ? -1 : activeIdx)
+	return
+      }
+
      // Measure the same desktop elements while the mobile layout is active.
      layout.setAttribute ('data-measuring', '')
      const previousDensity = layout.getAttribute ('data-density') ?? 'auto'
@@ -351,7 +381,8 @@ const TopNav: FC<Props> = ({ user, locales, resolveLocaleSwitch }) => {
      removeEventListener ('resize', schedule)
      document.fonts?.removeEventListener ('loadingdone', schedule)
    }
-  }, [activeIdx, moreVsbl, desktop, density, user?.name, locale, locales, menuLabels])
+  }, [activeIdx, moreVsbl, desktop, density, user?.name, locale, locales,
+      menuLabels, verticalPreview])

  useEffect (() => {
    if (desktop == null || layoutReady)
@@ -378,7 +409,8 @@ const TopNav: FC<Props> = ({ user, locales, resolveLocaleSwitch }) => {
    measure (moreVsbl ? -1 : activeIdx)
    if (!(desktop))
      setMoreVsbl (false)
-  }, [activeIdx, moreVsbl, desktop, density, locale, animationMode, menuLabels])
+  }, [activeIdx, moreVsbl, desktop, density, locale, animationMode,
+      menuLabels, verticalPreview])

  useEffect (() => {
    const unsubscribe = WikiIdBus.subscribe (setWikiId)
@@ -392,6 +424,7 @@ const TopNav: FC<Props> = ({ user, locales, resolveLocaleSwitch }) => {

    const update = () => {
      setSubmenuHeight (Math.ceil (content.getBoundingClientRect ().height))
+      setSubmenuWidth (Math.ceil (content.getBoundingClientRect ().width))
    }
    const observer =
 	typeof ResizeObserver === 'undefined' ? null : new ResizeObserver (update)
@@ -403,7 +436,7 @@ const TopNav: FC<Props> = ({ user, locales, resolveLocaleSwitch }) => {
      observer?.disconnect ()
      removeEventListener ('resize', update)
    }
-  }, [activeIdx, moreVsbl, desktop, density, locale])
+  }, [activeIdx, moreVsbl, desktop, density, locale, verticalPreview])

  useEffect (() => {
    setMenuOpen (false)
@@ -415,17 +448,18 @@ const TopNav: FC<Props> = ({ user, locales, resolveLocaleSwitch }) => {
 			rounded px-1 focus-within:ring-2">
 	<Globe aria-hidden="true" size={16}/>
 	<span className="top-nav-locale-name whitespace-nowrap text-sm">
-	  <LocalisedText language={locale}>{localeName}</LocalisedText>
+	  <LocalisedText language={uiLocale}>{localeName}</LocalisedText>
 	</span>
 	<select
-	    aria-label={formatUIString (localeName ?? '', locale)}
-	    value={locale}
+	    aria-label={formatUIString (localeName ?? '', uiLocale)}
+	    lang={uiLocale}
+	    value={uiLocale}
 	    disabled={switchingLocale}
 	    className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
 	    onChange={async event => {
 	      const nextLocale = event.target.value
-	      if (isLocaleCode (nextLocale)
-		  && locales.some (entry => entry.code === nextLocale))
+	      if (isUILocaleCode (nextLocale)
+		  && uiLocales.some (entry => entry.code === nextLocale))
 	      {
 		const request = ++localeSwitchRequest.current
 		setSwitchingLocale (true)
@@ -450,8 +484,8 @@ const TopNav: FC<Props> = ({ user, locales, resolveLocaleSwitch }) => {
 		}
 	      }
 	    }}>
-	  {locales.map (entry => isLocaleCode (entry.code) && (
-	      <option key={entry.code} value={entry.code}>
+	  {uiLocales.map (entry => (
+	      <option key={entry.code} value={entry.code} lang={entry.code}>
 		{formatUIString (entry.name, entry.code)}
 	      </option>))}
 	</select>
@@ -461,7 +495,7 @@ const TopNav: FC<Props> = ({ user, locales, resolveLocaleSwitch }) => {
      <div ref={layoutRef} className="top-nav-layout w-full min-w-0 shrink-0"
 	  data-desktop={desktop ?? undefined} data-density={density}
 	  data-layout-ready={layoutReady}>
-	<nav ref={barRef} lang={uiMessageLanguage (locale, 'posts')}
+	<nav ref={barRef} lang={uiMessageLanguage (uiLocale, 'posts')}
 	    className="top-nav-root top-nav-bar flex justify-between items-center w-full">
 	  <div className="top-nav-primary flex shrink-0 items-center h-12">
 	    <PrefetchLink
@@ -479,8 +513,11 @@ const TopNav: FC<Props> = ({ user, locales, resolveLocaleSwitch }) => {
 		   className={cn ('absolute inset-y-0 h-12',
 				  'top-nav-highlight',
 				  highlightTransitionClass)}
-		   style={{ width:      hl.width,
-			    transform:  `translateX(${ hl.left }px)`,
+		   style={{ width:      verticalPreview ? '100%' : hl.width,
+			    height:     verticalPreview ? hl.width : undefined,
+			    transform:  verticalPreview
+				? `translateY(${ hl.left }px)`
+				: `translateX(${ hl.left }px)`,
 			    opacity:    hl.visible ? 1 : 0 }}/>

 	      {visibleMenu.map ((item, i) => (
@@ -554,7 +591,9 @@ const TopNav: FC<Props> = ({ user, locales, resolveLocaleSwitch }) => {
 	      layout
 	      className="top-nav-desktop-submenu relative z-20 shrink-0
 			 overflow-hidden top-nav-submenu"
-	      animate={{ height: desktop == null ? 'auto' : submenuHeight }}
+	      animate={verticalPreview && desktop
+		  ? { width: submenuWidth, height: '100%' }
+		  : { width: 'auto', height: desktop == null ? 'auto' : submenuHeight }}
 	      onMouseLeave={() => {
 		if (moreVsbl)
 		  setMoreVsbl (false)
@@ -566,7 +605,8 @@ const TopNav: FC<Props> = ({ user, locales, resolveLocaleSwitch }) => {
 	      onLayoutAnimationComplete={() => {
 		measure (highlightTargetRef.current)
 	      }}>
-	  <div ref={submenuContentRef} className={cn (moreVsbl && 'top-nav-more-menu')}>
+	  <div ref={submenuContentRef}
+	      className={cn ('top-nav-submenu-content', moreVsbl && 'top-nav-more-menu')}>
 	  {moreVsbl
 	   ? (
 	      moreMenu.map ((item, i) => (
@@ -576,9 +616,11 @@ const TopNav: FC<Props> = ({ user, locales, resolveLocaleSwitch }) => {
 			  {...((item.visible ?? true)
 			       ? { layoutId: `menu-${ menu.indexOf (item) }` }
 			       : (animationsOff ? { }
-				  : { initial: { x: 40, y: -40, opacity: 0 },
+				  : { initial: {
+					  x: 40, y: verticalPreview ? 0 : -40, opacity: 0 },
 				      animate: { x: 0, y: 0, opacity: 1 },
-				      exit: { x: 40, y: -40, opacity: 0 } }))}
+				      exit: {
+					  x: 40, y: verticalPreview ? 0 : -40, opacity: 0 } }))}
 			  onLayoutAnimationComplete={() => measure (highlightTargetRef.current)}
 			  className="z-10 min-w-0 px-3 py-2 font-bold">
 			<h2>
@@ -599,10 +641,7 @@ const TopNav: FC<Props> = ({ user, locales, resolveLocaleSwitch }) => {
 				  transition={topNavTransition}
 				  {...(visibleMenu[activeIdx] === item
 				       ? { layoutId: `submenu-${ menu.indexOf (item) }-${ j }` }
-				       : (animationsOff ? { }
-					  : { initial: { y: -40, opacity: 0 },
-					      animate: { y: 0, opacity: 1 },
-					      exit: { y: -40, opacity: 0 } }))}>
+				       : submenuItemMotion)}>
 				{subItem.component}
 			      </motion.div>)
 			  : (
@@ -612,10 +651,7 @@ const TopNav: FC<Props> = ({ user, locales, resolveLocaleSwitch }) => {
 				  transition={topNavTransition}
 				  {...(visibleMenu[activeIdx] === item
 				       ? { layoutId: `submenu-${ menu.indexOf (item) }-${ j }` }
-				       : (animationsOff ? { }
-					  : { initial: { y: -40, opacity: 0 },
-					      animate: { y: 0, opacity: 1 },
-					      exit: { y: -40, opacity: 0 } }))}>
+				       : submenuItemMotion)}>
 				<PrefetchLink
 				    to={subItem.to}
 				    target={subItem.to.slice (0, 2) === '//' ? '_blank' : undefined}
@@ -633,7 +669,8 @@ const TopNav: FC<Props> = ({ user, locales, resolveLocaleSwitch }) => {
 		  <div className="relative min-h-[40px]">
 		    {animationsOff
 		     ? (
-			 <div className="flex min-h-[40px] flex-wrap items-center px-3">
+			 <div className="top-nav-submenu-items flex min-h-[40px]
+					 flex-wrap items-center px-3">
 			   {(visibleMenu[activeIdx]?.subMenu ?? [])
 			    .filter (item => item.visible ?? true)
 			    .map ((item, i) => (
@@ -662,10 +699,9 @@ const TopNav: FC<Props> = ({ user, locales, resolveLocaleSwitch }) => {
 			   <motion.div
 			       key={activeIdx}
 			       custom={dir}
-			       variants={{ enter: (d: -1 | 1) => ({ y: d * 24, opacity: 0 }),
-					   centre: { y: 0, opacity: 1 },
-					   exit: (d: -1 | 1) => ({ y: (-d) * 24, opacity: 0 }) }}
-			       className="relative flex min-h-[40px] flex-wrap items-center px-3"
+			       variants={submenuVariants}
+			       className="top-nav-submenu-items relative flex min-h-[40px]
+					  flex-wrap items-center px-3"
 			       initial="enter"
 			       animate="centre"
 			       exit="exit"
@@ -8,7 +8,7 @@ type Props = {


 const Form: FC<Props> = ({ children, className }) => (
-    <div className={cn ('mx-auto max-w-xl space-y-4 p-4', className)}>
+    <div className={cn ('form-layout mx-auto max-w-xl space-y-4 p-4', className)}>
      {children}
    </div>)

@@ -1,7 +1,10 @@
 import { motion } from 'framer-motion'
+import { useEffect, useRef } from 'react'
+import { useLocation } from 'react-router-dom'

 import { clientAnimationTransition } from '@/lib/clientAnimation'
 import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
+import { useVerticalPreview } from '@/lib/useLocale'
 import { cn } from '@/lib/utils'

 import type { FC, ReactNode } from 'react'
@@ -9,21 +12,71 @@ import type { FC, ReactNode } from 'react'
 type Props = {
    children:   ReactNode
    className?: string
-    animateLayout?: boolean }
+    animateLayout?: boolean
+    verticalContent?: boolean }


-const MainArea: FC<Props> = ({ children, className, animateLayout = true }) => {
+const MainArea: FC<Props> = (
+    { children, className, animateLayout = true, verticalContent = true },
+) => {
  const behaviourSettings = useClientBehaviourSettings ()
+  const verticalPreview = useVerticalPreview ()
+  const horizontal = verticalPreview && verticalContent
+  const { pathname, search } = useLocation ()
+  const rootRef = useRef<HTMLElement | null> (null)
  const animationMode = behaviourSettings.animation ?? 'normal'
  const layoutTransition = clientAnimationTransition (
      animationMode,
-      { normal: { duration: .2, ease: 'easeOut' as const } },
-  )
+      { normal: { duration: .2, ease: 'easeOut' as const } })
+
+  useEffect (() => {
+    if (horizontal && rootRef.current != null)
+      rootRef.current.scrollLeft = 0
+  }, [horizontal, pathname, search])
+
+  useEffect (() => {
+    const root = rootRef.current
+    if (!horizontal || root == null)
+      return
+
+    const handleWheel = (event: WheelEvent) => {
+      if (event.ctrlKey || event.metaKey || event.shiftKey
+	  || event.deltaX !== 0 || event.deltaY === 0 || event.defaultPrevented)
+	return
+
+      // Nested tables, forms and code blocks retain their own scrolling.
+      let node = event.target instanceof HTMLElement ? event.target : null
+      while (node != null && node !== root)
+      {
+	if (node.matches ('input, select, textarea, [contenteditable="true"]'))
+	  return
+	const style = getComputedStyle (node)
+	if ((/auto|scroll/.test (style.overflowY) && node.scrollHeight > node.clientHeight)
+	    || (/auto|scroll/.test (style.overflowX) && node.scrollWidth > node.clientWidth))
+	  return
+	node = node.parentElement
+      }
+
+      const unit = event.deltaMode === 1 ? 16 : (event.deltaMode === 2 ? root.clientWidth : 1)
+      const delta = event.deltaY * unit
+      if ((delta < 0 && root.scrollLeft <= 0)
+	  || (delta > 0 && root.scrollLeft + root.clientWidth >= root.scrollWidth))
+	return
+      event.preventDefault ()
+      root.scrollLeft += delta
+    }
+
+    root.addEventListener ('wheel', handleWheel, { passive: false })
+    return () => root.removeEventListener ('wheel', handleWheel)
+  }, [horizontal])

  return (
      <motion.main
+	  ref={rootRef}
+	  data-vertical-content={horizontal || undefined}
+	  tabIndex={horizontal ? 0 : undefined}
 	  transition={{ layout: layoutTransition }}
-	  className={cn ('flex-1 overflow-y-auto p-4', className)}
+	  className={cn ('main-area flex-1 overflow-y-auto p-4', className)}
 	  layout={(animationMode === 'off' || !animateLayout) ? false : 'position'}>
 	{children}
      </motion.main>)
@@ -1,13 +1,14 @@
 import { motion } from 'framer-motion'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { Helmet } from 'react-helmet-async'

 import { clientAnimationTransition } from '@/lib/clientAnimation'
 import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 import { cn } from '@/lib/utils'
 import { useUITranslation } from '@/lib/useUITranslation'
+import { useVerticalPreview } from '@/lib/useLocale'

 import type { CSSProperties, FC, MouseEvent, PointerEvent, ReactNode } from 'react'
-import { useCallback, useEffect, useRef, useState } from 'react'

 type SidebarSide = 'left' | 'right'

@@ -23,12 +24,12 @@ type Props = {

 type ResizeState = {
    pointerId:  number
-    startWidth: number
+    startSize: number
    startX:     number
+    startY:     number
+    verticalPreview: boolean
    side:       SidebarSide }

-type PendingPressState = ResizeState & { startY: number }
-
 const DEFAULT_SIDEBAR_WIDTH = 256
 const MIN_SIDEBAR_WIDTH = 192
 const MIN_MAIN_WIDTH = 360
@@ -37,84 +38,97 @@ const LONG_PRESS_DELAY_MS = 350
 const TOUCH_MOVE_THRESHOLD_PX = 8


-const storageKeyForSidebar = (sidebarKey: string, side: SidebarSide): string =>
-    `sidebar:${ sidebarKey }:${ side }:width`
+const storageKeyForSidebar = (
+    sidebarKey: string,
+    side: SidebarSide,
+    verticalPreview = false,
+): string =>
+    `sidebar:${ sidebarKey }:${ side }:${ verticalPreview ? 'height' : 'width' }`


-const getSidebarMaxWidth = (containerWidth: number): number => {
+const getSidebarMaxWidth = (containerSize: number): number => {
  const viewportWidth =
-      typeof window === 'undefined' ? containerWidth : window.innerWidth
+      typeof window === 'undefined' ? containerSize : window.innerWidth
  const viewportMaxWidth = Math.floor (viewportWidth * MAX_VIEWPORT_WIDTH_RATIO)
-  const containerMaxWidth = Math.floor (containerWidth - MIN_MAIN_WIDTH)
+  const containerMaxWidth = Math.floor (containerSize - MIN_MAIN_WIDTH)
  const dynamicMaxWidth = Math.min (viewportMaxWidth, containerMaxWidth)

  return Math.max (MIN_SIDEBAR_WIDTH, dynamicMaxWidth)
 }


-const readStoredSidebarWidth = (
+const readStoredSidebarSize = (
    sidebarKey: string,
-    side: SidebarSide): number => {
+    side: SidebarSide,
+    verticalPreview: boolean,
+): number => {
  if (typeof window === 'undefined')
    return DEFAULT_SIDEBAR_WIDTH

-  const value = window.localStorage.getItem (storageKeyForSidebar (sidebarKey, side))
-  const width = value == null ? Number.NaN : Number (value)
-
-  return Number.isFinite (width) ? width : DEFAULT_SIDEBAR_WIDTH
+  try
+  {
+    const value = window.localStorage.getItem (
+	storageKeyForSidebar (sidebarKey, side, verticalPreview))
+    const size = value == null ? Number.NaN : Number (value)
+    return Number.isFinite (size) ? size : DEFAULT_SIDEBAR_WIDTH
+  }
+  catch
+  {
+    return DEFAULT_SIDEBAR_WIDTH
+  }
 }


-const SidebarComponent: FC<Props> = ({
-    children,
-    className,
-    maxWidth,
-    maxWidthRatio,
-    animateLayout = true,
-    onWidthChange,
-    sidebarKey,
-    side = 'left',
-}) => {
+const SidebarComponent: FC<Props> = (
+    { children, className, maxWidth, maxWidthRatio, animateLayout = true,
+      onWidthChange, sidebarKey, side = 'left' },
+) => {
  const { message } = useUITranslation ('shared')
  const behaviourSettings = useClientBehaviourSettings ()
+  const verticalPreview = useVerticalPreview ()
  const animationMode = behaviourSettings.animation ?? 'normal'
  const layoutTransition = clientAnimationTransition (
      animationMode,
-      { normal: { duration: .2, ease: 'easeOut' as const } },
-  )
+      { normal: { duration: .2, ease: 'easeOut' as const } })
  const rootRef = useRef<HTMLDivElement | null> (null)
  const maxWidthRef = useRef (maxWidth)
  const maxWidthRatioRef = useRef (maxWidthRatio)
-  const getContainerWidth = useCallback (() => {
-    const containerWidth = rootRef.current
-	?.closest ('[data-sidebar-container]')
-	?.clientWidth
-    ?? window.innerWidth
-    return containerWidth
-  }, [])
-  const getClampedWidth = useCallback ((
-      nextWidth: number,
-      containerWidth: number): number => {
+  const getContainerSize = useCallback (() => {
+    const container = rootRef.current?.closest ('[data-sidebar-container]')
+    return verticalPreview
+	? container?.clientHeight ?? window.innerHeight
+	: container?.clientWidth ?? window.innerWidth
+  }, [verticalPreview])
+  const getClampedSize = useCallback ((
+      nextSize: number,
+      containerSize: number,
+  ): number => {
+    if (verticalPreview)
+    {
+      const maximum = Math.max (64, Math.min (
+	  window.innerHeight * .6, containerSize - 160))
+      return Math.min (maximum, Math.max (64, nextSize))
+    }
    const viewportWidth =
-	typeof window === 'undefined' ? containerWidth : window.innerWidth
+	typeof window === 'undefined' ? containerSize : window.innerWidth
    const viewportMaxWidth = Math.floor (viewportWidth * MAX_VIEWPORT_WIDTH_RATIO)
    const ratioMaxWidth = maxWidthRatioRef.current == null
-	? Infinity : Math.floor (containerWidth * maxWidthRatioRef.current)
+	? Infinity : Math.floor (containerSize * maxWidthRatioRef.current)
    const configuredMaxWidth = maxWidthRef.current == null
-	? getSidebarMaxWidth (containerWidth)
+	? getSidebarMaxWidth (containerSize)
 	: Math.max (MIN_SIDEBAR_WIDTH,
 	    Math.min (viewportMaxWidth, maxWidthRef.current))
    const maxAllowedWidth = Math.max (MIN_SIDEBAR_WIDTH,
 	Math.min (ratioMaxWidth, configuredMaxWidth))

-    return Math.min (maxAllowedWidth, Math.max (MIN_SIDEBAR_WIDTH, nextWidth))
-  }, [])
+    return Math.min (maxAllowedWidth, Math.max (MIN_SIDEBAR_WIDTH, nextSize))
+  }, [verticalPreview])

-  const [width, setWidth] = useState (DEFAULT_SIDEBAR_WIDTH)
+  const [size, setSize] = useState (DEFAULT_SIDEBAR_WIDTH)
  const [resizing, setResizing] = useState (false)
-  const widthRef = useRef (width)
+  const sizeRef = useRef (size)
  const longPressTimerRef = useRef<ReturnType<typeof setTimeout> | null> (null)
-  const pendingPressRef = useRef<PendingPressState | null> (null)
+  const pendingPressRef = useRef<ResizeState | null> (null)
  const resizeRef = useRef<ResizeState | null> (null)
  const bodyStyleRef = useRef<{ cursor: string, userSelect: string } | null> (null)

@@ -148,7 +162,7 @@ const SidebarComponent: FC<Props> = ({
 	  userSelect: document.body.style.userSelect }
    }

-    document.body.style.cursor = 'col-resize'
+    document.body.style.cursor = state.verticalPreview ? 'row-resize' : 'col-resize'
    document.body.style.userSelect = 'none'
  }, [clearLongPressTimer])

@@ -159,43 +173,50 @@ const SidebarComponent: FC<Props> = ({
    const state = resizeRef.current
    resizeRef.current = null

-    if (state != null)
-      window.localStorage.setItem (
-	  storageKeyForSidebar (sidebarKey, state.side),
-	  String (widthRef.current))
+    try
+    {
+      if (state != null)
+	window.localStorage.setItem (
+	    storageKeyForSidebar (sidebarKey, state.side, state.verticalPreview),
+	    String (sizeRef.current))
+    }
+    catch
+    {
+      // Resizing remains usable when browser storage is unavailable.
+    }

    setResizing (false)
    restoreBodyStyle ()
  }, [clearLongPressTimer, restoreBodyStyle, sidebarKey])

-  const applyWidth = useCallback ((nextWidth: number) => {
-    if (nextWidth === widthRef.current)
+  const applySize = useCallback ((nextSize: number) => {
+    if (nextSize === sizeRef.current)
      return

-    widthRef.current = nextWidth
-    setWidth (nextWidth)
+    sizeRef.current = nextSize
+    setSize (nextSize)
  }, [])

  useEffect (() => {
    maxWidthRef.current = maxWidth
    maxWidthRatioRef.current = maxWidthRatio
-    const containerWidth = getContainerWidth ()
-    const nextWidth = getClampedWidth (widthRef.current, containerWidth)
-    applyWidth (nextWidth)
-  }, [applyWidth, getClampedWidth, getContainerWidth, maxWidth, maxWidthRatio])
+    const containerSize = getContainerSize ()
+    const nextSize = getClampedSize (sizeRef.current, containerSize)
+    applySize (nextSize)
+  }, [applySize, getClampedSize, getContainerSize, maxWidth, maxWidthRatio])

-  const updateWidth = useCallback ((clientX: number) => {
+  const updateSize = useCallback ((clientX: number, clientY: number) => {
    const state = resizeRef.current
    if (state == null)
      return

-    const containerWidth = getContainerWidth ()
-    const delta = state.side === 'left'
-		  ? clientX - state.startX
-		  : state.startX - clientX
-    const nextWidth = getClampedWidth (state.startWidth + delta, containerWidth)
-    applyWidth (nextWidth)
-  }, [applyWidth, getClampedWidth, getContainerWidth])
+    const containerSize = getContainerSize ()
+    const delta = state.verticalPreview
+	? clientY - state.startY
+	: (state.side === 'left' ? clientX - state.startX : state.startX - clientX)
+    const nextSize = getClampedSize (state.startSize + delta, containerSize)
+    applySize (nextSize)
+  }, [applySize, getClampedSize, getContainerSize])

  const handlePointerDown = (ev: PointerEvent<HTMLDivElement>) => {
    if (ev.pointerType !== 'mouse' && ev.pointerType !== 'touch')
@@ -211,8 +232,10 @@ const SidebarComponent: FC<Props> = ({
    const state = {
 	pointerId: ev.pointerId,
 	side,
-	startWidth: widthRef.current,
-	startX: ev.clientX }
+	startSize: sizeRef.current,
+	startX: ev.clientX,
+	startY: ev.clientY,
+	verticalPreview }

    if (ev.pointerType === 'mouse')
    {
@@ -220,7 +243,7 @@ const SidebarComponent: FC<Props> = ({
      return
    }

-    pendingPressRef.current = { ...state, startY: ev.clientY }
+    pendingPressRef.current = state
    clearLongPressTimer ()
    longPressTimerRef.current = setTimeout (() => {
      if (pendingPressRef.current != null)
@@ -234,7 +257,7 @@ const SidebarComponent: FC<Props> = ({
    if (resizeRef.current != null)
    {
      ev.preventDefault ()
-      updateWidth (ev.clientX)
+      updateSize (ev.clientX, ev.clientY)
      return
    }

@@ -262,58 +285,58 @@ const SidebarComponent: FC<Props> = ({
    finishResize ()
  }

-  const resetWidth = useCallback (() => {
-    const containerWidth = getContainerWidth ()
-    const nextWidth = getClampedWidth (DEFAULT_SIDEBAR_WIDTH, containerWidth)
-    applyWidth (nextWidth)
-    window.localStorage.removeItem (storageKeyForSidebar (sidebarKey, side))
-  }, [applyWidth, getClampedWidth, getContainerWidth, sidebarKey, side])
+  const resetSize = useCallback (() => {
+    const containerSize = getContainerSize ()
+    const nextSize = getClampedSize (DEFAULT_SIDEBAR_WIDTH, containerSize)
+    applySize (nextSize)
+    window.localStorage.removeItem (
+	storageKeyForSidebar (sidebarKey, side, verticalPreview))
+  }, [applySize, getClampedSize, getContainerSize, sidebarKey, side, verticalPreview])

  const handleDoubleClick = (ev: MouseEvent<HTMLDivElement>) => {
    ev.preventDefault ()
    ev.stopPropagation ()
-    resetWidth ()
+    resetSize ()
  }

  useEffect (() => {
-    const containerWidth = getContainerWidth ()
-    const nextWidth = getClampedWidth (
-	readStoredSidebarWidth (sidebarKey, side),
-	containerWidth)
-    applyWidth (nextWidth)
-  }, [applyWidth, getClampedWidth, getContainerWidth, sidebarKey, side])
+    const containerSize = getContainerSize ()
+    const nextSize = getClampedSize (
+	readStoredSidebarSize (sidebarKey, side, verticalPreview),
+	containerSize)
+    applySize (nextSize)
+  }, [applySize, getClampedSize, getContainerSize, sidebarKey, side, verticalPreview])

  useEffect (() => {
-    const containerWidth = getContainerWidth ()
-    const nextWidth = getClampedWidth (widthRef.current, containerWidth)
-    applyWidth (nextWidth)
-  }, [applyWidth, getClampedWidth, getContainerWidth])
+    const containerSize = getContainerSize ()
+    const nextSize = getClampedSize (sizeRef.current, containerSize)
+    applySize (nextSize)
+  }, [applySize, getClampedSize, getContainerSize])

  useEffect (() => {
    if (typeof window === 'undefined')
      return

    const handleResize = () => {
-      const containerWidth = getContainerWidth ()
-      const nextWidth = getClampedWidth (widthRef.current, containerWidth)
-      applyWidth (nextWidth)
+      const containerSize = getContainerSize ()
+      const nextSize = getClampedSize (sizeRef.current, containerSize)
+      applySize (nextSize)
    }

    window.addEventListener ('resize', handleResize)
    return () => window.removeEventListener ('resize', handleResize)
-  }, [applyWidth, getClampedWidth, getContainerWidth])
+  }, [applySize, getClampedSize, getContainerSize])

  useEffect (() => {
-    onWidthChange?.(width)
-  }, [onWidthChange, width])
+    if (!verticalPreview)
+      onWidthChange?.(size)
+  }, [onWidthChange, size, verticalPreview])

-  useEffect (() => () => {
-    clearLongPressTimer ()
-    restoreBodyStyle ()
-  }, [clearLongPressTimer, restoreBodyStyle])
+  useEffect (() => () => finishResize (), [finishResize, verticalPreview])

  const style = {
-      '--sidebar-width': `${ width }px` } as CSSProperties
+      '--sidebar-width': `${ size }px`,
+      '--sidebar-height': `${ size }px` } as CSSProperties

  return (
      <motion.div
@@ -322,7 +345,7 @@ const SidebarComponent: FC<Props> = ({
 	  transition={{ layout: layoutTransition }}
 	  style={style}
 	  className={cn (
-	      'relative w-full md:w-[var(--sidebar-width)] md:shrink-0 md:h-full',
+	      'sidebar-panel relative w-full md:w-[var(--sidebar-width)] md:shrink-0 md:h-full',
 	      className)}>
 	<Helmet>
 	  <style>
@@ -345,16 +368,16 @@ const SidebarComponent: FC<Props> = ({

 	<div
 	    role="separator"
-	    aria-orientation="vertical"
-	    aria-label={message ('sidebarWidth').text}
-	    lang={message ('sidebarWidth').language}
+	    aria-orientation={verticalPreview ? 'horizontal' : 'vertical'}
+	    aria-label={message (verticalPreview ? 'labels.menu' : 'sidebarWidth').text}
+	    lang={message (verticalPreview ? 'labels.menu' : 'sidebarWidth').language}
 	    onPointerDown={handlePointerDown}
 	    onPointerMove={handlePointerMove}
 	    onPointerUp={handlePointerEnd}
 	    onPointerCancel={handlePointerEnd}
 	    onDoubleClick={handleDoubleClick}
 	    className={cn (
-		'hidden md:block absolute top-0 bottom-0 z-20 w-4 cursor-col-resize',
+		'sidebar-resize hidden md:block absolute top-0 bottom-0 z-20 w-4 cursor-col-resize',
 		'touch-none select-none',
 		side === 'left' ? '-right-2' : '-left-2',
 		'before:absolute before:top-0 before:bottom-0 before:w-px',
@@ -9,7 +9,8 @@ import { createStaticHandler, createStaticRouter,
 import { AppFrame, appRoutes, resolvePageRoute } from '@/App'
 import { apiGet, isApiError } from '@/lib/api'
 import { createUII18n } from '@/lib/i18n'
-import { fetchLocales, isLocaleCode, legacyLocalePath } from '@/lib/locales'
+import { fetchLocales, isLocaleCode, isVerticalPreviewPath,
+	 legacyLocalePath, uiLocaleFromPath } from '@/lib/locales'
 import { localesKeys, sessionKeys } from '@/lib/queryKeys'
 import { withRenderContext } from '@/lib/renderContext.server'

@@ -72,13 +73,16 @@ export const render = async (
      pathname => resolvePageRoute (pathname) != null)
  const pathname = legacy == null ? url.pathname : new URL (legacy, origin).pathname
  const segment = pathname.split ('/')[1]
+  const verticalPreview = isVerticalPreviewPath (pathname)
  const known = resolvePageRoute (pathname)
  if (legacy != null && known != null)
    return { status: 308, location: legacy }
  const locale = isLocaleCode (segment) ? segment : 'ja'
+  const uiLocale = uiLocaleFromPath (pathname)
+  const routePrefix = verticalPreview ? 'mn-Mong' : locale
  if (known?.route.handle?.redirectTo != null)
    return { status: 308,
-      location: `/${locale}${known.route.handle.redirectTo}${url.search}` }
+      location: `/${routePrefix}${known.route.handle.redirectTo}${url.search}` }
  const requestContext: RenderContext & { status: number } = {
      pathname: url.pathname, origin, apiBaseURL,
      ...authentication, status: 200 }
@@ -106,14 +110,15 @@ export const render = async (
 	}
      }
      const prepare = known?.route.handle?.prepare
-      let status = known == null || !active || !isLocaleCode (segment) ? 404 : 200
+      const routeLocaleValid = isLocaleCode (segment) || verticalPreview
+      let status = known == null || !active || !routeLocaleValid ? 404 : 200
      if (status === 200 && known?.route.handle?.authentication != null
 	  && client.getQueryData (sessionKeys.current) == null)
 	status = 401
      if (prepare != null && known != null && status === 200)
 	status = await prepare ({ client, params: known.params, locale,
 	    searchParams: url.searchParams })
-      const instance = createUII18n (locale)
+      const instance = createUII18n (uiLocale)
      const handler = createStaticHandler (appRoutes)
      const context = await handler.query (new Request (url))
      if (context instanceof Response)
@@ -183,11 +188,11 @@ export const render = async (
 	      isAxiosError: true, response: {
 		status: isApiError (query.state.error) ? query.state.error.response?.status : 500 } } }
      })) }
-      const bootstrap = JSON.stringify ({ state, status, locale,
+      const bootstrap = JSON.stringify ({ state, status, locale: uiLocale,
 	  url: url.pathname + url.search })
 	  .replace (/</g, '\\u003c').replace (/\u2028/g, '\\u2028')
 	  .replace (/\u2029/g, '\\u2029')
-      return { status, html, head, locale, bootstrap,
+      return { status, html, head, locale: uiLocale, bootstrap,
 	  setCookies: requestContext.setCookies }
    }
    finally
@@ -625,3 +625,564 @@ body
  white-space: nowrap;
  will-change: transform;
 }
+
+/* Locally hosted Mongolian font; the OFL accompanies the font file. */
+@font-face
+{
+  font-family: 'BTRC Mongolian';
+  src: url('/fonts/noto-sans-mongolian/NotoSansMongolian-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Mongolian flows down each line, then into the next column on the right. */
+:lang(mn-Mong)
+{
+  font-family: 'BTRC Mongolian', 'Mongolian Baiti', 'Noto Sans JP Variable', sans-serif;
+}
+
+[data-vertical-preview]
+{
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+[data-vertical-preview] > :not(.top-nav-layout)
+{
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+
+[data-vertical-preview] [data-sidebar-container]
+{
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+[data-vertical-preview] .main-area
+{
+  min-width: 0;
+  min-height: 0;
+  overscroll-behavior: contain;
+}
+
+[data-vertical-preview] .main-area[data-vertical-content]
+{
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-x: contain;
+}
+
+/* Specialised lists below retain their own grid and table layouts. */
+[data-vertical-preview] .main-area[data-vertical-content]:not(
+    .posts-main-area, .tags-main-area, .wiki-main-area)
+{
+  writing-mode: vertical-lr;
+  text-orientation: mixed;
+  text-align: start;
+  overflow-y: auto;
+}
+
+[data-vertical-preview] .main-area[data-vertical-content]:not(
+    .posts-main-area, .tags-main-area, .wiki-main-area) > :is(div, article, section)
+{
+  max-width: none;
+  max-inline-size: 100%;
+}
+
+[data-vertical-preview] .main-area[data-vertical-content] .prose
+{
+  max-width: none;
+  max-inline-size: 100%;
+}
+
+/* Input and data widgets keep their physical coordinates and nested scrolling. */
+[data-vertical-preview] .main-area[data-vertical-content] :is(
+    form, .form-layout, pre, .overflow-x-auto, .rc-md-editor, .not-prose)
+{
+  writing-mode: horizontal-tb;
+  text-orientation: mixed;
+  max-height: 100%;
+  overflow: auto;
+}
+
+[data-vertical-preview] .main-area[data-vertical-content] :is(form, .form-layout)
+{
+  width: min(36rem, calc(100vw - 2rem));
+}
+
+[data-vertical-preview] :where(.main-area[data-vertical-content]) :is(
+    button, input, select, textarea, code, time, table, img, video, iframe, canvas, svg)
+{
+  writing-mode: horizontal-tb;
+}
+
+[data-vertical-preview] .main-area[data-vertical-content] :is(img, video, iframe, canvas)
+{
+  max-height: 100%;
+  object-fit: contain;
+}
+
+[data-vertical-preview] .sidebar-panel
+{
+  width: 100%;
+  height: var(--sidebar-height);
+  min-height: 0;
+  flex: none;
+}
+
+[data-vertical-preview] .sidebar
+{
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  direction: ltr;
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior: contain;
+}
+
+[data-vertical-preview] .sidebar > *
+{
+  flex-shrink: 0;
+}
+
+[data-vertical-preview] .sidebar > form
+{
+  width: 16rem;
+  height: 100%;
+  overflow-y: auto;
+}
+
+[data-vertical-preview] .sidebar > form > ul
+{
+  position: relative;
+}
+
+[data-vertical-preview] .sidebar > div
+{
+  writing-mode: vertical-lr;
+  text-orientation: mixed;
+  height: 100%;
+  margin: 0;
+}
+
+[data-vertical-preview] .sidebar :is(h2, h3, ul)
+{
+  margin: 0;
+  margin-block-end: 1rem;
+}
+
+[data-vertical-preview] .sidebar-resize
+{
+  display: block;
+  inset: auto 0 -.5rem;
+  width: 100%;
+  height: 1rem;
+  cursor: row-resize;
+}
+
+[data-vertical-preview] .sidebar-resize::before
+{
+  inset: 50% 0 auto;
+  width: 100%;
+  height: 1px;
+}
+
+[data-vertical-preview] .top-nav-locale-name:has(:lang(mn-Mong))
+{
+  display: inline;
+  writing-mode: vertical-lr;
+  text-orientation: mixed;
+  font-size: 1.25rem;
+  line-height: 1.5;
+  flex-shrink: 0;
+}
+
+[data-vertical-preview] .top-nav-menu-link:has(.top-nav-locale-name)
+{
+  height: auto;
+  min-height: 2rem;
+}
+
+/* The post grid fills each column downwards before continuing to the right. */
+[data-vertical-preview] .posts-main-area > div
+{
+  display: flex;
+  height: 100%;
+  width: max-content;
+  margin: 0;
+  gap: 1rem;
+}
+
+[data-vertical-preview] .posts-main-area > div > div:first-child
+{
+  flex-direction: column;
+  justify-content: flex-start;
+  writing-mode: vertical-lr;
+  text-orientation: mixed;
+}
+
+[data-vertical-preview] .posts-main-area > div > div:last-child
+{
+  display: flex;
+  width: max-content;
+  height: 100%;
+  margin: 0;
+  gap: 1rem;
+}
+
+[data-vertical-preview] .main-area[data-vertical-content] .post-list
+{
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 10rem;
+  grid-template-rows: repeat(auto-fill, min(10rem, 100%));
+  flex: none;
+  width: max-content;
+  height: 100%;
+  writing-mode: horizontal-tb;
+}
+
+[data-vertical-preview] .main-area[data-vertical-content] .post-list > a
+{
+  height: 100%;
+}
+
+[data-vertical-preview] .main-area[data-vertical-content] nav
+{
+  flex: none;
+  align-self: flex-start;
+  margin: 0;
+  writing-mode: horizontal-tb;
+}
+
+[data-vertical-preview] .tags-main-area
+{
+  display: flex;
+  align-items: stretch;
+  gap: 1.5rem;
+}
+
+[data-vertical-preview] .tag-list-filter
+{
+  flex: none;
+  width: min(24rem, 75vw);
+  max-width: none;
+  overflow-y: auto;
+}
+
+[data-vertical-preview] .tag-list-filter h1
+{
+  writing-mode: vertical-lr;
+  text-orientation: mixed;
+  max-height: 8rem;
+  margin-block: 0;
+}
+
+[data-vertical-preview] .tag-list-filter input[type='number']
+{
+  max-width: 7rem;
+}
+
+[data-vertical-preview] .tag-list-results
+{
+  display: flex;
+  flex: none;
+  gap: 1rem;
+  max-width: none;
+  margin: 0;
+}
+
+[data-vertical-preview] .tag-list-table
+{
+  max-width: none;
+  overflow-x: visible;
+  overflow-y: auto;
+}
+
+[data-vertical-preview] .tag-list-table table
+{
+  writing-mode: vertical-lr;
+  text-orientation: mixed;
+  inline-size: max-content;
+  block-size: max-content;
+  min-width: 0;
+}
+
+[data-vertical-preview] .tag-list-table col
+{
+  width: auto;
+}
+
+[data-vertical-preview] .tag-list-table :is(th, td)
+{
+  min-inline-size: 2rem;
+  max-inline-size: 16rem;
+  text-align: start;
+}
+
+[data-vertical-preview] .tag-list-table thead
+{
+  border-bottom: 0;
+  border-block-end: 2px solid currentColor;
+}
+
+[data-vertical-preview] .tag-list-table td:nth-child(2),
+[data-vertical-preview] .tag-list-table time
+{
+  writing-mode: horizontal-tb;
+  white-space: nowrap;
+}
+
+[data-vertical-preview] :is(.sidebar, .tag-list-table, .wiki-main-area) .tag-marquee,
+[data-vertical-preview] :is(.sidebar, .tag-list-table, .wiki-main-area) .tag-marquee__static
+{
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+  max-inline-size: 16rem;
+  opacity: 1;
+}
+
+[data-vertical-preview] :is(.sidebar, .tag-list-table, .wiki-main-area) .tag-marquee__animated
+{
+  display: none;
+}
+
+/* Prose flows through the viewport height and grows into columns on the right. */
+[data-vertical-preview] .wiki-main-area
+{
+  display: flex;
+  gap: 1rem;
+}
+
+[data-vertical-preview] .wiki-main-area > div
+{
+  flex: none;
+  writing-mode: vertical-lr;
+  text-orientation: mixed;
+  margin: 0;
+}
+
+[data-vertical-preview] .wiki-main-area > div > span
+{
+  writing-mode: horizontal-tb;
+}
+
+[data-vertical-preview] .wiki-main-area article,
+[data-vertical-preview] .posts-main-area .localised-document
+{
+  writing-mode: vertical-lr;
+  text-orientation: mixed;
+  inline-size: 100%;
+  block-size: max-content;
+  max-width: none;
+  margin: 0;
+  flex: none;
+}
+
+[data-vertical-preview] .main-area[data-vertical-content] .localised-document
+{
+  max-width: none;
+  overflow: visible;
+}
+
+[data-vertical-preview] .wiki-main-area article :is(h1, h2, h3, h4, p, ul, ol, blockquote)
+{
+  margin: 0;
+  margin-block: 1em;
+}
+
+[data-vertical-preview] .wiki-main-area article :is(ul, ol)
+{
+  padding: 0;
+  padding-inline-start: 1.5em;
+}
+
+[data-vertical-preview] .wiki-main-area article :is(img, video, iframe, svg)
+{
+  writing-mode: horizontal-tb;
+  max-height: 100%;
+  max-width: none;
+  object-fit: contain;
+}
+
+[data-vertical-preview] .wiki-main-area article :is(pre, table, .not-prose),
+[data-vertical-preview] .main-area[data-vertical-content] :is(code, time, input, select, textarea)
+{
+  writing-mode: horizontal-tb;
+  text-orientation: mixed;
+}
+
+[data-vertical-preview] .wiki-main-area article :is(pre, table, .not-prose)
+{
+  display: inline-block;
+  max-height: 100%;
+  max-width: min(48rem, 80vw);
+  overflow: auto;
+  vertical-align: top;
+}
+
+[data-vertical-preview] .wiki-main-area article .not-prose
+{
+  width: max-content;
+  height: 100%;
+}
+
+[data-vertical-preview] .wiki-main-area .not-prose > div
+{
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  margin: 0;
+}
+
+[data-vertical-preview] .wiki-main-area .not-prose > div > div:last-child
+{
+  flex: 1;
+  min-height: 0;
+}
+
+@media (min-width: 768px)
+{
+  [data-vertical-preview].app-layout
+  {
+    flex-direction: row;
+  }
+
+  [data-vertical-preview] .top-nav-layout
+  {
+    display: flex;
+    width: max-content;
+    max-width: 50vw;
+    height: 100%;
+  }
+
+  [data-vertical-preview] .top-nav-bar
+  {
+    flex-direction: column;
+    flex: none;
+    width: 7rem;
+    height: 100%;
+    padding: .5rem;
+    gap: .5rem;
+  }
+
+  [data-vertical-preview] .top-nav-primary
+  {
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    width: 100%;
+    height: auto;
+    overflow-y: auto;
+  }
+
+  [data-vertical-preview] .top-nav-brand-link
+  {
+    writing-mode: vertical-lr;
+    text-orientation: mixed;
+    max-height: 9rem;
+    white-space: normal;
+    margin-block: .5rem;
+  }
+
+  [data-vertical-preview] .top-nav-desktop-menu
+  {
+    flex-direction: column;
+    width: 100%;
+    height: auto;
+  }
+
+  [data-vertical-preview] .top-nav-desktop-menu > div:not(.top-nav-highlight)
+  {
+    width: 100%;
+  }
+
+  [data-vertical-preview] .top-nav-desktop-menu .top-nav-menu-link
+  {
+    justify-content: center;
+    width: 100%;
+    min-height: 3rem;
+    height: auto;
+    padding: .5rem;
+  }
+
+  [data-vertical-preview] .top-nav-menu-link > :not(svg, select),
+  [data-vertical-preview] .top-nav-more-menu h2
+  {
+    writing-mode: vertical-lr;
+    text-orientation: mixed;
+    max-height: 9rem;
+    white-space: normal;
+  }
+
+  [data-vertical-preview] .top-nav-highlight
+  {
+    inset-inline-start: 0;
+  }
+
+  [data-vertical-preview] .top-nav-account
+  {
+    flex-direction: column;
+    width: 100%;
+    margin: 0;
+  }
+
+  [data-vertical-preview] .top-nav-account .top-nav-user-desktop
+  {
+    max-width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  [data-vertical-preview] .top-nav-locale-name
+  {
+    display: inline;
+    writing-mode: horizontal-tb;
+  }
+
+  [data-vertical-preview] .top-nav-desktop-submenu
+  {
+    min-width: 0;
+    height: 100%;
+  }
+
+  [data-vertical-preview] .top-nav-submenu-content
+  {
+    width: max-content;
+    max-width: 35vw;
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  [data-vertical-preview] :is(.top-nav-submenu-items, .top-nav-more-links)
+  {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-items: stretch;
+  }
+
+  [data-vertical-preview] .top-nav-submenu-items .top-nav-menu-link
+  {
+    justify-content: center;
+  }
+}
+
+@media (max-width: 767px)
+{
+  [data-vertical-preview] .top-nav-layout
+  {
+    max-height: 50dvh;
+    overflow-y: auto;
+  }
+}
@@ -1,9 +1,11 @@
 import { createInstance } from 'i18next'
 import { initReactI18next } from 'react-i18next'

+import { MONGOLIAN_LOCALE, SUPPORTED_LOCALES } from '@/lib/locales'
+
 import type { i18n as I18n, TOptions } from 'i18next'

-import type { LocaleCode } from '@/lib/locales'
+import type { UILocaleCode } from '@/lib/locales'

 // Keep Japanese placeholders editable without reporting them as completed translations.
 const translatedResource = (resource: Record<string, unknown>): Record<string, unknown> => {
@@ -34,9 +36,14 @@ for (const [path, dictionary] of Object.entries (dictionaries))
  const [, , locale, filename] = path.split ('/')
  resources[locale] ??= { }
  resources[locale][filename.slice (0, -5)] =
-      locale === 'ain-Kana' ? translatedResource (dictionary) : dictionary
+      locale === 'ja' ? dictionary : translatedResource (dictionary)
 }
 const namespaces = Object.keys (resources.ja ?? { })
+// No Mongolian translations yet; preserve the existing fallback language metadata.
+resources[MONGOLIAN_LOCALE.code] ??= { }
+for (const namespace of namespaces)
+  resources[MONGOLIAN_LOCALE.code][namespace] ??=
+      translatedResource ({ _untranslated: ['*'] })


 export const createUII18n = (locale: string): I18n => {
@@ -44,7 +51,7 @@ export const createUII18n = (locale: string): I18n => {
  void instance.init ({
      lng: locale,
      fallbackLng: 'ja',
-      supportedLngs: ['ja', 'ain-Kana'],
+      supportedLngs: [...SUPPORTED_LOCALES, MONGOLIAN_LOCALE.code],
      load: 'currentOnly',
      initAsync: false,
      defaultNS: 'navigation',
@@ -122,7 +129,7 @@ export const languageUIMessage = (


 export const untranslatedKeys = (
-    locale: LocaleCode,
+    locale: UILocaleCode,
    namespace = 'navigation',
 ): string[] => {
  const collect = (resource: Record<string, unknown>, prefix = ''): string[] =>
@@ -7,6 +7,10 @@ export const SUPPORTED_LOCALES = ['ja', 'ain-Kana'] as const

 export type LocaleCode = typeof SUPPORTED_LOCALES[number]

+// This UI locale uses Japanese content until the API supports Mongolian.
+export const MONGOLIAN_LOCALE = { code: 'mn-Mong', name: 'ᠮᠣᠩᠭᠣᠯ' } as const
+export type UILocaleCode = LocaleCode | typeof MONGOLIAN_LOCALE.code
+
 export type AvailableLocale = { code: string; name: string }


@@ -28,6 +32,19 @@ export const localeFromPath = (pathname: string): LocaleCode | null => {
 }


+// Frontend layout selection must not change the API's content locale.
+export const isVerticalPreviewPath = (pathname: string): boolean =>
+    /^\/mn-Mong(?:[/?#]|$)/.test (pathname)
+
+
+export const isUILocaleCode = (value: unknown): value is UILocaleCode =>
+    value === MONGOLIAN_LOCALE.code || isLocaleCode (value)
+
+
+export const uiLocaleFromPath = (pathname: string): UILocaleCode =>
+    isVerticalPreviewPath (pathname) ? MONGOLIAN_LOCALE.code : localeFromPath (pathname) ?? 'ja'
+
+
 export const resolveViewingLocale = (
    pathname: string,
    routeLocale?: unknown,
@@ -40,27 +57,29 @@ export const currentViewingLocale = (): LocaleCode =>


 export const unlocalisedPath = (pathname: string): string => {
-  const locale = localeFromPath (pathname)
+  const locale = isVerticalPreviewPath (pathname) ? 'mn-Mong' : localeFromPath (pathname)
  return locale == null ? pathname : pathname.slice (locale.length + 1) || '/'
 }


-export const localiseTo = (to: To, locale: LocaleCode): To => {
+export const localiseTo = (to: To, locale: LocaleCode, viewingPath = ''): To => {
  const pathname = typeof to === 'string' ? to : to.pathname
  if (pathname == null
      || !(pathname.startsWith ('/'))
      || pathname.startsWith ('//')
-      || localeFromPath (pathname) != null)
+      || localeFromPath (pathname) != null
+      || isVerticalPreviewPath (pathname))
    return to

-  const localised = `/${ locale }${ pathname }`
+  const prefix = isVerticalPreviewPath (viewingPath) ? 'mn-Mong' : locale
+  const localised = `/${ prefix }${ pathname }`
  return typeof to === 'string' ? localised : { ...to, pathname: localised }
 }


 export const switchLocalePath = (
    location: { pathname: string; search: string; hash: string },
-    locale: LocaleCode,
+    locale: UILocaleCode,
 ): string =>
    `/${ locale }${ unlocalisedPath (location.pathname) }${ location.search }${ location.hash }`

@@ -73,7 +92,8 @@ export const legacyLocalePath = (
    location: { pathname: string; search: string; hash: string },
    isPage: (pathname: string) => boolean = () => false,
 ): string | null => {
-  if (localeFromPath (location.pathname) != null || !isPage (location.pathname))
+  if (localeFromPath (location.pathname) != null
+      || isVerticalPreviewPath (location.pathname) || !isPage (location.pathname))
    return null
  return switchLocalePath (location, automaticallySelectedLocale ())
 }
@@ -1,19 +1,19 @@
 import { translateUIMessage } from '@/lib/i18n'

 import type navigation from '@/locales/ja/navigation.json'
-import type { LocaleCode } from '@/lib/locales'
+import type { UILocaleCode } from '@/lib/locales'

 export type UIMessageKey = keyof typeof navigation


 export const uiMessage = (
-    locale: LocaleCode,
+    locale: UILocaleCode,
    key: UIMessageKey,
    values: Record<string, string | number> = { },
 ): string => translateUIMessage (key, 'navigation', locale, values).text


-export const uiMessageLanguage = (locale: LocaleCode, key: UIMessageKey): 'ja' | 'ain' =>
+export const uiMessageLanguage = (locale: UILocaleCode, key: UIMessageKey): 'ja' | 'ain' =>
    translateUIMessage (key, 'navigation', locale).language === 'ain-Kana'
    ? 'ain'
    : 'ja'
@@ -1,11 +1,12 @@
 import { useCallback } from 'react'
 import { useLocation, useNavigate, useParams } from 'react-router-dom'

-import { localiseTo, resolveViewingLocale } from '@/lib/locales'
+import { isVerticalPreviewPath, localiseTo,
+	 resolveViewingLocale, uiLocaleFromPath } from '@/lib/locales'

 import type { NavigateFunction, NavigateOptions, To } from 'react-router-dom'

-import type { LocaleCode } from '@/lib/locales'
+import type { LocaleCode, UILocaleCode } from '@/lib/locales'


 export const useLocale = (): LocaleCode => {
@@ -15,13 +16,22 @@ export const useLocale = (): LocaleCode => {
 }


+export const useUILocale = (): UILocaleCode =>
+    uiLocaleFromPath (useLocation ().pathname)
+
+
 export const useLocaleNavigate = (): NavigateFunction => {
  const navigate = useNavigate ()
  const locale = useLocale ()
+  const { pathname } = useLocation ()
  return useCallback ((to: To | number, options?: NavigateOptions) => {
    if (typeof to === 'number')
      navigate (to)
    else
-      navigate (localiseTo (to, locale), options)
-  }, [locale, navigate])
+      navigate (localiseTo (to, locale, pathname), options)
+  }, [locale, navigate, pathname])
 }
+
+
+export const useVerticalPreview = (): boolean =>
+    isVerticalPreviewPath (useLocation ().pathname)
@@ -3,11 +3,11 @@ import { useTranslation } from 'react-i18next'

 import LocalisedText from '@/components/LocalisedText'
 import { translateUIMessage } from '@/lib/i18n'
-import { useLocale } from '@/lib/useLocale'
+import { useUILocale } from '@/lib/useLocale'


 export const useUITranslation = (namespace = 'common') => {
-  const locale = useLocale ()
+  const locale = useUILocale ()
  const { i18n } = useTranslation (namespace, { lng: locale })

  const message = useCallback ((key: string, values?: Record<string, string | number>) => {
@@ -6,7 +6,7 @@ import { I18nextProvider } from 'react-i18next'
 import '@/index.css'
 import App, { preloadPageRoute, resolvePageRoute } from '@/App'
 import { createUII18n } from '@/lib/i18n'
-import { currentViewingLocale } from '@/lib/locales'
+import { currentViewingLocale, uiLocaleFromPath } from '@/lib/locales'
 import { localesKeys } from '@/lib/queryKeys'
 import { applyClientAnimationMode, getClientAnimationMode } from '@/lib/settings'

@@ -22,7 +22,7 @@ const client = new QueryClient ({


 const mount = (serverRendered: boolean) => {
-  const instance = createUII18n (currentViewingLocale ())
+  const instance = createUII18n (uiLocaleFromPath (window.location.pathname))
  const app = (
      <HelmetProvider context={helmetContext}>
 	<QueryClientProvider client={client}>
@@ -359,7 +359,8 @@ const CountsResourceContent = (
 	      </ul>
 	    </nav>
 	  </SidebarComponent>
-	  <MainArea animateLayout={false} className="flex min-h-0 min-w-0 flex-col p-2">
+	  <MainArea animateLayout={false} verticalContent={false}
+	      className="flex min-h-0 min-w-0 flex-col p-2">
 	    <PageTitle className="mb-1 text-base" lang={title.language}>{title.text}</PageTitle>
 	    <div ref={controlsArea} className="shrink-0"
 		style={{ minHeight: definition == null ? controlsHeight : undefined }}>
@@ -107,7 +107,7 @@ const PostDetailPage: FC<Props> = ({ user }) => {

 	{post && <TagDetailSidebar post={post} className="hidden md:block"/>}

-	<MainArea className="relative">
+	<MainArea className="relative" verticalContent={false}>
 	  {post
 	   ? (
 	      <>
@@ -146,7 +146,7 @@ const PostListPage: FC = () => {
 				    JSON.stringify (statesToSave))
 	}}/>

-	<MainArea>
+	<MainArea className="posts-main-area" verticalContent>
 	  <TabGroup
 	      rightAddon={
 		  <label className="flex items-center gap-2 text-xs text-muted-foreground">
@@ -220,10 +220,10 @@ const TagListPage: FC = () => {
  }), [page, totalPages, location.search]))

  return (
-      <MainArea className="min-w-0">
+      <MainArea className="tags-main-area min-w-0" verticalContent>
 	<PageHead title={message ('title')}/>

-	<div className="max-w-xl">
+	<div className="tag-list-filter max-w-xl">
 	  <div className="flex flex-wrap items-center justify-between gap-3">
 	    <PageTitle>{label ('title')}</PageTitle>
 	    <label className="flex items-center gap-2 text-xs text-muted-foreground">
@@ -358,8 +358,8 @@ const TagListPage: FC = () => {

 	{isError && <p role="alert">{label ('common:fetchError')}</p>}
 	{loading ? label ('common:loading') : (results.length > 0 ? (
-	    <div className="mt-4 min-w-0 max-w-full">
-	      <div className="min-w-0 max-w-full overflow-x-auto">
+	    <div className="tag-list-results mt-4 min-w-0 max-w-full">
+	      <div className="tag-list-table min-w-0 max-w-full overflow-x-auto">
 		<table className="w-full min-w-[2000px] table-auto border-collapse">
 		  <colgroup>
 		    <col className="w-72"/>
@@ -114,7 +114,7 @@ const WikiDetailPage: FC = () => {
    return <NotFound/>

  return (
-      <MainArea>
+      <MainArea className="wiki-main-area" verticalContent>
 	<PageHead title={{
 	    text: `${displayTitle}${deprecated
 		? message ('labels.deprecatedSuffix').text : ''} Wiki`,
作成者	SHA1	メッセージ	日付
Codex Night Worker	0d369618f4	AI: address issue #455	2026-11-14 00:32:39 +09:00
みてるぞ	2b7f52978f	#455	2026-11-08 15:31:02 +09:00