Add max-height for Terms of Service panel

Follow up from https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/18570#note_71460276

If the Terms of Service agreement content is really long, the accept/decline buttons should still be visible on the screen and the content should scroll within the panel. The footer buttons should only stay fixed if the height of the content surpasses the viewport height.

Current screens

small screen	tall screen

Proposal

✏️ Figma work file

• define a container height to fit the user's screen
• add fade to bottom of container
• disable Accept button until scrolled to bottom of content.

Implementation plan

1. Add some CSS to the TOS container to set a max width and make it scrollable

.terms-scrollable-viewport {
  max-height: calc(100vh - 220px);
  overflow: auto;
}

1. Add some CSS to add the fade to the bottom of the TOS. Something like this:

.terms-fade {
  position: absolute;
  bottom: 0;
  height: $gl-spacing-scale-11;
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.5) 100%);
  pointer-events: none;
}

1. Add some JavaScript to enable the Accept button when the user has scrolled to the bottom

const viewport = document.querySelector('.js-terms-scrollable-viewport')
const viewportBottom = document.querySelector('.js-viewport-bottom')
const acceptButton = document.querySelector('.js-accept-button')
const callback = (event) => {
  console.log(event);
  if (event[0].isIntersecting) {
    acceptButton.removeAttribute('disabled')
  }
}
const observer = new IntersectionObserver(callback, {root: viewport});
observer.observe(viewportBottom)

1. Add specs for the JavaScript