fix invisible labels on settings screen, add helpful copy (#39)

I'm not sure why, but the Material labels aren't displaying on the
Settings screen before the inputs go into Shrink mode. To avoid the very
confusing experience of unlabeled inputs, put them in shrink mode
permanenently; all that's lost here is the cute mui animation where the
field label jumps up to the position above the input.

Also, add some copy and styling to (hopefully) help the user understand
the options available more easily.

Before:

![image](https://user-images.githubusercontent.com/3943358/226486535-fe5d88ae-cf84-4550-88ab-015ab49b8a75.png)

After:
<img width="700" alt="image"
src="https://user-images.githubusercontent.com/3943358/226486507-6affba55-2055-47a3-b7fa-06844f919847.png">

ui/src/views/agent/components/SettingsDialog.tsx

@@ -1,4 +1,5 @@
 import {
+  Box,
   Button,
   Container,
   Dialog,
@@ -8,6 +9,7 @@ import {
   MenuItem,
   Stack,
   TextField,
+  Typography,
 } from "@mui/material";
 import React, { useEffect, useState } from "react";
 import { AgentConfig } from "../../../data/queries/agent-config";
@@ -124,6 +126,7 @@ export const SettingsDialog = ({
           <Stack justifyContent={"center"} alignItems={"center"} spacing={3}>
             <TextField
               required
+              InputLabelProps={{ shrink: true }}
               label={"Project"}
               value={input.projectName}
               name={"projectName"}
@@ -133,43 +136,61 @@ export const SettingsDialog = ({
               type={"text"}
               select
               onChange={handleInputChange}
+              helperText={"The Akita project to send traffic data to."}
+              FormHelperTextProps={{ sx: { fontSize: "9px" } }}
             >
               {services.map((service) => (
                 <MenuItem key={service.name} value={service.name}>
                   {service.name}
                 </MenuItem>
               ))}
             </TextField>
-            <TextField
-              label={"Target Port"}
-              name={"targetPort"}
-              value={input.targetPort}
-              variant={"standard"}
-              fullWidth
-              margin={"normal"}
-              type={"number"}
-              onChange={handleInputChange}
-            />
-            <TextField
-              label={"Target Container"}
-              name={"targetContainer"}
-              margin={"normal"}
-              variant={"standard"}
-              fullWidth
-              type={"text"}
-              value={input.targetContainer}
-              select
-              onChange={handleInputChange}
-            >
-              <MenuItem key={"none"} value={""}>
-                <em>None</em>
-              </MenuItem>
-              {containers.map((container) => (
-                <MenuItem key={container.Id} value={container.Id}>
-                  {fixContainerName(container.Names[0])}
+            <Box sx={{ width: "100%", display: "flex", justifyContent: "space-between" }}>
+              <TextField
+                label={"Container to monitor"}
+                name={"targetContainer"}
+                InputLabelProps={{ shrink: true }}
+                variant={"standard"}
+                fullWidth
+                placeholder="All containers"
+                type={"text"}
+                value={input.targetContainer}
+                sx={{ marginRight: 1 }}
+                select
+                onChange={handleInputChange}
+                helperText={"Leave blank to monitor entire network."}
+                FormHelperTextProps={{ sx: { fontSize: "9px" } }}
+              >
+                <MenuItem key={"none"} value={""}>
+                  <em>All containers</em>
                 </MenuItem>
-              ))}
-            </TextField>
+                {containers.map((container) => (
+                  <MenuItem key={container.Id} value={container.Id}>
+                    {fixContainerName(container.Names[0])}
+                  </MenuItem>
+                ))}
+              </TextField>
+              <Typography variant="h4" sx={{ paddingTop: 2 }}>
+                :
+              </Typography>
+              <TextField
+                id="target-port"
+                label={"Target port"}
+                InputLabelProps={{ shrink: true }}
+                name={"targetPort"}
+                value={input.targetPort}
+                InputProps={{
+                  inputProps: { min: 1, max: 65535 },
+                }}
+                variant={"standard"}
+                fullWidth
+                type={"number"}
+                sx={{ marginLeft: 1 }}
+                onChange={handleInputChange}
+                helperText={"Number between 1 and 65535. Leave blank to monitor all ports."}
+                FormHelperTextProps={{ sx: { fontSize: "9px" } }}
+              />
+            </Box>
           </Stack>
         </DialogContent>
         <DialogActions>