#434

frontend/src/components/counts/CountsControls.tsx

@@ -150,6 +150,13 @@ const CountsControls = (
     <fieldset className="flex flex-wrap items-center gap-x-3 gap-y-1 border-b py-1
 	dark:border-slate-700">
       <legend className="sr-only">{label ('displaySettings')}</legend>
+      <label className="inline-flex items-center gap-1 text-sm">
+	{label ('fields.limit')}
+	<input value={draft.get ('limit') ?? '20'}
+	    aria-label={message ('fields.limit').text}
+	    className={inputClass (false, 'w-20 py-1')}
+	    onChange={event => update ('limit', event.target.value)}/>
+      </label>
       <label className="inline-flex items-center gap-1 text-sm">
 	<input type="checkbox" checked={draft.get ('row_numbers') === '1'}
 	    onChange={event => {
@@ -172,10 +179,10 @@ const CountsControls = (
       </label>}
     </fieldset>
     <AnimatedCollapse id={id} open={open}>
-    <div className="max-h-[35dvh] overflow-y-auto overscroll-contain
-        border-b py-2 dark:border-slate-700 md:max-h-[40dvh]">
-      <div className="grid gap-3 md:grid-cols-2">
-        <fieldset className="min-w-0" data-counts-output>
+    <div className="grid gap-3 border-b py-2 dark:border-slate-700 md:grid-cols-2">
+      <div className="max-h-[20dvh] min-h-0 min-w-0 overflow-y-auto overscroll-contain
+	  md:max-h-[40dvh]" style={{ direction: 'rtl' }}>
+        <fieldset className="min-w-0" data-counts-output style={{ direction: 'ltr' }}>
 	  {mode === 'summary' ? <CountsAxes params={draft} update={update}/>
               : <>
                 <legend className="mb-1 font-semibold">{label ('output')}</legend>
@@ -185,6 +192,9 @@ const CountsControls = (
                 }}/>
               </>}
         </fieldset>
+      </div>
+      <div className="max-h-[20dvh] min-h-0 min-w-0 overflow-y-auto overscroll-contain
+	  md:max-h-[40dvh]" style={{ direction: 'ltr' }}>
         <fieldset className="min-w-0 space-y-2" data-counts-filters>
           <legend className="font-semibold">{label ('filters')}</legend>
 	  {history && <div className="flex min-w-0 max-w-full items-center gap-1">
@@ -197,12 +207,12 @@ const CountsControls = (
 		className="min-w-0 flex-1" onChange={value => update ('through', value ?? '')}/>
 	  </div>}
           <div className="flex flex-wrap gap-2">
-            {['resource_id', 'user_id', 'limit'].map (key => <FormField key={key}
+            {['resource_id', 'user_id'].map (key => <FormField key={key}
                 label={label (key === 'resource_id' ? 'columns.resourceId'
-                    : (key === 'user_id' ? 'fields.actor' : 'fields.limit'))}>
-              {() => <input value={draft.get (key) ?? (key === 'limit' ? '20' : '')}
+                    : 'fields.actor')}>
+              {() => <input value={draft.get (key) ?? ''}
                   aria-label={message (key === 'resource_id' ? 'columns.resourceId'
-                      : (key === 'user_id' ? 'fields.actor' : 'fields.limit')).text}
+                      : 'fields.actor').text}
                   className={inputClass (false, 'w-28 py-1')}
                   onChange={event => update (key, event.target.value)}/>}
             </FormField>)}