<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/487433/103578504-8abd1400-4e8b-11eb-8f9f-4f718a9462ac.png"><img width="635" alt="Screen Shot 2021-01-04 at 12 50 39 PM" src="https://user-images.githubusercontent.com/487433/103578504-8abd1400-4e8b-11eb-8f9f-4f718a9462ac.png" style="max-width: 100%;"></a></p>
<p dir="auto">🗒this issue was not seen when the PR was last tested and merged. it might caused by conflicts</p>
<details open="" class="details-reset border rounded-2">
  <summary class="px-3 py-2">
    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-device-camera-video">
    <path d="M16 3.75v8.5a.75.75 0 0 1-1.136.643L11 10.575v.675A1.75 1.75 0 0 1 9.25 13h-7.5A1.75 1.75 0 0 1 0 11.25v-6.5C0 3.784.784 3 1.75 3h7.5c.966 0 1.75.784 1.75 1.75v.675l3.864-2.318A.75.75 0 0 1 16 3.75Zm-6.5 1a.25.25 0 0 0-.25-.25h-7.5a.25.25 0 0 0-.25.25v6.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-6.5ZM11 8.825l3.5 2.1v-5.85l-3.5 2.1Z"></path>
</svg>
    <span aria-label="Video description Screen.Recording.2020-12-18.at.8.28.31.PM.mov" class="m-1">Screen.Recording.2020-12-18.at.8.28.31.PM.mov</span>
    <span class="dropdown-caret"></span>
  </summary>

  <video src="https://user-images.githubusercontent.com/67837651/102680719-bcd23480-416f-11eb-87e6-e2862790a659.mov" data-canonical-src="https://user-images.githubusercontent.com/67837651/102680719-bcd23480-416f-11eb-87e6-e2862790a659.mov" controls="controls" muted="muted" class="d-block rounded-bottom-2 border-top width-fit" style="max-height:640px; min-height: 200px">

  </video>
</details>

<p dir="auto">due to the conflicts with recent refactoring work, new time picker select dropdown is cutoff, scroll bar is not showing.<br>
(not caused by the original PR)</p>