feat: add tooltip for held packages

frontend/src/components/table/StatusCell.tsx

@@ -18,7 +18,7 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import PauseCircleIcon from "@mui/icons-material/PauseCircle";
-import { Chip } from "@mui/material";
+import { Chip, Tooltip } from "@mui/material";
 import type { BuildStatus } from "models/BuildStatus";
 import type React from "react";
 import { StatusColors } from "theme/StatusColors";
@@ -29,14 +29,17 @@ interface StatusCellProps {
 }
 
 export default function StatusCell({ isHeld, status }: StatusCellProps): React.JSX.Element {
-    return <Chip
+    return <Tooltip title={isHeld ? "Held: automatic updates are skipped" : ""}>
-        icon={isHeld ? <PauseCircleIcon /> : undefined}
+        <Chip
-        label={status}
+            aria-label={isHeld ? `${status}; held: automatic updates are skipped` : status}
-        size="small"
+            icon={isHeld ? <PauseCircleIcon /> : undefined}
-        sx={{
+            label={status}
-            backgroundColor: StatusColors[status],
+            size="small"
-            color: "common.white",
+            sx={{
-            fontWeight: 500,
+                backgroundColor: StatusColors[status],
-        }}
+                color: "common.white",
-    />;
+                fontWeight: 500,
+            }}
+        />
+    </Tooltip>;
 }