improve time range selector usability

* hide the end day selector away when it's not in use.
  It was confusing, especially since it seemed to have
  a purely black circle over the selected date when disabled.
* add a "Time" label to the time selectors. On desktop,
  this isn't entirely necessary because they have clock icons
  and "hh:mm:ss" annotations. But on mobile, they were entirely blank,
  so it was unclear what they were for.

ui/src/List/TimerangeSelector.tsx

@@ -16,6 +16,7 @@ import FormLabel from "@material-ui/core/FormLabel";
 import Radio from "@material-ui/core/Radio";
 import RadioGroup from "@material-ui/core/RadioGroup";
 import TimePicker, { TimePickerProps } from "@material-ui/lab/TimePicker";
+import Collapse from "@material-ui/core/Collapse";
 
 interface Props {
   selectedStreams: Set<Stream>;
@@ -28,6 +29,7 @@ const MyTimePicker = (
   props: Pick<TimePickerProps, "value" | "onChange" | "disabled">
 ) => (
   <TimePicker
+    label="Time"
     views={["hours", "minutes", "seconds"]}
     renderInput={(params) => <TextField size="small" {...params} />}
     inputFormat="HH:mm:ss"
@@ -307,6 +309,7 @@ const TimerangeSelector = ({
             label="Other day"
           />
         </RadioGroup>
+        <Collapse in={days.endType === "other-day"}>
           <StaticDatePicker
             displayStaticWrapperAs="desktop"
             value={endDate}
@@ -320,8 +323,11 @@ const TimerangeSelector = ({
             onChange={(d: Date | null) => {
               updateDays({ op: "set-end-day", newEndDate: d! });
             }}
-          renderInput={(params) => <TextField {...params} variant="outlined" />}
+            renderInput={(params) => (
+              <TextField {...params} variant="outlined" />
+            )}
           />
+        </Collapse>
         <MyTimePicker
           value={endTime}
           onChange={(newValue) => {