improve end reason in list ui

* in backend, save the full reason, not just the most direct error,
  which is often the useless `UNKNOWN`

* in UI, instead of wrapping in `<Typography>` which just resorts in
  a weird ransom-note mixed size look, reserve space for or actually
  use an icon.

server/src/streamer.rs

@@ -204,7 +204,7 @@ where
             let frame = match frame {
                 Ok(f) => f,
                 Err(e) => {
-                    let _ = w.close(None, Some(e.to_string()));
+                    let _ = w.close(None, Some(e.chain().to_string()));
                     return Err(e);
                 }
             };

ui/src/List/VideoList.tsx

@@ -12,7 +12,8 @@ import TableRow, { TableRowProps } from "@mui/material/TableRow";
 import Skeleton from "@mui/material/Skeleton";
 import Alert from "@mui/material/Alert";
 import Tooltip from "@mui/material/Tooltip";
-import Typography from "@mui/material/Typography";
+import ErrorIcon from "@mui/icons-material/Error";
+import Icon from "@mui/material/Icon";
 
 interface Props {
   stream: Stream;
@@ -153,12 +154,15 @@ const Row = ({
   <TableRow {...rest}>
     <TableCell align="right">{start}</TableCell>
     <TableCell align="right">
+      {end}
       {endReason !== undefined ? (
         <Tooltip title={endReason}>
-          <Typography>{end}</Typography>
+          <Icon sx={{ verticalAlign: "bottom", marginLeft: ".5em" }}>
+            <ErrorIcon />
+          </Icon>
         </Tooltip>
       ) : (
-        end
+        <Icon sx={{ verticalAlign: "bottom", marginLeft: ".5em" }} />
       )}
     </TableCell>
     <TableCell align="right" className="opt">