Refactor: Replace inline style objects with makeStyles classes

Moved all static layout properties (display, gap, margin, padding, colour)
from inline style props to makeStyles classes in:

- MapBansTable.tsx: Pagination row flexbox layout
- JailDetailPage.tsx: Link styling for textDecoration
- HistoryPage.tsx: Summary text styling
- IpDetailView.tsx: Loading container and text formatting

Kept inline styles only for genuinely dynamic values:
- WorldMap.tsx: Tooltip position (follows mouse)
- TopCountriesPieChart.tsx: Legend color (from recharts data)
- TopCountriesBarChart.tsx: Chart height (derives from data length)

This change improves performance by leveraging Griffel's atomic CSS cache
and ensures consistency with the established Fluent UI pattern.

Updated Docs/Web-Development.md with explicit rule: inline styles only
for runtime-dynamic values, all static properties go in makeStyles.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

frontend/src/pages/JailDetailPage.tsx

@@ -5,7 +5,7 @@
  * identified by the `:name` route parameter.
  */
 
-import { Button, MessageBar, MessageBarBody, Spinner, Text } from "@fluentui/react-components";
+import { Button, MessageBar, MessageBarBody, Spinner, Text, makeStyles } from "@fluentui/react-components";
 import { ArrowLeftRegular } from "@fluentui/react-icons";
 import { Link, useParams } from "react-router-dom";
 import { useJailData } from "../hooks/useJailData";
@@ -18,7 +18,14 @@ import { BantimeEscalationSection } from "../components/jail/BantimeEscalationSe
 import { IgnoreListSection } from "../components/jail/IgnoreListSection";
 import { useJailDetailPageStyles } from "../components/jail/jailDetailPageStyles";
 
+const useLinkStyles = makeStyles({
+  link: {
+    textDecoration: "none",
+  },
+});
+
 export function JailDetailPage(): React.JSX.Element {
+  const linkStyles = useLinkStyles();
   const styles = useJailDetailPageStyles();
   const { name = "" } = useParams<{ name: string }>();
   const { jail, ignoreList, ignoreSelf, loading, error, refresh } = useJailData(name);
@@ -50,7 +57,7 @@ export function JailDetailPage(): React.JSX.Element {
   if (error) {
     return (
       <div className={styles.root}>
-        <Link to="/jails" style={{ textDecoration: "none" }}>
+        <Link to="/jails" className={linkStyles.link}>
           <Button appearance="subtle" icon={<ArrowLeftRegular />}>
             Back to Jails
           </Button>
@@ -67,7 +74,7 @@ export function JailDetailPage(): React.JSX.Element {
   return (
     <div className={styles.root}>
       <div className={styles.breadcrumb}>
-        <Link to="/jails" style={{ textDecoration: "none" }}>
+        <Link to="/jails" className={linkStyles.link}>
           <Button appearance="subtle" size="small" icon={<ArrowLeftRegular />}>
             Jails
           </Button>