AI: address review on PR #475

frontend/src/components/users/InheritDialogue.tsx

@@ -60,12 +60,14 @@ const InheritDialogue: FC<Props> = ({ visible, onVisibleChange, setUser }) => {
 
   return (
       <Dialog open={visible} onOpenChange={onVisibleChange}>
-	<DialogContent className="px-6 pp-6 pt-7" closeLabel={label ('actions.close')}>
+	<DialogContent className="inheritance-dialogue px-6 pb-6 pt-7"
+	    closeLabel={label ('actions.close')}>
 	  <DialogHeader className="pl-8">
 	    <DialogTitle>{label ('account.inherit')}</DialogTitle>
 	    <DialogDescription asChild>
-	      <div className="flex gap-2">
-		<Input placeholder={message ('transfer.placeholder').text}
+	      <div className="inheritance-dialogue-fields flex gap-2">
+		<Input className="inheritance-code"
+		       placeholder={message ('transfer.placeholder').text}
 		       aria-label={message ('transfer.placeholder').text}
 		       lang={message ('transfer.placeholder').language}
 		       value={inputCode}

frontend/src/components/users/UserCodeDialogue.tsx

@@ -60,7 +60,7 @@ const UserCodeDialogue: FC<Props> = ({ visible, onVisibleChange, user, setUser }
 	    <DialogDescription asChild>
 	      <div>
 		<p>{label ('userCode.description')}</p>
-		<div className="m-2">{user?.inheritanceCode}</div>
+		<div className="inheritance-code m-2">{user?.inheritanceCode}</div>
 		<p className="mt-1 text-sm text-destructive">
 		  {label ('userCode.secretWarning')}
 		</p>

frontend/src/index.css

@@ -751,6 +751,40 @@ html:lang(mn-Mong) .text-right
   inline-size: min(36rem, 100%);
 }
 
+[data-vertical-preview] .main-area[data-vertical-content] form.space-y-2
+{
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: .75rem;
+}
+
+[data-vertical-preview] .main-area[data-vertical-content] form.space-y-2 > *
+{
+  flex: none;
+  margin: 0;
+}
+
+[data-vertical-preview] .main-area[data-vertical-content] form label.block
+{
+  margin: 0;
+  margin-block-end: .25rem;
+}
+
+[data-vertical-preview] .main-area[data-vertical-content] form.space-y-2
+    > :has(> input[type='checkbox'])
+{
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+}
+
+[data-vertical-preview] .main-area[data-vertical-content] form.space-y-2
+    > :has(> input[type='checkbox']) > label
+{
+  margin: 0;
+}
+
 [data-vertical-preview] :where(.main-area[data-vertical-content]) :is(
     button, input, select, textarea, code, time, table)
 {
@@ -1039,9 +1073,65 @@ html:lang(mn-Mong) .text-right
 {
   flex: none;
   width: auto;
-  inline-size: min(24rem, 100%);
+  inline-size: 100%;
   max-inline-size: none;
-  overflow: auto;
+  overflow: visible;
+}
+
+[data-vertical-preview] .tag-list-filter > div
+{
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-wrap: nowrap;
+  gap: 1rem;
+}
+
+[data-vertical-preview] .main-area .tag-list-filter form.space-y-2
+{
+  inline-size: auto;
+  max-height: none;
+  overflow: visible;
+}
+
+[data-vertical-preview] .tag-list-filter input[type='datetime-local']
+{
+  inline-size: 13rem;
+}
+
+@media (min-width: 768px)
+{
+  [data-vertical-preview] .tag-list-filter form > div
+  {
+    white-space: nowrap;
+  }
+}
+
+html:lang(mn-Mong) .inheritance-code
+{
+  writing-mode: horizontal-tb;
+}
+
+html:lang(mn-Mong) .inheritance-dialogue
+{
+  width: auto;
+  max-width: calc(100vw - 2rem);
+  inline-size: min(32rem, calc(100dvh - 2rem));
+  block-size: fit-content;
+}
+
+html:lang(mn-Mong) .inheritance-dialogue-fields
+{
+  writing-mode: horizontal-tb;
+  flex-direction: column;
+  justify-content: space-between;
+  width: min(16rem, calc(100vw - 8rem));
+  height: 100%;
+  min-height: 0;
+}
+
+html:lang(mn-Mong) .inheritance-dialogue-fields > button
+{
+  align-self: flex-end;
 }
 
 [data-vertical-preview] .tag-list-filter h1

frontend/src/test/compileMdx.ts

@@ -10,7 +10,8 @@ type Transform = (source: string, id: string) => Promise<{ code: string } | null
 
 
 export const transformMdx = async (source: string, suffix = '.mdx') => {
-  const plugins = viteConfig.plugins?.flat () as { name: string; transform: Transform }[]
+  const config = viteConfig ({ command: 'serve', mode: 'test' })
+  const plugins = config.plugins?.flat () as { name: string; transform: Transform }[]
   const plugin = plugins.find (entry => entry.name === '@mdx-js/rollup')
   if (plugin == null)
     throw new Error ('The application MDX compiler is not registered')

frontend/vite.config.test.ts

@@ -0,0 +1,41 @@
+import { execFileSync } from 'node:child_process'
+import { resolveConfig, transformWithEsbuild } from 'vite'
+import { afterAll, afterEach, describe, expect, it, vi } from 'vitest'
+
+import viteConfig from './vite.config'
+
+vi.hoisted (() => {
+  vi.stubGlobal ('Uint8Array', Object.getPrototypeOf (new TextEncoder ().encode ('')).constructor)
+})
+afterAll (() => vi.unstubAllGlobals ())
+afterEach (() => vi.unstubAllEnvs ())
+
+describe ('JSX runtime configuration', () => {
+  it.each (['development', 'test', 'production']) (
+      'builds JSX compatible with production React under NODE_ENV=%s',
+      async environment => {
+	vi.stubEnv ('NODE_ENV', environment)
+	const config = await resolveConfig ({
+	    ...viteConfig ({ command: 'build', mode: 'production' }),
+	    configFile: false, build: { ssr: true } }, 'build')
+	if (config.esbuild === false) throw new Error ('JSX transformation disabled')
+	const { code } = await transformWithEsbuild (
+	    'export default <div>SSR</div>', 'runtime.tsx', {
+		jsx: config.esbuild.jsx,
+		jsxDev: config.esbuild.jsxDev,
+		jsxImportSource: config.esbuild.jsxImportSource })
+	expect (code).toContain ('react/jsx-runtime')
+	expect (code).not.toContain ('jsxDEV')
+	execFileSync (process.execPath, ['--input-type=module', '-e', code], {
+	    cwd: import.meta.dirname,
+	    env: { ...process.env, NODE_ENV: 'production' } })
+      })
+
+  it ('preserves development JSX for the development server', async () => {
+    vi.stubEnv ('NODE_ENV', 'development')
+    const config = await resolveConfig ({
+	...viteConfig ({ command: 'serve', mode: 'development' }),
+	configFile: false }, 'serve')
+    expect (config.esbuild && config.esbuild.jsxDev).toBe (true)
+  })
+})

frontend/vite.config.ts

@@ -21,7 +21,8 @@ if (typeof originalTransform === 'function')
 	}
   }
 
-export default defineConfig ({
+export default defineConfig (({ command }) => ({
+    esbuild:  command === 'build' ? { jsxDev: false } : undefined,
     plugins:  [{ name: 'request-render-context', enforce: 'pre',
 	resolveId (id, _importer, options) {
 	  const contextPath = path.resolve (__dirname, './src/lib/renderContext')
@@ -40,4 +41,4 @@ export default defineConfig ({
 					  rewrite: requestPath => requestPath.replace (/^\/api/, ''),
 					  secure:       false } },
 		watch:        { usePolling: true,
-				interval: 100 } } })
+				interval: 100 } } }))

frontend/vitest.config.ts

@@ -4,9 +4,9 @@ import { defineConfig, mergeConfig } from 'vitest/config'
 import viteConfig from './vite.config'
 
 
-export default mergeConfig (
-    viteConfig,
-    defineConfig ({
+export default defineConfig (configEnv => mergeConfig (
+    viteConfig (configEnv),
+    {
 	test: { alias: {
 		    '@/config': path.resolve (__dirname, './src/config.sample.ts') },
 		environment:  'jsdom',