Improve the mobile css (#180)

* Better calendar css

* Change day of month to be zero-padded

* Fix list page and settings page

On the List page:
- Timespans now can collapse when the page is < 550px in width
- Moved the notes button to the far right side

On settings page:
- Removed the min width, this makes it fit nicely on mobile

- Made the chips possible to go onto multiple lines, since otherwise
long tag names would overflow (even on desktop)

* Further improve list page

The changes here also improve the calendar when you click on a timespan.
Previously it would be offscreen on my phone, and impossible to click
the 3 dots to show more.

* Remove min width on the other pages

This doesn't full fix the sizing, but it helps greatly and should be
good enough. I cannot think of any better way of improving these pages
for mobile.

* Reorder the time picker layout; Open picker in dialog

* Move notes button into menu; Move 3 dots into top right

* Fix shifted label; Removed unused stuff

* Fix lint error

Author: Minnowo

ui/src/common/DateTimeSelector.tsx

@@ -21,10 +21,11 @@ export const DateTimeSelector: React.FC<DateTimeSelectorProps> = React.memo(
 
         return (
             <KeyboardDateTimePicker
-                variant="inline"
+                className="time-picker"
+                variant="dialog"
                 InputProps={{disableUnderline: true}}
                 title={selectedDate.format()}
-                style={{width: (showDate ? 185 : 95) + (ampm ? 20 : 0)}}
+                style={{width: (showDate ? 185 : 105) + (ampm ? 20 : 0)}}
                 PopoverProps={{
                     onEntered: () => {
                         popoverOpen(true);

ui/src/common/TagChip.tsx

@@ -9,7 +9,15 @@ export const TagChip = ({color, label}: {label: string; color: string}) => {
         <Chip
             tabIndex={-1}
             variant="outlined"
-            style={{background: color, margin: '5px', color: textColor, cursor: 'text'}}
+            style={{
+                background: color,
+                margin: '5px',
+                color: textColor,
+                cursor: 'text',
+                minHeight: '32px',
+                whiteSpace: 'normal',
+                wordBreak: 'break-word',
+            }}
             label={label}
         />
     );

ui/src/dashboard/DashboardsPage.tsx

@@ -30,7 +30,6 @@ const useStyles = makeStyles((theme) => ({
         paddingBottom: theme.spacing(3),
         textAlign: 'center',
         maxWidth: 800,
-        minWidth: 500,
         margin: '0 auto',
     },
 }));

ui/src/devices/DevicesPage.tsx

@@ -34,7 +34,6 @@ const useStyles = makeStyles((theme) => ({
         paddingBottom: theme.spacing(3),
         textAlign: 'center',
         maxWidth: 1200,
-        minWidth: 800,
         margin: '0 auto',
     },
 }));

ui/src/global.css

@@ -3,3 +3,35 @@ body,
 html {
     height: 100%;
 }
+
+/* Allows the tag Chips to wrap lines */
+.MuiChip-label {
+    white-space: normal !important;
+}
+
+/* The wrapping box around the input and icon for the datetime picker */
+.time-picker .MuiInputBase-root.MuiInput-root.MuiInputBase-formControl.MuiInput-formControl.MuiInputBase-adornedEnd {
+    margin-top: 0;
+}
+
+/* The calendar icon for the datetime picker */
+.time-picker
+    .MuiInputBase-root.MuiInputBase-formControl.MuiInputBase-adornedEnd
+    .MuiInputAdornment-root.MuiInputAdornment-positionEnd
+    .MuiButtonBase-root.MuiIconButton-root {
+    position: absolute;
+    left: 0;
+}
+
+/* The label for the datetime picker */
+.time-picker.MuiFormControl-root.MuiTextField-root .MuiFormLabel-root.MuiInputLabel-root.MuiInputLabel-formControl {
+    margin-left: 48px;
+}
+
+/* The input box for the datetime picker */
+.time-picker.MuiFormControl-root.MuiTextField-root .MuiInputBase-input.MuiInput-input.MuiInputBase-inputAdornedEnd {
+    margin-left: 48px;
+    /* margin-top: 8px; */
+    margin-top: 12px;
+    min-width: calc(100% - 48px);
+}

ui/src/setting/SettingsPage.tsx

@@ -17,7 +17,6 @@ const useStyles = makeStyles((theme) => ({
         paddingTop: theme.spacing(1),
         paddingBottom: theme.spacing(3),
         maxWidth: 500,
-        minWidth: 500,
         margin: '0 auto',
     },
 }));

ui/src/tag/TagPage.tsx

@@ -34,7 +34,6 @@ const useStyles = makeStyles((theme) => ({
         paddingBottom: theme.spacing(3),
         textAlign: 'center',
         maxWidth: 1200,
-        minWidth: 800,
         margin: '0 auto',
     },
 }));

ui/src/tag/TagSelector.tsx

@@ -138,7 +138,7 @@ export const TagSelector: React.FC<TagSelectorProps> = ({
 
     return (
         <ClickAwayListener onClickAway={() => setOpen(false)}>
-            <div>
+            <div style={{width: '100%'}}>
                 <Tooltip
                     disableFocusListener
                     disableHoverListener
@@ -152,7 +152,7 @@ export const TagSelector: React.FC<TagSelectorProps> = ({
                     }>
                     <div
                         ref={(ref) => (container.current = ref)}
-                        style={{display: 'flex', flexWrap: 'wrap', cursor: 'text'}}
+                        style={{display: 'flex', flexWrap: 'wrap', cursor: 'text', width: '100%'}}
                         onClick={focusInput}>
                         {toChips(selectedEntries)}
                         <Input