#434

frontend/src/components/counts/CountsControls.tsx

@@ -180,9 +180,11 @@ const CountsControls = (
       </label>}
     </fieldset>
     <AnimatedCollapse id={id} open={open}>
-    <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' }}>
+    <div className="grid max-h-[40dvh] auto-rows-max gap-3 overflow-y-auto overscroll-contain
+	border-b py-2 [direction:ltr] dark:border-slate-700 md:max-h-none md:auto-rows-auto
+	md:grid-cols-2 md:overflow-visible">
+      <div className="min-h-0 min-w-0 md:max-h-[40dvh] md:overflow-y-auto
+	  md:overscroll-contain md:[direction:rtl]">
         <fieldset className="min-w-0" data-counts-output style={{ direction: 'ltr' }}>
 	  {mode === 'summary' ? <CountsAxes params={draft} update={update}/>
               : <>
@@ -194,8 +196,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' }}>
+      <div className="min-h-0 min-w-0 border-t pt-2 dark:border-slate-700
+	  md:max-h-[40dvh] md:overflow-y-auto md:overscroll-contain md:border-t-0 md:pt-0"
+	  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">