whole-tale / dashboard

Whole Tale Dashboard
http://wholetale.org
MIT License
7 stars 2 forks source link

Shrink select-data-modal so that it fits on smaller screens #623

Closed bodom0015 closed 4 years ago

bodom0015 commented 4 years ago

Problem

My previous testing was done on larger monitors, but it seems like my 13-inch laptop screen has issues with max-height: 600px on the select-data-modal. If the list grows too long, the Submit button can be pushed off the screen, despite having set a max-height.

Approach

Shrank to max-height: 400px so that it will fit smaller laptop screens.

Ideally, this would be a percentage or use a value like 50vh or similar to assign a fraction (e.g. 50%) of the viewport height, but this would take more experimentation with a larger selection of monitors that I don't have at my disposal.

How to Test

  1. Checkout and run this branch locally
  2. Login to the WholeTale Dashboard
  3. Register ~12 datasets (enough to enable scrolling on the select-data-modal)
  4. Create a Tale, if you haven't already
  5. Navigate to Run > Files > External Data for the Tale
  6. Click the (+) to open the select-data-modal
    • You should see that the left side provides a scroll bar
    • You should see the "Cancel" and "Submit" buttons are on the screen
  7. Add all datasets to the Tale
    • You should see that the right side provides a scroll bar
    • You should see the "Cancel" and "Submit" buttons are still on the screen
ThomasThelen commented 4 years ago

Should we merge/review this if we're switching over to the Angular dashboard? If we archive this repo we might as well merge it