Too many FormTabs not scroll as I expected(no scroll)

[ericobi]

What you were expecting:

I need to add 10 or 15 tabs in the edit page.

What happened instead:

tabs are added but I can't scroll to the behind ones. and also not mobile responsive.

Steps to reproduce:

simply add 10 or 20 tabs.

Related code:

• Preferably, a CodeSandbox you can fork this one: https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple
• A link to a GitHub repo with the minimal codebase to reproduce the issue

export const ProviderEdit = props => (
  <Edit {...props}>
    <TabbedForm>
      <FormTab label="About Provider">
        <TextInput source="name" validate={required()} />
        <TextInput source="email" validate={required()} />
        <TextInput source="avgRating" validate={required()} />
        <TextInput source="numReviews" validate={required()} />
        <TextInput source="address" validate={required()} />
        <TextInput source="website" />
        <TextInput source="School name" />
        <TextInput source="Year of graduation" />
        <TextInput source="RCDSO certification year" />
        <TextInput source="Specialty" />
        <TextInput source="Memberships and certifications" />
        <BooleanInput label="isApproved" source="isApproved" />
      </FormTab>
      <FormTab label="Important Texts">
        <LongTextInput source="Biography"/>
        <LongTextInput source="Why do patients love your practice?"/>
        <LongTextInput source="Top 3 treatments you offer in your practice1"/>
        <LongTextInput source="Top 3 treatments you offer in your practice2"/>
        <LongTextInput source="Top 3 treatments you offer in your practice3"/>
      </FormTab>
      <FormTab label="Checkboxes">
        <BooleanInput source="Cosmetic (veneers, whitening)" />
        <BooleanInput source="Fillings" />
        <BooleanInput source="Emergency dental care" />
        <BooleanInput source="Roots canals" />
        <BooleanInput source="Invisalign" />
        <BooleanInput source="Braces" />
        <BooleanInput source="Pediatric dentistry" />
        <BooleanInput source="Crowns" />
        <BooleanInput source="Bridges" />
        <BooleanInput source="Dentures" />
        <BooleanInput source="Oral surgery- wisdom teeth, impacted teeth" />
        <BooleanInput source="Specialists Endo" />
        <BooleanInput source="Specialists OMFS" />
        <BooleanInput source="Specialists Perio" />
        <BooleanInput source="Specialists Prostho" />
        <BooleanInput source="Specialists Ortho" />
        <BooleanInput source="Specialists Pedo" />
        <BooleanInput source="Dental Implants" />
        <BooleanInput source="Surgical implant placement" />
        <BooleanInput source="bone grafting" />
        <BooleanInput source="sinus lifts" />
        <BooleanInput source="implant restoration" />
        <BooleanInput source="Full-mouth Rehabilitation" />
        <BooleanInput source="TMJ Treatment" />
        <BooleanInput source="Sleep Apnea Treatment" />
        <BooleanInput source="Sedation" />
        <BooleanInput source="Periodontal surgery" />
        <BooleanInput source="Parking" />
        <BooleanInput source="Transit Access" />
        <BooleanInput source="Beverages (hot)" />
        <BooleanInput source="Beverages (cold)" />
        <BooleanInput source="Tv in waiting room" />
        <BooleanInput source="Tv in Operatories" />
        <BooleanInput source="blankets/pillows" />
        <BooleanInput source="Wifi" />
        <BooleanInput source="Nitrous sedation" />
        <BooleanInput source="Hot towel" />
        <BooleanInput source="lip balm" />
        <BooleanInput source="handicap accessible washroom" />
        <BooleanInput source="kids play area" />
        <BooleanInput source="Digital x-rays" />
        <BooleanInput source="IntraOral Camera" />
        <BooleanInput source="Panoramic X-rays" />
        <BooleanInput source="Dental Laser" />
        <BooleanInput source="CBCT" />
        <BooleanInput source="Digital Scanner (itero)" />
        <BooleanInput source="Cerec crowns (same-day crowns)" />
        <BooleanInput source="Laser Whitening" />
        <BooleanInput source="Paperless practice" />
        <BooleanInput source="Direct Billing | Assignment of Benefits" />
        <BooleanInput source="In house payment plans" />
        <BooleanInput source="3rd party payment plans" />
        <BooleanInput source="Ontario Fee guide followed" />
        <BooleanInput source="Discounts given with discretion" />
      </FormTab>

      <FormTab label="Images">
        <ImageInput source="images" label="Profile Image" accept="image/*" multiple>
          <ImageField source="url" title="pathname" />
        </ImageInput>
        <ImageInput source="office_images" label="Office Image" accept="image/*" multiple>
          <ImageField source="url" title="pathname" />
        </ImageInput>
      </FormTab>

      <FormTab label="Hours">
        <BooleanInput source="weekend appointments" />
        <BooleanInput source="evening appointments" />
        <ArrayInput source="hours">
          <SimpleFormIterator disableRemove disableAdd>
              <BooleanInput source="availability" />
              <TextInput source="start" />
              <TextInput source="end" />
          </SimpleFormIterator>
        </ArrayInput>
      </FormTab>

      <FormTab label="Reviews">
        <ArrayInput source="review">
          <SimpleFormIterator>
              <TextInput source="reviewRating" />
              <TextInput source="reviewerName" />
              <LongTextInput source="reviewText"/>
          </SimpleFormIterator>
        </ArrayInput>
      </FormTab>

      <FormTab label="Provider Badge">
        <BooleanInput source="On time" />
        <BooleanInput source="Friendly staff" />
        <BooleanInput source="Office Amenities" />
        <BooleanInput source="knowledge based expertise" />
        <BooleanInput source="Advanced dental technology" />
        <BooleanInput source="years of experience" />
        <BooleanInput source="advanced training in area" />
        <BooleanInput source="convenience" />
        <BooleanInput source="insurance friendly" />
      </FormTab>

    </TabbedForm>
  </Edit>
)

Other information:

Environment macOS Mojave node:v11.10.1

• React-admin version:2.9.5
• Last version that did not exhibit the issue (if applicable):
• React version:16.9.0
• Browser: chrome
• Stack trace (in case of a JS error):

[djhi]

First, this is a duplicate of #3116 and #2317 (with a solution implemented by #3288). Second, I would advise against a form with so many tabs anyway. It is most probably not very usable