feat(logs): improve layout

web/default/src/features/usage-logs/components/logs-filter-toolbar.tsx

@@ -103,6 +103,34 @@ export function LogsFilterToolbar<TData>(props: LogsFilterToolbarProps<TData>) {
     setMobileFiltersOpen(false)
   }
 
+  const advancedToggle = hasAdvancedFilters ? (
+    <Button
+      type='button'
+      variant='ghost'
+      onClick={() => setAdvancedOpen((open) => !open)}
+      aria-expanded={advancedOpen}
+      className={cn(
+        'text-muted-foreground hover:text-foreground gap-1 px-2',
+        props.hasAdvancedActiveFilters &&
+          !advancedOpen &&
+          'text-primary hover:text-primary'
+      )}
+    >
+      {advancedOpen ? t('Collapse') : t('Expand')}
+      {activeAdvancedCount > 0 && (
+        <Badge className='ml-0.5 size-5 justify-center p-0 text-[10px]'>
+          {activeAdvancedCount}
+        </Badge>
+      )}
+      <ChevronDown
+        className={cn(
+          'size-3.5 transition-transform duration-200',
+          advancedOpen && 'rotate-180'
+        )}
+      />
+    </Button>
+  ) : null
+
   if (isMobile && props.mobilePinnedFilters != null) {
     return (
       <Drawer open={mobileFiltersOpen} onOpenChange={setMobileFiltersOpen}>
@@ -192,42 +220,26 @@ export function LogsFilterToolbar<TData>(props: LogsFilterToolbarProps<TData>) {
         props.className
       )}
     >
-      <div className='grid grid-cols-1 gap-2 sm:grid-cols-[repeat(auto-fit,minmax(10rem,1fr))]'>
+      <div className='flex flex-wrap items-start gap-2'>
-        {props.primaryFilters}
+        <div className='grid min-w-0 flex-1 grid-cols-1 gap-2 sm:grid-cols-[repeat(auto-fit,minmax(10rem,1fr))]'>
-        {advancedOpen && props.advancedFilters}
+          {props.primaryFilters}
+        </div>
+        {advancedToggle && (
+          <div className='flex shrink-0 items-center justify-end'>
+            {advancedToggle}
+          </div>
+        )}
       </div>
 
+      {advancedOpen && props.advancedFilters && (
+        <div className='mt-2 grid grid-cols-1 gap-2 sm:grid-cols-[repeat(auto-fit,minmax(10rem,1fr))]'>
+          {props.advancedFilters}
+        </div>
+      )}
+
       <div className='mt-2 flex flex-wrap items-center gap-2'>
         {props.stats}
         <div className='ms-auto flex flex-wrap items-center justify-end gap-1.5 sm:gap-2'>
-          {hasAdvancedFilters && (
-            <Button
-              type='button'
-              variant='ghost'
-              onClick={() => setAdvancedOpen((open) => !open)}
-              aria-expanded={advancedOpen}
-              className={cn(
-                'text-muted-foreground hover:text-foreground gap-1 px-2',
-                props.hasAdvancedActiveFilters &&
-                  !advancedOpen &&
-                  'text-primary hover:text-primary'
-              )}
-            >
-              {advancedOpen ? t('Collapse') : t('Expand')}
-              {activeAdvancedCount > 0 && (
-                <Badge className='ml-0.5 size-5 justify-center p-0 text-[10px]'>
-                  {activeAdvancedCount}
-                </Badge>
-              )}
-              <ChevronDown
-                className={cn(
-                  'size-3.5 transition-transform duration-200',
-                  advancedOpen && 'rotate-180'
-                )}
-              />
-            </Button>
-          )}
-
           <Button
             type='button'
             variant='outline'