From 2e39776d0aa202b551717fdb402f30878315a878 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 16 Nov 2023 22:54:27 +0200
Subject: [PATCH] feat: make entire table responsive

---
 .../ValidatorManagement.tsx                   |  1 +
 .../validatorManagement.css                   | 63 +++++++++++++++++++
 2 files changed, 64 insertions(+)
 create mode 100644 src/pages/ValidatorManagement/validatorManagement.css

diff --git a/src/pages/ValidatorManagement/ValidatorManagement.tsx b/src/pages/ValidatorManagement/ValidatorManagement.tsx
index c57a7140..d7c32080 100644
--- a/src/pages/ValidatorManagement/ValidatorManagement.tsx
+++ b/src/pages/ValidatorManagement/ValidatorManagement.tsx
@@ -3,6 +3,7 @@ import { XStack } from 'tamagui'
 import ValidatorManagementContent from './ValidatorManagementContent'
 import LeftSidebar from '../../components/General/LeftSidebar/LeftSidebar'
 import RightSidebar from '../../components/General/RightSideBar/RightSidebar'
+import './ValidatorManagement.css'
 
 const ValidatorManagement = () => {
   return (
diff --git a/src/pages/ValidatorManagement/validatorManagement.css b/src/pages/ValidatorManagement/validatorManagement.css
new file mode 100644
index 00000000..64bd7b61
--- /dev/null
+++ b/src/pages/ValidatorManagement/validatorManagement.css
@@ -0,0 +1,63 @@
+/* Hide Effectiveness */
+@media (max-width: 1300px) {
+  th:nth-child(7),
+  td:nth-child(7) {
+    display: none;
+  }
+}
+
+/* Hide the Attestations */
+@media (max-width: 1200px) {
+  th:nth-child(6),
+  td:nth-child(6) {
+    display: none;
+  }
+}
+
+/* Hide the Proposals */
+@media (max-width: 1100px) {
+  th:nth-child(5),
+  td:nth-child(5) {
+    display: none;
+  }
+}
+
+/* Hide and show Proposals */
+@media (max-width: 900px) and (min-width: 800px) {
+  th:nth-child(5),
+  td:nth-child(5) {
+    display: table-cell;
+  }
+}
+
+/* Hide the Income */
+@media (max-width: 1000px) {
+  th:nth-child(4),
+  td:nth-child(4) {
+    display: none;
+  }
+}
+
+/* Hide and show Income */
+@media (max-width: 900px) and (min-width: 700px) {
+  th:nth-child(4),
+  td:nth-child(4) {
+    display: table-cell;
+  }
+}
+
+/* Hide Status */
+@media (max-width: 560px) {
+  th:nth-child(8),
+  td:nth-child(8) {
+    display: none;
+  }
+}
+
+/* Hide Balance */
+@media (max-width: 400px) {
+  th:nth-child(3),
+  td:nth-child(3) {
+    display: none;
+  }
+}