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/history/IpDetailView.tsx

@@ -67,6 +67,24 @@ const useStyles = makeStyles({
     borderRadius: tokens.borderRadiusMedium,
     border: `1px solid ${tokens.colorNeutralStroke1}`,
   },
+  loadingContainer: {
+    display: "flex",
+    justifyContent: "center",
+    padding: tokens.spacingVerticalXL,
+  },
+  headerControls: {
+    display: "flex",
+    alignItems: "center",
+    gap: tokens.spacingHorizontalM,
+  },
+  dimmedText: {
+    color: tokens.colorNeutralForeground3,
+  },
+  monoPreformatted: {
+    fontFamily: "Consolas, 'Courier New', monospace",
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-all",
+  },
 });
 
 export function IpDetailView({ ip, onBack }: IpDetailViewProps): React.JSX.Element {
@@ -76,7 +94,7 @@ export function IpDetailView({ ip, onBack }: IpDetailViewProps): React.JSX.Eleme
 
   if (loading) {
     return (
-      <div style={{ display: "flex", justifyContent: "center", padding: tokens.spacingVerticalXL }}>
+      <div className={styles.loadingContainer}>
         <Spinner label={`Loading history for ${ip}…`} />
       </div>
     );
@@ -101,7 +119,7 @@ export function IpDetailView({ ip, onBack }: IpDetailViewProps): React.JSX.Eleme
   return (
     <div className={styles.root}>
       <div className={styles.header}>
-        <div style={{ display: "flex", alignItems: "center", gap: tokens.spacingHorizontalM }}>
+        <div className={styles.headerControls}>
           <Button icon={<ArrowLeftRegular />} appearance="subtle" onClick={onBack}>
             Back to list
           </Button>
@@ -176,17 +194,13 @@ export function IpDetailView({ ip, onBack }: IpDetailViewProps): React.JSX.Eleme
                 <TableCell>
                   <TableCellLayout>
                     {event.matches.length === 0 ? (
-                      <Text size={200} style={{ color: tokens.colorNeutralForeground3 }}>
+                      <Text size={200} className={styles.dimmedText}>
                         —
                       </Text>
                     ) : (
                       <Text
                         size={100}
-                        style={{
-                          fontFamily: "Consolas, 'Courier New', monospace",
-                          whiteSpace: "pre-wrap",
-                          wordBreak: "break-all",
-                        }}
+                        className={styles.monoPreformatted}
                       >
                         {event.matches.join("\n")}
                       </Text>