#434

frontend/src/components/counts/CountsControls.tsx

@@ -64,23 +64,28 @@ const CountsControls = (
     execute (normaliseCountsParams (resource, next))
   }}>
     <div className="flex flex-wrap items-center gap-2 border-b pb-1 dark:border-slate-700">
-      {history ? <>
-        {['from', 'through'].map (key => <label key={key}
-            className="flex flex-wrap items-center gap-1 text-sm">
-          {label (key)}<DateTimeField precision="second" value={draft.get (key) ?? ''}
-              aria-label={message (key).text} onChange={value => update (key, value ?? '')}/>
-        </label>)}
-      </> : <div className="flex flex-wrap items-center gap-1 text-sm">
+      {history ? <div className="flex min-w-0 max-w-full items-center gap-1">
+	<DateTimeField precision="second" value={draft.get ('from') ?? ''}
+	    aria-label={message ('from').text} lang={message ('from').language}
+	    className="min-w-0 flex-1" onChange={value => update ('from', value ?? '')}/>
+	<span className="shrink-0">{label ('periodSeparator')}</span>
+	<DateTimeField precision="second" value={draft.get ('through') ?? ''}
+	    aria-label={message ('through').text} lang={message ('through').language}
+	    className="min-w-0 flex-1" onChange={value => update ('through', value ?? '')}/>
+      </div> : <div className="flex flex-wrap items-center gap-1 text-sm">
         {label ('referenceAt')}<HelpPopover label={message ('referenceAt')}>
           {label ('referenceHelp')}</HelpPopover>
-	<label className="inline-flex items-center gap-1">
-	  <input type="checkbox" checked={countsUseLatest (draft)}
-	      onChange={event => update ('current', event.target.checked ? '1' : '0')}/>
-	  {label ('latest')}</label>
-	<DateTimeField precision="second" disabled={countsUseLatest (draft)}
-	    value={draft.get ('at') ?? ''}
-	    aria-label={message ('referenceAt').text} lang={message ('referenceAt').language}
-            onChange={value => update ('at', value ?? '')}/>
+	<div className="flex min-w-0 max-w-full items-center gap-1">
+	  <DateTimeField precision="second" disabled={countsUseLatest (draft)}
+	      className="min-w-0 flex-1"
+	      value={draft.get ('at') ?? ''}
+	      aria-label={message ('referenceAt').text} lang={message ('referenceAt').language}
+	      onChange={value => update ('at', value ?? '')}/>
+	  <label className="inline-flex shrink-0 items-center gap-1">
+	    <input type="checkbox" checked={countsUseLatest (draft)}
+		onChange={event => update ('current', event.target.checked ? '1' : '0')}/>
+	    {label ('latest')}</label>
+	</div>
       </div>}
     </div>
     <div className="flex flex-wrap items-center gap-2 border-b py-1 dark:border-slate-700">