Try It Out: Show inputs on separate line for consistency

resources/js/tryitout.js

@@ -43,7 +43,7 @@ function tryItOut(endpointId) {
 
     // Show all input fields
     document.querySelectorAll(`input[data-endpoint=${endpointId}],label[data-endpoint=${endpointId}]`)
-        .forEach(el => el.hidden = false);
+        .forEach(el => el.style.display = 'block');
 
     if (document.querySelector(`#form-${endpointId}`).dataset.authed === "1") {
         const authElement = document.querySelector(`#auth-${endpointId}`);
@@ -67,7 +67,7 @@ function cancelTryOut(endpointId) {
     document.querySelector(`#btn-canceltryout-${endpointId}`).hidden = true;
     // Hide inputs
     document.querySelectorAll(`input[data-endpoint=${endpointId}],label[data-endpoint=${endpointId}]`)
-        .forEach(el => el.hidden = true);
+        .forEach(el => el.style.display = 'none');
     document.querySelectorAll(`#form-${endpointId} details`)
         .forEach(el => el.open = false);
     const authElement = document.querySelector(`#auth-${endpointId}`);

resources/views/components/field-details.blade.php

@@ -23,7 +23,7 @@
         };
     @endphp
     @if($type === 'boolean')
-        <label data-endpoint="{{ $endpointId }}" hidden>
+        <label data-endpoint="{{ $endpointId }}" style="display: none">
             <input type="radio" name="{{ $fullName }}"
                    value="{{$component === 'body' ? 'true' : 1}}"
                    data-endpoint="{{ $endpointId }}"
@@ -31,7 +31,7 @@
             >
             <code>true</code>
         </label>
-        <label data-endpoint="{{ $endpointId }}" hidden>
+        <label data-endpoint="{{ $endpointId }}" style="display: none">
             <input type="radio" name="{{ $fullName }}"
                    value="{{$component === 'body' ? 'false' : 0}}"
                    data-endpoint="{{ $endpointId }}"
@@ -40,20 +40,20 @@
             <code>false</code>
         </label>
     @elseif($isList)
-        <input type="{{ $inputType }}"
+        <input type="{{ $inputType }}" style="display: none"
                name="{{ $fullName."[0]" }}" @if($class)class="{{ $class }}"@endif
                data-endpoint="{{ $endpointId }}"
-               data-component="{{ $component }}" hidden>
-        <input type="{{ $inputType }}"
+               data-component="{{ $component }}">
+        <input type="{{ $inputType }}" style="display: none"
                name="{{ $fullName."[1]" }}" @if($class)class="{{ $class }}"@endif
                data-endpoint="{{ $endpointId }}"
-               data-component="{{ $component }}" hidden>
+               data-component="{{ $component }}">
     @else
-        <input type="{{ $inputType }}"
+        <input type="{{ $inputType }}" style="display: none"
                name="{{ $fullName }}" @if($class)class="{{ $class }}"@endif
                data-endpoint="{{ $endpointId }}"
                value="{!! (isset($example) && (is_string($example) || is_numeric($example))) ? $example : '' !!}"
-               data-component="{{ $component }}" hidden>
+               data-component="{{ $component }}">
     @endif
 @endif
 <br>