fix: table styling for cloud project custom domains

Author: tylandavis

src/app/(frontend)/(cloud)/cloud/[team-slug]/[project-slug]/(tabs)/settings/domains/ManageDomain/index.module.scss

@@ -35,22 +35,29 @@
   color: var(--theme-text);
 }
 
+.tableContainer {
+  position: relative;
+  overflow: scroll;
+}
+
 .record {
-  width: 100%;
+  min-width: 100%;
+  overflow: scroll;
   background: var(--theme-elevation-100);
   padding: 1rem;
 
   th,
   td {
     padding-right: 0.5rem;
     vertical-align: top;
+    min-width: 100px;
   }
 
   th {
-    @include label;
+    @include small;
     & {
       font-weight: normal;
-      font-family: var(--font-geist-mono);
+      color: var(--theme-elevation-600);
       text-align: left;
       padding: 0.25rem 0.5rem;
     }
@@ -61,6 +68,13 @@
     padding: 0 0.5rem;
     white-space: nowrap;
     color: var(--theme-text);
+
+    & span {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      margin-right: 2rem;
+    }
   }
 }
 

src/app/(frontend)/(cloud)/cloud/[team-slug]/[project-slug]/(tabs)/settings/domains/ManageDomain/index.tsx

@@ -2,6 +2,7 @@ import type { Project, Team } from '@root/payload-cloud-types.js'
 
 import { Accordion } from '@components/Accordion/index.js'
 import { Button } from '@components/Button/index.js'
+import { CopyToClipboard } from '@components/CopyToClipboard'
 import { Heading } from '@components/Heading/index.js'
 import { ModalWindow } from '@components/ModalWindow/index.js'
 import { useModal } from '@faceless-ui/modal'
@@ -87,22 +88,34 @@ export const ManageDomain: React.FC<Props> = ({ domain, environmentSlug, project
       >
         <div className={classes.domainContent}>
           <p>Add the following record to your DNS provider:</p>
-          <table className={classes.record}>
-            <thead>
-              <tr>
-                <th>Type</th>
-                <th>Name</th>
-                <th>Content</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>{recordType}</td>
-                <td>{recordName}</td>
-                <td>{recordContent}</td>
-              </tr>
-            </tbody>
-          </table>
+          <div className={classes.tableContainer}>
+            <table className={classes.record}>
+              <thead>
+                <tr>
+                  <th>Type</th>
+                  <th>Name</th>
+                  <th>Content</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>{recordType}</td>
+                  <td>
+                    <span>
+                      {recordName}
+                      {recordName && <CopyToClipboard value={recordName} />}
+                    </span>
+                  </td>
+                  <td>
+                    <span>
+                      {recordContent}
+                      {recordContent && <CopyToClipboard value={recordContent} />}
+                    </span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
           <div className={classes.domainActions}>
             <div className={classes.rightActions}>
               <Button appearance="danger" label="Delete" onClick={() => openModal(modalSlug)} />

src/app/(frontend)/(cloud)/cloud/[team-slug]/[project-slug]/(tabs)/settings/email/ManageEmailDomain/index.module.scss

@@ -42,15 +42,15 @@
 
 .records {
   display: block;
-  background: var(--theme-elevation-50);
+  background: var(--theme-elevation-100);
   padding: 1rem;
   overflow: auto;
 
   th {
-    @include h6;
+    @include small;
     & {
       font-weight: normal;
-      font-family: var(--font-geist-mono);
+      color: var(--theme-elevation-600);
       text-align: left;
       padding: 0.25rem 0.5rem;
     }
@@ -65,12 +65,13 @@
     span {
       display: inline-block;
       vertical-align: middle;
+      margin-right: 2rem;
     }
 
     button {
       display: inline-block;
       vertical-align: middle;
-      margin-right: 0.25rem;
+      margin-right: 1rem;
 
       span {
         width: 0;
@@ -87,10 +88,7 @@
   }
 
   .recordName {
-    width: 11em;
-
     & > span {
-      width: 9em;
       overflow: hidden;
       text-overflow: ellipsis;
       word-break: keep-all;

src/app/(frontend)/(cloud)/cloud/[team-slug]/[project-slug]/(tabs)/settings/email/ManageEmailDomain/index.tsx

@@ -11,6 +11,7 @@ import { Secret } from '@forms/fields/Secret/index.js'
 import { ExternalLinkIcon } from '@root/icons/ExternalLinkIcon/index.js'
 import { qs } from '@root/utilities/qs.js'
 import Link from 'next/link'
+import { useRouter } from 'next/navigation'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import * as React from 'react'
 import { toast } from 'sonner'
@@ -42,6 +43,7 @@ export const ManageEmailDomain: React.FC<Props> = ({
   const projectID = project?.id
   const projectEmailDomains = project?.customEmailDomains
   const hasInitialized = useRef(false)
+  const router = useRouter()
 
   const getDomainVerificationStatus = useCallback(
     async (domainId: string) => {
@@ -119,7 +121,7 @@ export const ManageEmailDomain: React.FC<Props> = ({
 
         if (req.status === 200) {
           const res = await req.json()
-          // reloadProject()
+          router.refresh()
           return res
         }
       } catch (e) {
@@ -154,7 +156,7 @@ export const ManageEmailDomain: React.FC<Props> = ({
 
         if (req.status === 200) {
           const res = await req.json()
-          // reloadProject()
+          router.refresh()
           toast.success(res.message)
         }
       } catch (e) {