[IndexTable] Sticky column problem with long content

[lhoffbeck]

Issue summary

When the sticky first column of the index table contains content wider than the table container, the table can't be scrolled far enough to see additional content.

Expected behavior

User should be able to see all the table content after scrolling.

Actual behavior

User can't see all content of indextable when the first column has long content.

Reduced test case

Playground.tsx

import React from 'react';

import {Card, IndexTable, Page, TextStyle, useIndexResourceState} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      <SimpleIndexTableExample />
      {/* Add the code you want to test in here */}
    </Page>
  );
}

function SimpleIndexTableExample() {
  const customers = [
    {
      id: '3411',
      url: 'customers/341',
      name: 'asdfasdfadsfadsasdfasdfadsfadsasdfasdfadsfadsasdfasdfadsfadsasdfasdfadsfadsasdfasdfadsfadsasdfasdfadsfadsasdfasdfadsfadsasdfasdfadsfadsasdfasdfadsfadsasdfasdfadsfadsasdfasdfadsfadsasdfasdfadsfadsasdfasdfadsfadsasdfasdfadsfadsasdfasdfadsfads',
      location: 'Decatur, USA',
      orders: 20,
      amountSpent: '$2,400',
    },
    {
      id: '2561',
      url: 'customers/256',
      name: 'asdfasdfadsfads asdfasdfadsfads asdfasdfadsfads asdfasdfadsfads asdfasdfadsfads asdfasdfadsfads asdfasdfadsfads asdfasdfadsfads',
      location: 'Los Angeles, USA',
      orders: 30,
      amountSpent: '$140',
    },
  ];
  const resourceName = {
    singular: 'customer',
    plural: 'customers',
  };

  const {
    selectedResources,
    allResourcesSelected,
    handleSelectionChange,
  } = useIndexResourceState(customers);

  const rowMarkup = customers.map(
    ({id, name, location, orders, amountSpent}, index) => (
      <IndexTable.Row
        id={id}
        key={id}
        selected={selectedResources.includes(id)}
        position={index}
      >
        <IndexTable.Cell>
          <TextStyle variation="strong">{name}</TextStyle>
        </IndexTable.Cell>
        <IndexTable.Cell>{location}</IndexTable.Cell>
        <IndexTable.Cell>{orders}</IndexTable.Cell>
        <IndexTable.Cell>{amountSpent}</IndexTable.Cell>
      </IndexTable.Row>
    ),
  );

  return (
    <Card>
      <IndexTable
        resourceName={resourceName}
        itemCount={customers.length}
        selectedItemsCount={
          allResourcesSelected ? 'All' : selectedResources.length
        }
        onSelectionChange={handleSelectionChange}
        headings={[
          {title: 'Name'},
          {title: 'Location'},
          {title: 'Order count'},
          {title: 'Amount spent'},
        ]}
      >
        {rowMarkup}
      </IndexTable>
    </Card>
  );
}

Specifications

  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 158.93 MB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.15.0 - ~/.nvm/versions/node/v10.15.0/bin/node
    Yarn: 1.13.0 - ~/.dev/yarn/v1.13.0/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.15.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 88.0.4324.182
    Chrome Canary: 90.0.4424.0
    Firefox: 85.0.2
    Firefox Developer Edition: 85.0
    Safari: 13.1.3
  npmPackages:
    react: ^16.9.0 => 16.9.0 
    react-dom: ^16.9.0 => 16.9.0 

[lhoffbeck]

While tophatting #4376 , found some precedence for this. If you paste the following into the playground and size your browser to anywhere from 600px-697px, the table only has the checkbox column sticky:

Copy-paste this code in playground/Playground.tsx to test

import React from 'react';

import {Card, IndexTable, Page, TextStyle, useIndexResourceState} from '../src';

export function Playground() {
  const customers = [
    {
      id: '2563',
      url: 'customers/25630',
      name: 'Florence Jenkins',
      location: 'North Casandra',
      orders: 904,
      amountSpent: '$393',
    },
    {
      id: '2564',
      url: 'customers/25631',
      name: 'Anna Erdman MD',
      location: 'Kentmouth',
      orders: 620,
      amountSpent: '$471',
    },
    {
      id: '2565',
      url: 'customers/25632',
      name: 'Marvis Abbott',
      location: 'Port Ladawn',
      orders: 908,
      amountSpent: '$267',
    },
    {
      id: '2566',
      url: 'customers/25633',
      name: 'Keith Muller',
      location: 'South Mathew',
      orders: 581,
      amountSpent: '$705',
    },
    {
      id: '2567',
      url: 'customers/25634',
      name: 'Derrick Stracke',
      location: 'West Reneshire',
      orders: 400,
      amountSpent: '$905',
    },
    {
      id: '2568',
      url: 'customers/25635',
      name: 'Rupert Durgan',
      location: 'Lake Rhondabury',
      orders: 760,
      amountSpent: '$622',
    },
    {
      id: '2569',
      url: 'customers/25636',
      name: 'Lacy Kertzmann',
      location: 'Elinville',
      orders: 339,
      amountSpent: '$754',
    },
    {
      id: '2570',
      url: 'customers/25637',
      name: 'Haywood Heathcote',
      location: 'Port Delmar',
      orders: 191,
      amountSpent: '$599',
    },
    {
      id: '2571',
      url: 'customers/25638',
      name: 'Amb. Ayesha Bahringer',
      location: 'Ivoryfurt',
      orders: 332,
      amountSpent: '$752',
    },
    {
      id: '2572',
      url: 'customers/25639',
      name: 'Karl Goyette',
      location: 'Chayaland',
      orders: 869,
      amountSpent: '$947',
    },
    {
      id: '2573',
      url: 'customers/256310',
      name: 'Curtis Barton',
      location: 'South Harlanberg',
      orders: 196,
      amountSpent: '$543',
    },
    {
      id: '2574',
      url: 'customers/256311',
      name: 'Zetta Pouros',
      location: 'Janiemouth',
      orders: 424,
      amountSpent: '$373',
    },
    {
      id: '2575',
      url: 'customers/256312',
      name: 'Burton Corkery',
      location: 'Elizbethhaven',
      orders: 579,
      amountSpent: '$395',
    },
  ];

  
  const {
    selectedResources,
    allResourcesSelected,
    handleSelectionChange,
  } = useIndexResourceState(customers);

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

  const rowMarkup = customers.map(
    ({id, name, location, orders, amountSpent}, index) => {
      return (
        <IndexTable.Row
          id={id}
          key={id}
          position={index}
          selected={selectedResources.includes(id)}
        >
          <IndexTable.Cell>
            <TextStyle variation="strong">{name}</TextStyle>
          </IndexTable.Cell>
          <IndexTable.Cell>{location}</IndexTable.Cell>
          <IndexTable.Cell>{orders}</IndexTable.Cell>
          <IndexTable.Cell>{amountSpent}</IndexTable.Cell>
        </IndexTable.Row>
      );
    },
  );

  return (
    <Page title="Playground">
      <Card>
        <IndexTable
          resourceName={resourceName}
          itemCount={customers.length}
          selectedItemsCount={
            allResourcesSelected ? 'All' : selectedResources.length
          }
          onSelectionChange={handleSelectionChange}
          headings={[
            {title: 'Name'},
            {title: 'Location'},
            {title: 'Order count'},
            {title: 'Amount spent'},
          ]}
          selectable
        >
          {rowMarkup}
        </IndexTable>
      </Card>
    </Page>
  );
}