fix(web-ui): improve form field descriptions and align certificate settings with tile components

2026-04-12 19:42:07 +00:00
parent b582d44502
commit 2861511d20
15 changed files with 144 additions and 143 deletions
--- a/ts_web/elements/access/ops-view-apitokens.ts
+++ b/ts_web/elements/access/ops-view-apitokens.ts
@@ -222,7 +222,7 @@ export class OpsViewApiTokens extends DeesElement {
            .suggestions=${allScopes}
            .required=${true}
          ></dees-input-tags>
-          <dees-input-text .key=${'expiresInDays'} .label=${'Expires in (days, blank = never)'}></dees-input-text>
+          <dees-input-text .key=${'expiresInDays'} .label=${'Expires in'} .description=${'Number of days; leave blank for no expiration'}></dees-input-text>
        </dees-form>
      `,
      menuOptions: [
--- a/ts_web/elements/domains/dns-provider-form.ts
+++ b/ts_web/elements/domains/dns-provider-form.ts
@@ -80,22 +80,6 @@ export class DnsProviderForm extends DeesElement {
        margin-bottom: 12px;
      }

-      .helpText {
-        font-size: 12px;
-        opacity: 0.7;
-        margin-top: -6px;
-        margin-bottom: 8px;
-      }
-
-      .typeDescription {
-        font-size: 12px;
-        opacity: 0.8;
-        margin: 4px 0 16px;
-        padding: 8px 12px;
-        background: ${cssManager.bdTheme('#f3f4f6', '#1f2937')};
-        border-radius: 6px;
-      }
-
      .credentialsHint {
        font-size: 12px;
        opacity: 0.7;
@@ -130,6 +114,7 @@ export class DnsProviderForm extends DeesElement {
                <dees-input-text
                  .key=${'__type_display'}
                  .label=${'Type'}
+                  .infoText=${descriptor?.description || ''}
                  .value=${descriptor?.displayName ?? this.selectedType}
                  .disabled=${true}
                ></dees-input-text>
@@ -140,6 +125,7 @@ export class DnsProviderForm extends DeesElement {
                <dees-input-dropdown
                  .key=${'__type'}
                  .label=${'Provider type'}
+                  .infoText=${descriptor?.description || ''}
                  .options=${descriptors.map((d) => ({ option: d.displayName, key: d.type }))}
                  .selectedOption=${descriptor
                    ? { option: descriptor.displayName, key: descriptor.type }
@@ -158,7 +144,6 @@ export class DnsProviderForm extends DeesElement {
            `}
        ${descriptor
          ? html`
-              <div class="typeDescription">${descriptor.description}</div>
              ${this.credentialsHint
                ? html`<div class="credentialsHint">${this.credentialsHint}</div>`
                : ''}
@@ -168,9 +153,9 @@ export class DnsProviderForm extends DeesElement {
                    <dees-input-text
                      .key=${f.key}
                      .label=${f.label}
+                      .description=${f.helpText || ''}
                      .required=${f.required && !this.lockType}
                    ></dees-input-text>
-                    ${f.helpText ? html`<div class="helpText">${f.helpText}</div>` : ''}
                  </div>
                `,
              )}
--- a/ts_web/elements/domains/ops-view-certificates.ts
+++ b/ts_web/elements/domains/ops-view-certificates.ts
@@ -54,35 +54,31 @@ export class OpsViewCertificates extends DeesElement {
        gap: 24px;
      }

