#434

frontend/src/components/counts/CountsConditionValues.tsx

@@ -23,13 +23,13 @@ const CountsConditionValues = (
   const values = condition.values ?? []
   const pick = () => {
     void dialogue.form ({ title: label (field.candidateSource === 'tags'
-	? 'pattern.link' : 'pattern.pattern'), size: 'large', footerLayout: 'inline',
+	? 'counts:pattern.link' : 'counts:pattern.pattern'), size: 'large', footerLayout: 'inline',
 	body: controls => <CountsCandidatePicker field={field} definition={definition}
 	    params={params} initial={values} maximum={maximum} controls={controls} save={change}/> })
   }
   if (condition.input === 'list' || field.candidateSource === 'tags')
     return <Button type="button" variant="outline" disabled={condition.blank} onClick={pick}>
-      {label ('pattern.list')}{' ('}{values.length}{')'}</Button>
+      {label ('counts:pattern.list')}{' ('}{values.length}{')'}</Button>
   const append = () => {
     if (draft === '' || values.length >= maximum
 	|| values.some (value => String (value) === draft))
@@ -40,14 +40,14 @@ const CountsConditionValues = (
   const input = () => {
     if (field.type === 'datetime')
       return <DateTimeField precision="second" value={draft} disabled={condition.blank}
-	  className="h-9 w-48 min-w-0 max-w-full" aria-label={message ('value').text}
+	  className="h-10 w-48 min-w-0 max-w-full" aria-label={message ('value').text}
 	  onChange={value => setDraft (value ?? '')}/>
     if (field.type === 'boolean' || field.choices != null)
     {
       const choices = field.choices ?? ['true', 'false'].map (value => ({
 	  value, label: `counts:truthValues.${value}` }))
       return <select value={draft} disabled={condition.blank}
-	  className={inputClass (false, 'h-9 w-36 min-w-0 max-w-full')}
+	  className={inputClass (false, 'h-10 w-36 min-w-0 max-w-full')}
 	  aria-label={message ('value').text} onChange={event => setDraft (event.target.value)}>
 	<option value=""/>
 	{choices.map (choice => <option key={choice.value} value={choice.value}>
@@ -56,7 +56,7 @@ const CountsConditionValues = (
     }
     return <input value={draft} disabled={condition.blank}
 	type={field.type === 'integer' ? 'number' : 'text'} aria-label={message ('value').text}
-	className={inputClass (false, 'h-9 w-36 min-w-0 max-w-full')}
+	className={inputClass (false, 'h-10 w-36 min-w-0 max-w-full')}
 	onChange={event => setDraft (event.target.value)}/>
   }
   const display = (value: string | number | boolean) => {
@@ -65,7 +65,7 @@ const CountsConditionValues = (
     if (field.type === 'boolean') return message (`truthValues.${value}`).text
     return String (value)
   }
-  return <div className="flex min-w-0 max-w-full flex-wrap items-center gap-1">
+  return <div className="flex min-w-0 max-w-full flex-wrap items-center gap-x-2 gap-y-2 py-1">
     {values.map ((value, index) => <span key={`${index}:${value}`}
 	className="inline-flex items-center gap-1">
       {display (value)}<Button type="button" size="sm" variant="ghost"