diff --git a/packages/playground/src/components/input_validator.vue b/packages/playground/src/components/input_validator.vue
index 32ee590da4..c1d27efd83 100644
--- a/packages/playground/src/components/input_validator.vue
+++ b/packages/playground/src/components/input_validator.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="inputElement" class="input-validator">
+  <div ref="inputElement" class="input-validator w-100">
     <slot
       :props="{
         onBlur,
diff --git a/packages/playground/src/components/manage_gateway_dialog.vue b/packages/playground/src/components/manage_gateway_dialog.vue
index 6678598755..dbac89cf1b 100644
--- a/packages/playground/src/components/manage_gateway_dialog.vue
+++ b/packages/playground/src/components/manage_gateway_dialog.vue
@@ -132,7 +132,7 @@
             </input-tooltip>
 
             <div :style="{ marginTop: '-10px' }">
-              <TfSelectionDetails disable-node-selection require-domain v-model="selectionDetails" />
+              <TfSelectionDetails disable-node-selection require-domain use-fqdn v-model="selectionDetails" />
             </div>
 
             <input-validator
diff --git a/packages/playground/src/components/node_selector/TfDomainName.vue b/packages/playground/src/components/node_selector/TfDomainName.vue
index 856fc21ee3..432058b470 100644
--- a/packages/playground/src/components/node_selector/TfDomainName.vue
+++ b/packages/playground/src/components/node_selector/TfDomainName.vue
@@ -120,6 +120,7 @@ export default {
     farm: Object as PropType<FarmInfo>,
     hideTitle: Boolean,
     status: String as PropType<ValidatorStatus>,
+    useFqdn: Boolean,
   },
   emits: {
     "update:model-value": (domain?: DomainInfo) => true || domain,
@@ -175,7 +176,7 @@ export default {
     });
 
     const disableSelectedDomain = computed(() => enableCustomDomain.value && props.filters.ipv4 === true);
-    const useFQDN = computed(() => enableCustomDomain.value && props.filters.ipv4 === false);
+    const useFQDN = computed(() => enableCustomDomain.value && (props.useFqdn || props.filters.ipv4 === false));
 
     const domain = computed<DomainInfo>(() => {
       return {
diff --git a/packages/playground/src/components/node_selector/TfSelectionDetails.vue b/packages/playground/src/components/node_selector/TfSelectionDetails.vue
index 28c30fe945..714d403133 100644
--- a/packages/playground/src/components/node_selector/TfSelectionDetails.vue
+++ b/packages/playground/src/components/node_selector/TfSelectionDetails.vue
@@ -57,6 +57,7 @@
         :hide-title="$props.disableNodeSelection"
         v-model="domain"
         v-model:status="domainStatus"
+        :use-fqdn="$props.useFqdn"
         v-if="requireDomain"
       />
     </VExpandTransition>
@@ -104,6 +105,7 @@ export default {
     requireDomain: Boolean,
     disableNodeSelection: { type: Boolean, default: () => false },
     status: String as PropType<ValidatorStatus>,
+    useFqdn: Boolean,
   },
   emits: {
     "update:model-value": (value: SelectionDetails) => true || value,