-      .acmeCard {
-        padding: 16px 20px;
-        background: ${cssManager.bdTheme('#f9fafb', '#111827')};
-        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#374151')};
-        border-radius: 8px;
-      }
-
-      .acmeCard.acmeCardEmpty {
-        background: ${cssManager.bdTheme('#fffbeb', '#1c1917')};
-        border-color: ${cssManager.bdTheme('#fde68a', '#78350f')};
-      }
-
-      .acmeCardHeader {
+      .acmeTileHeader {
        display: flex;
        justify-content: space-between;
        align-items: center;
-        margin-bottom: 12px;
+        width: 100%;
+        padding: 8px 12px;
      }

-      .acmeCardTitle {
+      .acmeTileHeading {
        font-size: 14px;
        font-weight: 600;
-        color: ${cssManager.bdTheme('#111827', '#f3f4f6')};
+      }
+
+      .acmeEmptyContent {
+        padding: 16px;
+        font-size: 13px;
+        line-height: 1.5;
+        color: ${cssManager.bdTheme('#78350f', '#fde68a')};
      }

      .acmeGrid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px 24px;
+        padding: 16px;
      }

      .acmeField {
@@ -103,13 +99,6 @@ export class OpsViewCertificates extends DeesElement {
        color: ${cssManager.bdTheme('#111827', '#f3f4f6')};
      }

-      .acmeEmptyHint {
-        margin: 0;
-        font-size: 13px;
-        line-height: 1.5;
-        color: ${cssManager.bdTheme('#78350f', '#fde68a')};
-      }
-
      .statusBadge {
        display: inline-flex;
        align-items: center;
@@ -226,41 +215,40 @@ export class OpsViewCertificates extends DeesElement {
      <dees-heading level="3">Certificates</dees-heading>

      <div class="certificatesContainer">
-        ${this.renderAcmeSettingsCard()}
        ${this.renderStatsTiles(summary)}
+        ${this.renderAcmeSettingsTile()}
        ${this.renderCertificateTable()}
      </div>
    `;
  }

-  private renderAcmeSettingsCard(): TemplateResult {
+  private renderAcmeSettingsTile(): TemplateResult {
    const config = this.acmeState.config;

    if (!config) {
      return html`
-        <div class="acmeCard acmeCardEmpty">
-          <div class="acmeCardHeader">
-            <span class="acmeCardTitle">ACME Settings</span>
+        <dees-tile .heading=${'ACME Settings'}>
+          <div slot="header" class="acmeTileHeader">
+            <span class="acmeTileHeading">ACME Settings</span>
            <dees-button
-              eventName="edit-acme"
              @click=${() => this.showEditAcmeDialog()}
              .type=${'highlighted'}
            >Configure</dees-button>
          </div>
-          <p class="acmeEmptyHint">
+          <div class="acmeEmptyContent">
            No ACME configuration yet. Click <strong>Configure</strong> to set up automated TLS
            certificate issuance via Let's Encrypt. You'll also need at least one DNS provider
            under <strong>Domains &gt; Providers</strong>.
-          </p>
-        </div>
+          </div>
+        </dees-tile>
      `;
    }

    return html`
-      <div class="acmeCard">
-        <div class="acmeCardHeader">
-          <span class="acmeCardTitle">ACME Settings</span>
-          <dees-button eventName="edit-acme" @click=${() => this.showEditAcmeDialog()}>Edit</dees-button>
+      <dees-tile>
+        <div slot="header" class="acmeTileHeader">
+          <span class="acmeTileHeading">ACME Settings</span>
+          <dees-button @click=${() => this.showEditAcmeDialog()}>Edit</dees-button>
        </div>
        <div class="acmeGrid">
          <div class="acmeField">
@@ -292,7 +280,7 @@ export class OpsViewCertificates extends DeesElement {
            <span class="acmeValue">${config.renewThresholdDays} days</span>
          </div>
        </div>
-      </div>
+      </dees-tile>
    `;
  }

@@ -317,7 +305,8 @@ export class OpsViewCertificates extends DeesElement {
          ></dees-input-checkbox>
          <dees-input-checkbox
            .key=${'useProduction'}
-            .label=${"Use Let's Encrypt production (uncheck for staging)"}
+            .label=${"Use Let's Encrypt production"}
+            .description=${'Uncheck to use the staging environment'}
            .value=${current?.useProduction ?? true}
          ></dees-input-checkbox>
          <dees-input-checkbox
@@ -327,7 +316,8 @@ export class OpsViewCertificates extends DeesElement {
          ></dees-input-checkbox>
          <dees-input-text
            .key=${'renewThresholdDays'}
-            .label=${'Renewal threshold (days)'}
+            .label=${'Renewal threshold'}
+            .description=${'Number of days before expiry to trigger renewal'}
            .value=${String(current?.renewThresholdDays ?? 30)}
          ></dees-input-text>
        </dees-form>
@@ -456,11 +446,12 @@ export class OpsViewCertificates extends DeesElement {
                content: html`
                  <dees-form>
                    <dees-input-fileupload
-                      key="certJsonFile"
-                      label="Certificate JSON (.tsclass.cert.json)"
-                      accept=".json"
+                      .key=${'certJsonFile'}
+                      .label=${'Certificate JSON'}
+                      .description=${'Upload a .tsclass.cert.json file'}
+                      .accept=${'.json'}
                      .multiple=${false}
-                      required
+                      .required=${true}
                    ></dees-input-fileupload>
                  </dees-form>
                `,
--- a/ts_web/elements/domains/ops-view-dns.ts
+++ b/ts_web/elements/domains/ops-view-dns.ts
@@ -101,8 +101,8 @@ export class OpsViewDns extends DeesElement {
      <dees-heading level="3">DNS Records</dees-heading>
      <div class="dnsContainer">
        <div class="domainPicker">
-          <span>Domain:</span>
          <dees-input-dropdown
+            .label=${'Domain'}
            .options=${domains.map((d) => ({ option: d.name, key: d.id }))}
            .selectedOption=${selectedId
              ? { option: domains.find((d) => d.id === selectedId)?.name || '', key: selectedId }
@@ -196,7 +196,7 @@ export class OpsViewDns extends DeesElement {
      heading: 'Add DNS Record',
      content: html`
        <dees-form>
-          <dees-input-text .key=${'name'} .label=${'Name (FQDN)'} .required=${true}></dees-input-text>
+          <dees-input-text .key=${'name'} .label=${'Name'} .description=${'Fully qualified domain name'} .required=${true}></dees-input-text>
          <dees-input-dropdown
            .key=${'type'}
            .label=${'Type'}
@@ -205,10 +205,11 @@ export class OpsViewDns extends DeesElement {
          ></dees-input-dropdown>
          <dees-input-text
            .key=${'value'}
-            .label=${'Value (for MX use "10 mail.example.com")'}
+            .label=${'Value'}
+            .description=${'For MX records use priority format, e.g. "10 mail.example.com"'}
            .required=${true}
          ></dees-input-text>
-          <dees-input-text .key=${'ttl'} .label=${'TTL (seconds)'} .value=${'300'}></dees-input-text>
+          <dees-input-text .key=${'ttl'} .label=${'TTL'} .description=${'Time to live in seconds'} .value=${'300'}></dees-input-text>
        </dees-form>
      `,
      menuOptions: [
@@ -242,9 +243,9 @@ export class OpsViewDns extends DeesElement {
      heading: `Edit ${rec.type} ${rec.name}`,
      content: html`
        <dees-form>
-          <dees-input-text .key=${'name'} .label=${'Name (FQDN)'} .value=${rec.name}></dees-input-text>
+          <dees-input-text .key=${'name'} .label=${'Name'} .description=${'Fully qualified domain name'} .value=${rec.name}></dees-input-text>
          <dees-input-text .key=${'value'} .label=${'Value'} .value=${rec.value}></dees-input-text>
-          <dees-input-text .key=${'ttl'} .label=${'TTL (seconds)'} .value=${String(rec.ttl)}></dees-input-text>
+          <dees-input-text .key=${'ttl'} .label=${'TTL'} .description=${'Time to live in seconds'} .value=${String(rec.ttl)}></dees-input-text>
        </dees-form>
      `,
      menuOptions: [
--- a/ts_web/elements/domains/ops-view-domains.ts
+++ b/ts_web/elements/domains/ops-view-domains.ts
@@ -181,8 +181,8 @@ export class OpsViewDomains extends DeesElement {
      heading: 'Add DcRouter Domain',
      content: html`
        <dees-form>
-          <dees-input-text .key=${'name'} .label=${'FQDN (e.g. example.com)'} .required=${true}></dees-input-text>
-          <dees-input-text .key=${'description'} .label=${'Description (optional)'}></dees-input-text>
+          <dees-input-text .key=${'name'} .label=${'FQDN'} .description=${'e.g. example.com'} .required=${true}></dees-input-text>
+          <dees-input-text .key=${'description'} .label=${'Description'}></dees-input-text>
        </dees-form>
        <p style="margin-top: 12px; font-size: 12px; opacity: 0.7;">
          dcrouter will become the authoritative DNS server for this domain. You'll need to
@@ -235,7 +235,8 @@ export class OpsViewDomains extends DeesElement {
          ></dees-input-dropdown>
          <dees-input-text
            .key=${'domainNames'}
-            .label=${'Comma-separated FQDNs to import (e.g. example.com, foo.com)'}
+            .label=${'Domain Names'}
+            .description=${'Comma-separated FQDNs, e.g. example.com, foo.com'}
            .required=${true}
          ></dees-input-text>
        </dees-form>
--- a/ts_web/elements/network/ops-view-remoteingress.ts
+++ b/ts_web/elements/network/ops-view-remoteingress.ts
@@ -243,9 +243,9 @@ export class OpsViewRemoteIngress extends DeesElement {
                  content: html`
                    <dees-form>
                      <dees-input-text .key=${'name'} .label=${'Name'} .required=${true}></dees-input-text>
-                      <dees-input-text .key=${'listenPorts'} .label=${'Additional Manual Ports (comma-separated, optional)'}></dees-input-text>
+                      <dees-input-text .key=${'listenPorts'} .label=${'Manual Ports'} .description=${'Comma-separated port numbers, optional'}></dees-input-text>
                      <dees-input-checkbox .key=${'autoDerivePorts'} .label=${'Auto-derive ports from routes'} .value=${true}></dees-input-checkbox>
-                      <dees-input-text .key=${'tags'} .label=${'Tags (comma-separated, optional)'}></dees-input-text>
+                      <dees-input-text .key=${'tags'} .label=${'Tags'} .description=${'Comma-separated, optional'}></dees-input-text>
                    </dees-form>
                  `,
                  menuOptions: [
@@ -320,9 +320,9 @@ export class OpsViewRemoteIngress extends DeesElement {
                  content: html`
                    <dees-form>
                      <dees-input-text .key=${'name'} .label=${'Name'} .value=${edge.name}></dees-input-text>
-                      <dees-input-text .key=${'listenPorts'} .label=${'Manual Ports (comma-separated)'} .value=${(edge.listenPorts || []).join(', ')}></dees-input-text>
+                      <dees-input-text .key=${'listenPorts'} .label=${'Manual Ports'} .description=${'Comma-separated port numbers'} .value=${(edge.listenPorts || []).join(', ')}></dees-input-text>
                      <dees-input-checkbox .key=${'autoDerivePorts'} .label=${'Auto-derive ports from routes'} .value=${edge.autoDerivePorts !== false}></dees-input-checkbox>
-                      <dees-input-text .key=${'tags'} .label=${'Tags (comma-separated)'} .value=${(edge.tags || []).join(', ')}></dees-input-text>
+                      <dees-input-text .key=${'tags'} .label=${'Tags'} .description=${'Comma-separated'} .value=${(edge.tags || []).join(', ')}></dees-input-text>
                    </dees-form>
                  `,
                  menuOptions: [
--- a/ts_web/elements/network/ops-view-routes.ts
+++ b/ts_web/elements/network/ops-view-routes.ts
@@ -473,19 +473,19 @@ export class OpsViewRoutes extends DeesElement {
      content: html`
        <dees-form>
          <dees-input-text .key=${'name'} .label=${'Route Name'} .value=${route.name || ''} .required=${true}></dees-input-text>
-          <dees-input-text .key=${'ports'} .label=${'Ports (comma-separated)'} .value=${currentPorts} .required=${true}></dees-input-text>
+          <dees-input-text .key=${'ports'} .label=${'Ports'} .description=${'Comma-separated, e.g. 80, 443'} .value=${currentPorts} .required=${true}></dees-input-text>
          <dees-input-list .key=${'domains'} .label=${'Domains'} .placeholder=${'Add domain...'} .value=${currentDomains}></dees-input-list>
-          <dees-input-text .key=${'priority'} .label=${'Priority (higher = matched first)'} .value=${route.priority != null ? String(route.priority) : ''}></dees-input-text>
+          <dees-input-text .key=${'priority'} .label=${'Priority'} .description=${'Higher values are matched first'} .value=${route.priority != null ? String(route.priority) : ''}></dees-input-text>
          <dees-input-dropdown .key=${'sourceProfileRef'} .label=${'Source Profile'} .options=${profileOptions} .selectedOption=${profileOptions.find((o) => o.key === (merged.metadata?.sourceProfileRef || '')) || null}></dees-input-dropdown>
          <dees-input-dropdown .key=${'networkTargetRef'} .label=${'Network Target'} .options=${targetOptions} .selectedOption=${targetOptions.find((o) => o.key === (merged.metadata?.networkTargetRef || '')) || null}></dees-input-dropdown>
-          <dees-input-text .key=${'targetHost'} .label=${'Target Host (if no target selected)'} .value=${currentTargetHost}></dees-input-text>
-          <dees-input-text .key=${'targetPort'} .label=${'Target Port (if no target selected)'} .value=${currentTargetPort}></dees-input-text>
+          <dees-input-text .key=${'targetHost'} .label=${'Target Host'} .description=${'Used when no network target is selected'} .value=${currentTargetHost}></dees-input-text>
+          <dees-input-text .key=${'targetPort'} .label=${'Target Port'} .description=${'Used when no network target is selected'} .value=${currentTargetPort}></dees-input-text>
          <dees-input-dropdown .key=${'tlsMode'} .label=${'TLS Mode'} .options=${tlsModeOptions} .selectedOption=${tlsModeOptions.find((o) => o.key === currentTlsMode) || tlsModeOptions[0]}></dees-input-dropdown>
          <div class="tlsCertificateGroup" style="display: ${needsCert ? 'flex' : 'none'}; flex-direction: column; gap: 16px;">
            <dees-input-dropdown .key=${'tlsCertificate'} .label=${'Certificate'} .options=${tlsCertOptions} .selectedOption=${tlsCertOptions.find((o) => o.key === currentTlsCert) || tlsCertOptions[0]}></dees-input-dropdown>
            <div class="tlsCustomCertGroup" style="display: ${needsCert && isCustom ? 'flex' : 'none'}; flex-direction: column; gap: 16px;">
-              <dees-input-text .key=${'tlsCertKey'} .label=${'Private Key (PEM)'} .value=${currentCustomKey}></dees-input-text>
-              <dees-input-text .key=${'tlsCertCert'} .label=${'Certificate (PEM)'} .value=${currentCustomCert}></dees-input-text>
+              <dees-input-text .key=${'tlsCertKey'} .label=${'Private Key'} .description=${'PEM-encoded private key'} .value=${currentCustomKey}></dees-input-text>
+              <dees-input-text .key=${'tlsCertCert'} .label=${'Certificate'} .description=${'PEM-encoded certificate'} .value=${currentCustomCert}></dees-input-text>
            </div>
          </div>
        </dees-form>
@@ -607,19 +607,19 @@ export class OpsViewRoutes extends DeesElement {
      content: html`
        <dees-form>
          <dees-input-text .key=${'name'} .label=${'Route Name'} .required=${true}></dees-input-text>
-          <dees-input-text .key=${'ports'} .label=${'Ports (comma-separated)'} .required=${true}></dees-input-text>
+          <dees-input-text .key=${'ports'} .label=${'Ports'} .description=${'Comma-separated, e.g. 80, 443'} .required=${true}></dees-input-text>
          <dees-input-list .key=${'domains'} .label=${'Domains'} .placeholder=${'Add domain...'}></dees-input-list>
-          <dees-input-text .key=${'priority'} .label=${'Priority (higher = matched first)'}></dees-input-text>
+          <dees-input-text .key=${'priority'} .label=${'Priority'} .description=${'Higher values are matched first'}></dees-input-text>
          <dees-input-dropdown .key=${'sourceProfileRef'} .label=${'Source Profile'} .options=${profileOptions}></dees-input-dropdown>
          <dees-input-dropdown .key=${'networkTargetRef'} .label=${'Network Target'} .options=${targetOptions}></dees-input-dropdown>
-          <dees-input-text .key=${'targetHost'} .label=${'Target Host (if no target selected)'} .value=${'localhost'}></dees-input-text>
-          <dees-input-text .key=${'targetPort'} .label=${'Target Port (if no target selected)'}></dees-input-text>
+          <dees-input-text .key=${'targetHost'} .label=${'Target Host'} .description=${'Used when no network target is selected'} .value=${'localhost'}></dees-input-text>
+          <dees-input-text .key=${'targetPort'} .label=${'Target Port'} .description=${'Used when no network target is selected'}></dees-input-text>
          <dees-input-dropdown .key=${'tlsMode'} .label=${'TLS Mode'} .options=${tlsModeOptions} .selectedOption=${tlsModeOptions[0]}></dees-input-dropdown>
          <div class="tlsCertificateGroup" style="display: none; flex-direction: column; gap: 16px;">
            <dees-input-dropdown .key=${'tlsCertificate'} .label=${'Certificate'} .options=${tlsCertOptions} .selectedOption=${tlsCertOptions[0]}></dees-input-dropdown>
            <div class="tlsCustomCertGroup" style="display: none; flex-direction: column; gap: 16px;">
-              <dees-input-text .key=${'tlsCertKey'} .label=${'Private Key (PEM)'}></dees-input-text>
-              <dees-input-text .key=${'tlsCertCert'} .label=${'Certificate (PEM)'}></dees-input-text>
+              <dees-input-text .key=${'tlsCertKey'} .label=${'Private Key'} .description=${'PEM-encoded private key'}></dees-input-text>
+              <dees-input-text .key=${'tlsCertCert'} .label=${'Certificate'} .description=${'PEM-encoded certificate'}></dees-input-text>
            </div>
          </div>
        </dees-form>
--- a/ts_web/elements/network/ops-view-targetprofiles.ts
+++ b/ts_web/elements/network/ops-view-targetprofiles.ts
@@ -176,7 +176,7 @@ export class OpsViewTargetProfiles extends DeesElement {
          <dees-input-text .key=${'name'} .label=${'Name'} .required=${true}></dees-input-text>
          <dees-input-text .key=${'description'} .label=${'Description'}></dees-input-text>
          <dees-input-list .key=${'domains'} .label=${'Domains'} .placeholder=${'e.g. *.example.com'} .allowFreeform=${true}></dees-input-list>
-          <dees-input-list .key=${'targets'} .label=${'Targets (ip:port)'} .placeholder=${'e.g. 10.0.0.1:443'} .allowFreeform=${true}></dees-input-list>
+          <dees-input-list .key=${'targets'} .label=${'Targets'} .description=${'Format: ip:port, e.g. 10.0.0.1:443'} .placeholder=${'e.g. 10.0.0.1:443'} .allowFreeform=${true}></dees-input-list>
          <dees-input-list .key=${'routeRefs'} .label=${'Route Refs'} .placeholder=${'Type to search routes...'} .candidates=${routeCandidates} .allowFreeform=${true}></dees-input-list>
        </dees-form>
      `,
@@ -235,7 +235,7 @@ export class OpsViewTargetProfiles extends DeesElement {
          <dees-input-text .key=${'name'} .label=${'Name'} .value=${profile.name}></dees-input-text>
          <dees-input-text .key=${'description'} .label=${'Description'} .value=${profile.description || ''}></dees-input-text>
          <dees-input-list .key=${'domains'} .label=${'Domains'} .placeholder=${'e.g. *.example.com'} .allowFreeform=${true} .value=${currentDomains}></dees-input-list>
-          <dees-input-list .key=${'targets'} .label=${'Targets (ip:port)'} .placeholder=${'e.g. 10.0.0.1:443'} .allowFreeform=${true} .value=${currentTargets}></dees-input-list>
+          <dees-input-list .key=${'targets'} .label=${'Targets'} .description=${'Format: ip:port, e.g. 10.0.0.1:443'} .placeholder=${'e.g. 10.0.0.1:443'} .allowFreeform=${true} .value=${currentTargets}></dees-input-list>
          <dees-input-list .key=${'routeRefs'} .label=${'Route Refs'} .placeholder=${'Type to search routes...'} .candidates=${routeCandidates} .allowFreeform=${true} .value=${currentRouteRefs}></dees-input-list>
        </dees-form>
      `,
--- a/ts_web/elements/network/ops-view-vpn.ts
+++ b/ts_web/elements/network/ops-view-vpn.ts
@@ -371,8 +371,8 @@ export class OpsViewVpn extends DeesElement {
                    </div>
                    <dees-input-checkbox .key=${'allowAdditionalAcls'} .label=${'Allow additional ACLs'} .value=${false}></dees-input-checkbox>
                    <div class="aclGroup" style="display: none; flex-direction: column; gap: 16px;">
-                      <dees-input-text .key=${'destinationAllowList'} .label=${'Destination Allow List (comma-separated IPs/CIDRs)'}></dees-input-text>
-                      <dees-input-text .key=${'destinationBlockList'} .label=${'Destination Block List (comma-separated IPs/CIDRs)'}></dees-input-text>
+                      <dees-input-text .key=${'destinationAllowList'} .label=${'Destination Allow List'} .description=${'Comma-separated IPs or CIDRs'}></dees-input-text>
+                      <dees-input-text .key=${'destinationBlockList'} .label=${'Destination Block List'} .description=${'Comma-separated IPs or CIDRs'}></dees-input-text>
                    </div>
                  </dees-form>
                `,
@@ -681,8 +681,8 @@ export class OpsViewVpn extends DeesElement {
                    </div>
                    <dees-input-checkbox .key=${'allowAdditionalAcls'} .label=${'Allow additional ACLs'} .value=${currentAllowAcls}></dees-input-checkbox>
                    <div class="aclGroup" style="display: ${currentAllowAcls ? 'flex' : 'none'}; flex-direction: column; gap: 16px;">
-                      <dees-input-text .key=${'destinationAllowList'} .label=${'Destination Allow List (comma-separated IPs/CIDRs)'} .value=${currentAllowList}></dees-input-text>
-                      <dees-input-text .key=${'destinationBlockList'} .label=${'Destination Block List (comma-separated IPs/CIDRs)'} .value=${currentBlockList}></dees-input-text>
+                      <dees-input-text .key=${'destinationAllowList'} .label=${'Destination Allow List'} .description=${'Comma-separated IPs or CIDRs'} .value=${currentAllowList}></dees-input-text>
+                      <dees-input-text .key=${'destinationBlockList'} .label=${'Destination Block List'} .description=${'Comma-separated IPs or CIDRs'} .value=${currentBlockList}></dees-input-text>
                    </div>
                  </dees-form>
                `,