fix(resource): keep options aside grouped with filter/sort without a search bar

Group aside + the filter/sort cluster in one ml-auto right-aligned container
instead of relying on the search's flex-1 to anchor them. Without this, an
options bar with no search (the embedded mothership table editor) split aside
to the far left and filter/sort to the far right via justify-between.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options/resource-options.tsx

@@ -114,63 +114,67 @@ export const ResourceOptions = memo(function ResourceOptions({
 
   return (
     <div className={cn('border-[var(--border)] border-b py-2.5', search ? 'px-6' : 'px-4')}>
-      <div className='flex items-center justify-between'>
+      <div className='flex items-center'>
         {search && <SearchSection search={search} />}
-        {aside && <div className='flex shrink-0 items-center gap-1.5'>{aside}</div>}
-        <div className='flex items-center'>
-          {filterTags?.map((tag) => (
-            <Chip key={tag.label} rightIcon={X} onClick={tag.onRemove}>
-              {tag.label}
-            </Chip>
-          ))}
-          {isToggleFilter && filter.mode === 'toggle' ? (
-            <Chip active={filter.active} leftIcon={ListFilter} onClick={filter.onToggle}>
-              Filter
-            </Chip>
-          ) : popoverFilter ? (
-            <PopoverPrimitive.Root
-              open={openMenu === 'filter'}
-              onOpenChange={(open) =>
-                setOpenMenu((current) => (open ? 'filter' : current === 'filter' ? null : current))
-              }
-            >
-              <PopoverPrimitive.Anchor asChild>
-                <div className='flex items-center'>
-                  <PopoverPrimitive.Trigger asChild>
-                    <Chip active={popoverFilter.active} leftIcon={ListFilter}>
-                      Filter
-                    </Chip>
-                  </PopoverPrimitive.Trigger>
-                  {sort && (
-                    <SortDropdown
-                      config={sort}
-                      open={openMenu === 'sort'}
-                      onOpenChange={(open) =>
-                        setOpenMenu((current) =>
-                          open ? 'sort' : current === 'sort' ? null : current
-                        )
-                      }
-                    />
-                  )}
-                </div>
-              </PopoverPrimitive.Anchor>
-              <PopoverPrimitive.Portal>
-                <PopoverPrimitive.Content
-                  align='end'
-                  alignOffset={RESOURCE_MENU_EDGE_OFFSET}
-                  collisionPadding={6}
-                  sideOffset={6}
-                  className={cn(
-                    POPOVER_ANIMATION_CLASSES,
-                    'z-50 w-fit origin-[--radix-popover-content-transform-origin] rounded-xl border border-[var(--border)] bg-[var(--bg)] shadow-sm'
-                  )}
-                >
-                  {popoverFilter.content}
-                </PopoverPrimitive.Content>
-              </PopoverPrimitive.Portal>
-            </PopoverPrimitive.Root>
-          ) : null}
-          {sort && (isToggleFilter || !popoverFilter) && <SortDropdown config={sort} />}
+        <div className='ml-auto flex shrink-0 items-center gap-1.5'>
+          {aside}
+          <div className='flex items-center'>
+            {filterTags?.map((tag) => (
+              <Chip key={tag.label} rightIcon={X} onClick={tag.onRemove}>
+                {tag.label}
+              </Chip>
+            ))}
+            {isToggleFilter && filter.mode === 'toggle' ? (
+              <Chip active={filter.active} leftIcon={ListFilter} onClick={filter.onToggle}>
+                Filter
+              </Chip>
+            ) : popoverFilter ? (
+              <PopoverPrimitive.Root
+                open={openMenu === 'filter'}
+                onOpenChange={(open) =>
+                  setOpenMenu((current) =>
+                    open ? 'filter' : current === 'filter' ? null : current
+                  )
+                }
+              >
+                <PopoverPrimitive.Anchor asChild>
+                  <div className='flex items-center'>
+                    <PopoverPrimitive.Trigger asChild>
+                      <Chip active={popoverFilter.active} leftIcon={ListFilter}>
+                        Filter
+                      </Chip>
+                    </PopoverPrimitive.Trigger>
+                    {sort && (
+                      <SortDropdown
+                        config={sort}
+                        open={openMenu === 'sort'}
+                        onOpenChange={(open) =>
+                          setOpenMenu((current) =>
+                            open ? 'sort' : current === 'sort' ? null : current
+                          )
+                        }
+                      />
+                    )}
+                  </div>
+                </PopoverPrimitive.Anchor>
+                <PopoverPrimitive.Portal>
+                  <PopoverPrimitive.Content
+                    align='end'
+                    alignOffset={RESOURCE_MENU_EDGE_OFFSET}
+                    collisionPadding={6}
+                    sideOffset={6}
+                    className={cn(
+                      POPOVER_ANIMATION_CLASSES,
+                      'z-50 w-fit origin-[--radix-popover-content-transform-origin] rounded-xl border border-[var(--border)] bg-[var(--bg)] shadow-sm'
+                    )}
+                  >
+                    {popoverFilter.content}
+                  </PopoverPrimitive.Content>
+                </PopoverPrimitive.Portal>
+              </PopoverPrimitive.Root>
+            ) : null}
+            {sort && (isToggleFilter || !popoverFilter) && <SortDropdown config={sort} />}
+          </div>
         </div>
       </div>
     </div>