ds verifier table (#2649)

Author: khadni

src/features/feeds/components/Tables.module.css

@@ -65,10 +65,6 @@
   margin-bottom: 4px;
 }
 
-.assetName {
-  min-width: 150px;
-}
-
 .assetAddress {
   display: flex;
   align-items: center;
@@ -134,10 +130,6 @@
   margin: 0;
 }
 
-.label {
-  text-align: left;
-}
-
 .pagination {
   display: flex;
   margin: 8px 0px 0px;
@@ -204,6 +196,7 @@
   background: var(--active-background);
 }
 
+/* Context 1: card header info */
 .networkInfo {
   display: flex;
   align-items: center;
@@ -257,6 +250,7 @@
   text-decoration: underline;
 }
 
+/* Generic table tweaks (once) */
 .table td {
   text-align: center;
 }
@@ -313,3 +307,302 @@
   width: 100%;
   text-align: left;
 }
+
+/* Compact & full networks table */
+.compactNetworksTable {
+  width: 100%;
+  margin: 0 auto 2rem;
+  overflow-x: auto;
+  border: 1px solid var(--border-color, #e5e7eb);
+  border-radius: 4px;
+}
+
+.networksTable {
+  width: 100%;
+  border-collapse: collapse !important;
+  font-size: 0.875rem;
+  margin-bottom: 0;
+  table-layout: fixed !important;
+}
+
+.networksTable,
+.networksTable tr,
+.networksTable td {
+  border: none;
+  border-collapse: collapse;
+}
+
+.networksTable th {
+  background-color: var(--color-background-tertiary, #f5f9ff);
+  text-align: left;
+  font-weight: var(--font-weight-medium, 500);
+  border: none;
+  border-bottom: 1px solid var(--border-color, #e5e7eb);
+  color: var(--color-text-heading, #111827);
+  padding: 0.75rem 1rem !important;
+}
+
+.networksTable td {
+  border: none !important;
+  vertical-align: middle;
+  word-break: break-word;
+  text-align: left;
+  padding: 0.75rem 1rem !important;
+}
+
+tr.firstNetworkRow td {
+  border-top: 1px solid var(--color-border-secondary, #e5e7eb) !important;
+}
+
+.networkColumn {
+  width: 24%;
+  min-width: 90px;
+  padding-left: 1rem !important;
+}
+
+.environmentColumn {
+  width: 28%;
+}
+
+.addressColumn {
+  width: 48%;
+  padding-left: 1rem !important;
+}
+
+/* Context 2: table-cell info */
+.networkInfo {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  overflow: hidden;
+}
+
+.networkInfo img {
+  width: 22px;
+  height: 22px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+.networkInfo span {
+  font-weight: 500;
+  color: var(--color-text-heading, #111827);
+  white-space: normal;
+  word-break: break-word;
+  font-size: 0.95rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+tr.statusRow td {
+  padding: 0.5rem 1rem !important;
+  background-color: transparent;
+  text-align: right !important;
+  border-top: none;
+  border-bottom: none;
+}
+
+.statusCell {
+  padding-top: 0 !important;
+}
+
+.statusLink {
+  color: var(--color-text-link, #2563eb);
+  font-size: 0.75rem;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+}
+
+.statusLink:hover {
+  text-decoration: underline;
+}
+
+.compactAddressContainer {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-family: monospace;
+  font-size: 0.75rem;
+  max-width: 100%;
+  background: transparent;
+  padding: 0;
+  border-radius: 3px;
+  border: none;
+  width: 100%;
+}
+
+.compactAddressLink {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--color-text-link, #2563eb);
+  text-decoration: none;
+  line-height: 1.4;
+  background: var(--color-background-secondary, #f8f9fa);
+  padding: 0.25rem 0.375rem;
+  border-radius: 3px;
+  display: inline-block;
+  max-width: calc(100% - 24px);
+}
+
+.mt1 {
+  margin-top: 0.5rem;
+}
+
+.testnetRow {
+  background-color: transparent !important;
+}
+
+@media (max-width: 768px) {
+  .networksTable {
+    font-size: 0.75rem;
+    white-space: normal;
+  }
+
+  .networksTable th:nth-child(1) {
+    width: 22% !important;
+  }
+
+  .networksTable th:nth-child(2) {
+    width: 28% !important;
+  }
+
+  .networksTable th:nth-child(3) {
+    width: 50% !important;
+  }
+
+  .networksTable th,
+  .networksTable td {
+    padding: 0.5rem !important;
+  }
+
+  .networkColumn {
+    width: 22% !important;
+    min-width: 70px;
+  }
+
+  .networksTable td:nth-child(2) {
+    width: 28% !important;
+    min-width: 60px;
+    font-size: 0.7rem;
+    color: var(--color-text-secondary, #6b7280);
+    padding-right: 0.5rem !important;
+  }
+
+  .addressColumn {
+    width: 50% !important;
+    min-width: 150px;
+  }
+
+  .networkInfo img {
+    width: 16px;
+    height: 16px;
+  }
+
+  .networkInfo {
+    gap: 0.4rem;
+  }
+
+  .networkInfo span {
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1.2;
+    max-width: calc(100% - 20px);
+  }
+
+  .compactAddressContainer {
+    font-size: 0.75rem;
+  }
+
+  .compactAddressLink {
+    font-size: 0.75rem;
+  }
+
+  .addressLabel {
+    font-size: 0.65rem;
+    margin-bottom: 0.125rem;
+  }
+
+  tr.statusRow td {
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.5rem !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .networksTable th:nth-child(1) {
+    width: 24% !important;
+  }
+
+  .networksTable th:nth-child(2) {
+    width: 26% !important;
+  }
+
+  .networksTable th:nth-child(3) {
+    width: 50% !important;
+  }
+
+  .networksTable th {
+    font-size: 0.7rem;
+    white-space: nowrap;
+    padding: 0.5rem 0.35rem !important;
+  }
+
+  .networksTable td {
+    padding: 0.5rem 0.35rem !important;
+  }
+
+  .networkColumn {
+    width: 24% !important;
+    min-width: 60px;
+    padding-left: 0.35rem !important;
+  }
+
+  .networksTable td:nth-child(2) {
+    width: 26% !important;
+    min-width: 50px;
+    padding-right: 0.35rem !important;
+  }
+
+  .addressColumn {
+    width: 50% !important;
+    padding-left: 0.35rem !important;
+  }
+
+  .compactAddressContainer {
+    max-width: 100%;
+  }
+
+  .compactAddressLink {
+    font-size: 0.7rem;
+    padding: 0.2rem 0.25rem;
+    max-width: calc(100% - 20px);
+    white-space: normal;
+    overflow: hidden;
+    word-break: break-all;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+
+  .networkInfo img {
+    width: 14px;
+    height: 14px;
+  }
+
+  .networkInfo {
+    gap: 0.3rem;
+  }
+
+  .networkInfo span {
+    font-size: 0.7rem;
+  }
+}
+
+.addressLabel {
+  display: block;
+  font-size: 0.7rem;
+  color: var(--color-text-secondary, #6b7280);
+  margin-bottom: 0.25rem;
+}