SpaceBetween not taking 100% width

[ericxinzhang]

I use <TextFilter> component in <Table> component following the example, and my code snippet is as following:

<Table
      {...collectionProps}
      loading={isFetching}
      selectionType="single"
      header={<ContentHeader selectedItems={selectedItems} items={data?.findProposals ?? []} />}
      columnDefinitions={columnDefinitions}
      filter={
        <TextFilter
          filteringPlaceholder="Proposal name begins with..."
          filteringText={textFilterChangeDetail?.filteringText}
          onChange={({ detail }) => setTextFilterChangeDetail(detail)}
          onDelayedChange={({ detail }) => setNamePrefix(detail.filteringText)}
        />
      }
      items={items}
    />

The above code works fine and renders the following:

However my case is a server side filtering so to not hammer server too much I'd like to add a Search button next to the filter text box instead of firing API call in onDelayedChange. My updated code snippet:

 <Table
      {...collectionProps}
      loading={isFetching}
      selectionType="single"
      header={<ContentHeader selectedItems={selectedItems} items={data?.findProposals ?? []} />}
      columnDefinitions={columnDefinitions}
      filter={
        <SpaceBetween direction="horizontal" size="xs">
          <TextFilter
            filteringPlaceholder="Proposal name begins with..."
            filteringText={textFilterChangeDetail?.filteringText}
            onChange={({ detail }) => setTextFilterChangeDetail(detail)}
          />
          <Button variant="primary">Search</Button>
        </SpaceBetween>
      }
      items={items}
    />

As you can see <SpaceBetween> component somehow reduces the width of text box + button, and it does not support style property. I tried many ways but cannot make it wider.

In this case what's the best way to specify the width of the <SpaceBetween> component?

[FlorianDr]

This use case is very similar to the Table with Select - Example. The example uses a custom flex layout. I would recommend to do the same. If you would like to keep the xs size, you can make use of design tokens.

[ericxinzhang]

Table with Select - Example

Thanks Florian for your help, but it is a bit disappointing that I have to use lower level components and manage my own CSS in such a simple use case.

[FlorianDr]

Thank you for getting back to us and providing feedback about this approach.