[ResourceList] Improve styling of `.HeaderContentWrapper` children

[carolopolo]

Issue summary

• Basically summarized here: [ResourceList] Trunctate long sortOption label #2957 (comment)
• The styling of the SelectWrapper could be improved to have a min-width of at least the checkbox width + spacing().

Expected behavior

• Upon fixing a bug in ResourceList's styling, we noticed an improvement to be made. Adding @include layout-flex-fix; to the children of .HeaderContentWrapper should result in proper truncation of the children.

Actual behavior

• However, in cases where the sortOption label is insanely long, it starts encroaching onto the checkbox, resulting in scenarios as such:
  

Steps to reproduce the problem

1. Paste this in ResourceList.scss:

.HeaderTitleWrapper,
.CheckableButtonWrapper,
.AlternateToolWrapper,
.SortWrapper,
.SelectButtonWrapper {
  @include layout-flex-fix;
}

2. Copy-paste this code in playground/Playground.tsx:

import React, {useState} from 'react';

import {Avatar, Card, ResourceItem, ResourceList, TextStyle} from '../src';

export function Playground() {
  const [sortValue, setSortValue] = useState('DATE_MODIFIED_DESC');

  const resourceName = {
    singular: 'customer',
    plural: 'customers',
  };

  const items = [
    {
      id: 341,
      url: 'customers/341',
      name: 'Mae Jemison',
      location: 'Decatur, USA',
    },
    {
      id: 256,
      url: 'customers/256',
      name: 'Ellen Ochoa',
      location: 'Los Angeles, USA',
    },
  ];

  return (
    <Card>
      <ResourceList
        selectable
        selectedItems={[]}
        resourceName={resourceName}
        items={items}
        renderItem={renderItem}
        sortValue={sortValue}
        sortOptions={[
          {
            label:
              'Last shrimpy shrimp created (ascending shrimp) shrimp shrimp shrimp shrimp shrimp',
            value: 'DATE_MODIFIED_DESC',
          },
          {label: 'Oldest update', value: 'DATE_MODIFIED_ASC'},
        ]}
        onSortChange={(selected) => {
          setSortValue(selected);
          console.log(`Sort option changed to ${selected}.`);
        }}
      />
    </Card>
  );

  function renderItem(item) {
    const {id, url, name, location} = item;
    const media = <Avatar customer size="medium" name={name} />;

    return (
      <ResourceItem
        id={id}
        url={url}
        media={media}
        accessibilityLabel={`View details for ${name}`}
      >
        <h3>
          <TextStyle variation="strong">{name}</TextStyle>
        </h3>
        <div>{location}</div>
      </ResourceItem>
    );
  }
}

This issue has been inactive for 180 days and labeled with Icebox. It will be closed in 7 days if there is no further activity.