Fix rendering of select in cards (GitbookIO#2248)

Author: SamyPesse

e2e/pages.spec.ts

@@ -75,17 +75,6 @@ const testCases: TestsCase[] = [
  },
  ],
  },
- {
- name: 'Snyk',
- baseUrl: 'https://docs.snyk.io',
- tests: [
- {
- name: 'Home',
- url: '',
- run: waitForCookiesDialog,
- },
- ],
- },
  {
  name: 'Versioning',
  baseUrl: 'https://gitbook.gitbook.io/test-1-1/',
@@ -151,6 +140,7 @@ const testCases: TestsCase[] = [
  name: 'Tables',
  url: 'blocks/tables',
  run: waitForCookiesDialog,
+ fullPage: true,
  },
  {
  name: 'Expandables',

src/components/DocumentView/Table/RecordCard.tsx

@@ -79,6 +79,7 @@ export async function RecordCard(
  'flex',
  'flex-col',
  'place-self-start',
+ 'gap-3',
  'p-4',
  'text-sm',
  target

src/components/DocumentView/Table/RecordColumnValue.tsx

@@ -172,7 +172,7 @@ export async function RecordColumnValue<Tag extends React.ElementType = 'div'>(
  case 'select': {
  return (
  <Tag className={tcls()}>
- <span className={tcls('inline-flex', 'gap-2')}>
+ <span className={tcls('inline-flex', 'gap-2', 'flex-wrap')}>
  {(value as string[]).map((selectId) => {
  const option = definition.options.find(
  (option) => option.value === selectId,