fix: mobile friendly :|

packages/locales/lib/human/en.json

@@ -778,5 +778,6 @@
   "locale_instructions_5": "Create a new branch and name it the language you are translating",
   "locale_instructions_6": "Replace the contents of \"packages/locales/lib/human/{{lng}}.json\" with the file you downloaded",
   "locale_instructions_7": "Create a pull request",
-  "locale_instructions_8": "Wait for the pull request to be reviewed and merged"
+  "locale_instructions_8": "Wait for the pull request to be reviewed and merged",
+  "enter_translation": "Enter Translation"
 }

src/assets/css/main.css

@@ -558,5 +558,5 @@ input[type='time']::-webkit-calendar-picker-indicator {
 .locales-layout {
   display: grid;
   grid-template-rows: auto 1fr auto; /* Header, table, footer */
-  min-height: 100vh;
+  min-height: 100svh;
 }

src/components/virtual/Table.jsx

@@ -7,7 +7,7 @@ import TableRow from '@mui/material/TableRow'
 import Paper from '@mui/material/Paper'
 import { TableVirtuoso } from 'react-virtuoso'
 
-const VirtuosoTableComponents = {
+const COMPONENTS = {
   Scroller: React.forwardRef((props, ref) => (
     <TableContainer component={Paper} {...props} ref={ref} />
   )),
@@ -27,5 +27,5 @@ const VirtuosoTableComponents = {
 
 /** @param {import('react-virtuoso').TableVirtuosoProps} props */
 export function VirtualTable(props) {
-  return <TableVirtuoso components={VirtuosoTableComponents} {...props} />
+  return <TableVirtuoso components={COMPONENTS} {...props} />
 }

src/pages/locales/components/EditLocale.jsx

@@ -1,12 +1,14 @@
 // @ts-check
 import * as React from 'react'
 import TextField from '@mui/material/TextField'
+import { useTranslation } from 'react-i18next'
+
 import { useLocalesStore } from '../hooks/store'
 
 /** @param {{ name: string } & import('@mui/material').TextFieldProps} props */
 export function EditLocale({ name, type, ...props }) {
+  const { t } = useTranslation()
   const value = useLocalesStore((s) => s.custom[name] || '')
-  const isScrolling = useLocalesStore((s) => s.isScrolling)
   /** @type {import('@mui/material').TextFieldProps['onChange']} */
   const onChange = React.useCallback(
     (event) => {
@@ -26,8 +28,9 @@ export function EditLocale({ name, type, ...props }) {
       type={type}
       value={value}
       onChange={onChange}
-      multiline={type === 'text' && !isScrolling}
+      multiline={type === 'text'}
       size="small"
+      placeholder={t('enter_translation')}
       {...props}
     />
   )

src/pages/locales/components/LocalesHeader.jsx

@@ -18,10 +18,10 @@ export function LocalesHeader() {
   const instructions = useLocalesStore((s) => s.instructions)
   return (
     <Grid component="header" container className="flex-center" p={2}>
-      <Grid xs={6} sm={4}>
+      <Grid xs={4} sm={4}>
         <Typography variant="h4">{t('locales')}</Typography>
       </Grid>
-      <Grid xs={6} sm={4}>
+      <Grid xs={8} sm={4}>
         <LocaleSelection />
       </Grid>
       <Grid xs={12} sm={4} textAlign="right">

src/pages/locales/components/LocalesTable.jsx

@@ -6,19 +6,34 @@ import TableCell from '@mui/material/TableCell'
 import TableRow from '@mui/material/TableRow'
 import Box from '@mui/material/Box'
 import ClearIcon from '@mui/icons-material/Clear'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import Grid2 from '@mui/material/Unstable_Grid2'
+import Typography from '@mui/material/Typography'
+import Divider from '@mui/material/Divider'
 
 import { LOCALES_STATUS } from '@services/queries/config'
 import { VirtualTable } from '@components/virtual/Table'
 
-import { setScrolling, useLocalesStore } from '../hooks/store'
+import { useLocalesStore } from '../hooks/store'
 import { EditLocale } from './EditLocale'
 
+/**
+ * @typedef {{
+ *  name: string,
+ *  english?: string,
+ *  ai?: string,
+ *  missing: boolean,
+ *  type: string
+ * }} Row
+ */
 const clear = <ClearIcon color="error" fontSize="small" />
 
 /** @type {import('react-virtuoso').TableVirtuosoProps['fixedHeaderContent']} */
 function fixedHeaderContent() {
   const { t } = useTranslation()
-  return (
+  // @ts-ignore
+  const isMobile = useMediaQuery((theme) => theme.breakpoints.down('sm'))
+  return isMobile ? null : (
     <TableRow sx={{ bgcolor: 'background.paper' }}>
       <TableCell>{t('key')}</TableCell>
       <TableCell>{t('locale_selection_en')}</TableCell>
@@ -28,11 +43,25 @@ function fixedHeaderContent() {
   )
 }
 
-/** @type {import('react-virtuoso').TableVirtuosoProps['itemContent']} */
-function itemContent(_index, row) {
-  return (
+/** @type {import('react-virtuoso').TableVirtuosoProps<Row, { isMobile: boolean }>['itemContent']} */
+function itemContent(_index, row, ctx) {
+  return ctx?.isMobile ? (
+    <TableCell>
+      <Grid2 className="flex-center" container direction="column">
+        <Typography component={Grid2}>{row.name}</Typography>
+        <Divider flexItem sx={{ my: 2, width: '100%' }} />
+        <Typography component={Grid2} mb={2}>
+          {row.english}
+        </Typography>
+        <EditLocale
+          name={row.name}
+          type={typeof row.english === 'number' ? 'number' : 'text'}
+        />
+      </Grid2>
+    </TableCell>
+  ) : (
     <>
-      <TableCell>{row.name}</TableCell>
+      <TableCell sx={{ overflow: 'hidden' }}>{row.name}</TableCell>
       <TableCell>{row.english || clear}</TableCell>
       <TableCell>{row.ai || clear}</TableCell>
       <TableCell width="40%">
@@ -48,6 +77,8 @@ function itemContent(_index, row) {
 export function LocalesTable() {
   const { i18n } = useTranslation()
   const all = useLocalesStore((s) => s.all)
+  // @ts-ignore
+  const isMobile = useMediaQuery((theme) => theme.breakpoints.down('sm'))
 
   const { data, loading } = useQuery(LOCALES_STATUS, {
     fetchPolicy: 'network-only',
@@ -66,6 +97,7 @@ export function LocalesTable() {
     ignorePunctuation: true,
   })
 
+  /** @type {Row[]} */
   const rows = React.useMemo(() => {
     if (data?.locales && enData?.locales) {
       const { missing, ai } = data.locales
@@ -99,7 +131,7 @@ export function LocalesTable() {
         data={loading || enLoading ? [] : rows}
         fixedHeaderContent={fixedHeaderContent}
         itemContent={itemContent}
-        isScrolling={setScrolling}
+        context={{ isMobile }}
       />
     </Box>
   )

src/pages/locales/hooks/store.js

@@ -9,7 +9,6 @@ import { downloadJson } from '@utils/downloadJson'
  *  existingHuman: Record<string, string | number>
  *  all: boolean
  *  instructions: boolean
- *  isScrolling: boolean
  * }} LocalesStore
  * @type {import("zustand").UseBoundStore<import("zustand").StoreApi<LocalesStore>>}
  */
@@ -29,7 +28,3 @@ export const downloadLocales = () => {
   )
   return downloadJson({ ...existingHuman, ...filtered }, `${locale}.json`)
 }
-
-/** @param {boolean} isScrolling */
-export const setScrolling = (isScrolling) =>
-  useLocalesStore.setState({ isScrolling })