ignore: cloud payment history

1 files changed, 62 insertions, 22 deletions

diff --git a/cloud/app/src/routes/workspace/index.css b/cloud/app/src/routes/workspace/index.css
index 90ef8ccaf..6746313e3 100644
--- a/cloud/app/src/routes/workspace/index.css
+++ b/cloud/app/src/routes/workspace/index.css
@@ -279,34 +279,74 @@ a {
 
 /* Payments Section */
 [data-slot="payments-section"] {
-  [data-slot="payments-list"] {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
+  [data-slot="payments-table"] {
+    overflow-x: auto;
   }
 
-  [data-slot="payment-item"] {
-    display: flex;
-    align-items: center;
-    gap: var(--space-4);
-    padding: var(--space-3);
-    background-color: var(--color-bg-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--border-radius-sm);
+  [data-slot="payments-table-element"] {
+    width: 100%;
+    border-collapse: collapse;
     font-size: var(--font-size-sm);
-    font-family: var(--font-mono);
 
-    @media (max-width: 30rem) {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: var(--space-2);
+    thead {
+      border-bottom: 1px solid var(--color-border);
     }
-  }
 
-  [data-slot="payment-id"],
-  [data-slot="payment-amount"],
-  [data-slot="payment-date"] {
-    color: var(--color-text-muted);
+    th {
+      padding: var(--space-3) var(--space-4);
+      text-align: left;
+      font-weight: 600;
+      color: var(--color-text-secondary);
+    }
+
+    td {
+      padding: var(--space-3) var(--space-4);
+      border-bottom: 1px solid var(--color-border-muted);
+      color: var(--color-text-muted);
+      font-family: var(--font-mono);
+
+      &[data-slot="payment-date"] {
+        color: var(--color-text);
+      }
+
+      &[data-slot="payment-id"] {
+        font-family: var(--font-mono);
+        font-weight: 400;
+        color: var(--color-text-muted);
+        max-width: 200px;
+        word-break: break-word;
+      }
+
+      &[data-slot="payment-amount"] {
+        color: var(--color-text);
+      }
+    }
+
+    tbody tr {
+      &:last-child td {
+        border-bottom: none;
+      }
+    }
+
+    @media (max-width: 40rem) {
+      th,
+      td {
+        padding: var(--space-2) var(--space-3);
+        font-size: var(--font-size-xs);
+      }
+
+      th {
+        &:nth-child(2) /* Payment ID */ {
+          display: none;
+        }
+      }
+
+      td {
+        &:nth-child(2) /* Payment ID */ {
+          display: none;
+        }
+      }
+    }
   }
 }