Adjust film form text

src/components/FieldSetWithStatus.tsx

@@ -9,12 +9,14 @@ import TagInput from './TagInput';
 import { FiChevronDown } from 'react-icons/fi';
 import { parameterize } from '@/utility/string';
 import Checkbox from './Checkbox';
+import ResponsiveText from './primitives/ResponsiveText';
 
 export default function FieldSetWithStatus({
   id: _id,
   label,
   icon,
   note,
+  noteShort,
   error,
   value,
   isModified,
@@ -40,6 +42,7 @@ export default function FieldSetWithStatus({
   label: string
   icon?: ReactNode
   note?: string
+  noteShort?: string
   error?: string
   value: string
   isModified?: boolean
@@ -128,9 +131,12 @@ export default function FieldSetWithStatus({
               {label}
             </span>
             {note && !error &&
-              <span className="text-gray-400 dark:text-gray-600">
+              <ResponsiveText
+                className="text-gray-400 dark:text-gray-600"
+                shortText={`(${noteShort})`}
+              >
                 ({note})
-              </span>}
+              </ResponsiveText>}
             {isModified && !error &&
               <span className={clsx(
                 'text-main font-medium text-[0.9rem]',

src/components/primitives/ResponsiveText.tsx

@@ -1,20 +1,26 @@
+import clsx from 'clsx/lite';
 import { ReactNode } from 'react';
 
 export default function ResponsiveText({
-  children,
   shortText,
+  className,
+  children,
 }: {
-  children: ReactNode
   shortText?: ReactNode
+  className?: string
+  children: ReactNode
 }) {
   return (
     <>
       {/* Short text */}
-      <span className="inline sm:hidden" aria-hidden>
+      <span
+        className={clsx('inline sm:hidden', className)}
+        aria-hidden
+      >
         {shortText ?? children}
       </span>
       {/* Full text */}
-      <span className="hidden sm:inline">
+      <span className={clsx('hidden sm:inline', className)}>
         {children}
       </span>
     </>

src/photo/form/PhotoForm.tsx

@@ -336,6 +336,7 @@ export default function PhotoForm({
             .map(([key, {
               label,
               note,
+              noteShort,
               required,
               selectOptions,
               selectOptionsDefaultLabel,
@@ -363,6 +364,7 @@ export default function PhotoForm({
                       : ''
                   ),
                   note,
+                  noteShort,
                   error: formErrors[key],
                   value: staticValue ?? formData[key] ?? '',
                   isModified: (

src/photo/form/index.ts

@@ -48,6 +48,7 @@ export type AnnotatedTag = {
 export type FormMeta = {
   label: string
   note?: string
+  noteShort?: string
   required?: boolean
   excludeFromInsert?: boolean
   readOnly?: boolean
@@ -118,7 +119,8 @@ const FORM_METADATA = (
   model: { label: 'camera model' },
   film: {
     label: 'film',
-    note: 'Intended for Fujifilm cameras or film scans',
+    note: 'Intended for Fujifilm simulations and analog scans',
+    noteShort: 'Fujifilm simulations / analog scans',
     shouldNotOverwriteWithNullDataOnSync: true,
   },
   recipeTitle: {