Updated styles and structure for history table and navigation

Refactored the history buttons to include click handlers in the outer div for better clarity and functionality. Improved the table styling in the history component by adding consistent padding, fixing column widths, and ensuring text overflow handling. Added new CSS variables for table header colors to enhance theming consistency.

frontend/src/app/bans/history/history.component.scss

@@ -1,6 +1,7 @@
 table {
   width: 100%;
   table-layout: fixed;
+  border-collapse: collapse;
 }
 
 thead {
@@ -23,6 +24,35 @@ th {
 
 th, td {
   text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 5px 0 8px 0;
+  box-sizing: border-box;
+}
+
+th.historyType, td.historyType {
+  width: 100px !important;
+  min-width: 100px;
+  max-width: 100px;
+  white-space: nowrap;
+}
+
+th.historyPlayer, td.historyPlayer {
+  width: 180px !important;
+  min-width: 180px;
+  max-width: 180px;
+}
+
+th.historyReason, td.historyReason {
+  width: 540px !important;
+  min-width: 540px;
+  max-width: 540px;
+}
+
+th.historyDate, td.historyDate {
+  width: 150px !important;
+  min-width: 150px;
+  max-width: 150px;
 }
 
 table tr td {
@@ -30,10 +60,12 @@ table tr td {
 }
 
 .historyType {
-  width: 100px;
+  max-width: 100%;
+  width: 80px;
 }
 
 .historyPlayer {
+  max-width: 100%;
   width: 200px;
   text-overflow: clip;
 }
@@ -59,9 +91,12 @@ img {
 }
 
 .historyReason {
-  width: 920px;
+  width: 650px;
 }
 
 .historyDate {
   width: 170px;
 }
+
+.changePageButtons {
+}