Styling improvements for default theme; show example with description

resources/css/theme-default.style.css

@@ -1085,8 +1085,8 @@ button {
     scrollbar-color: #3c4c67 transparent);
 }
 *::-webkit-scrollbar { /* Background */
-    width: 7px;
-    height: 7px;
+    width: 10px;
+    height: 10px;
     background: transparent;
 }
 

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

@@ -1,7 +1,7 @@
 @php
     $html ??= []; $class = $html['class'] ?? null;
 @endphp
-<b><code>{{ $name }}</code></b>&nbsp;&nbsp;
+<b style="line-height: 2;"><code>{{ $name }}</code></b>&nbsp;&nbsp;
 @if($type)<small>{{ $type }}</small>@endif&nbsp;
 @if($isInput && !$required)<i>optional</i>@endif &nbsp;
 @if($isInput && empty($hasChildren))
@@ -57,4 +57,10 @@
     @endif
 @endif
 <br>
-{!! Parsedown::instance()->text($description) !!}
+@php
+if($example !== null && $example !== '' && !is_array($example)) {
+    $exampleAsString = $example === false ? "false" : $example;
+    $description .= " Example: `$example`";
+    }
+@endphp
+{!! Parsedown::instance()->text(trim($description)) !!}

resources/views/components/nested-fields.blade.php

@@ -1,22 +1,23 @@
 @php
-    $isInput ??= true
+    $isInput ??= true;
+    $level ??= 0;
 @endphp
 @foreach($fields as $name => $field)
     @if($name === '[]')
         @php
             $description = "The request body is an array (<code>{$field['type']}</code>`)";
             $description .= !empty($field['description']) ? ", representing ".lcfirst($field['description'])."." : '.';
+            if(count($field['__fields'])) $description .= " Each item has the following properties:";
         @endphp
-        <p>
-            {!! Parsedown::instance()->text($description) !!}
-        </p>
+        {!! Parsedown::instance()->text($description) !!}
+
         @foreach($field['__fields'] as $subfieldName => $subfield)
                 @if(!empty($subfield['__fields']))
                     <x-scribe::nested-fields
-                            :fields="[$subfieldName => $subfield]" :endpointId="$endpointId" :isInput="$isInput"
+                            :fields="[$subfieldName => $subfield]" :endpointId="$endpointId" :isInput="$isInput" :level="$level + 2"
                     />
                 @else
-                    <p>
+                    <div style="margin-left: {{ ($level + 2) * 14 }}px; clear: unset;">
                         @component('scribe::components.field-details', [
                           'name' => $subfield['name'],
                           'type' => $subfield['type'] ?? 'string',
@@ -29,11 +30,11 @@
                           'isInput' => $isInput,
                         ])
                         @endcomponent
-                    </p>
+                    </div>
                 @endif
             @endforeach
     @elseif(!empty($field['__fields']))
-        <p>
+        <div style="@if($level) margin-left: {{ $level * 14 }}px;@else padding-left: 28px; @endif clear: unset;">
         <details>
             <summary style="padding-bottom: 10px;">
                 @component('scribe::components.field-details', [
@@ -52,10 +53,10 @@
             @foreach($field['__fields'] as $subfieldName => $subfield)
                 @if(!empty($subfield['__fields']))
                     <x-scribe::nested-fields
-                            :fields="[$subfieldName => $subfield]" :endpointId="$endpointId" :isInput="$isInput"
+                            :fields="[$subfieldName => $subfield]" :endpointId="$endpointId" :isInput="$isInput" :level="$level + 1"
                     />
                 @else
-                    <p>
+                    <div style="margin-left: {{ ($level + 1) * 14 }}px; clear: unset;">
                         @component('scribe::components.field-details', [
                           'name' => $subfield['name'],
                           'type' => $subfield['type'] ?? 'string',
@@ -68,13 +69,13 @@
                           'isInput' => $isInput,
                         ])
                         @endcomponent
-                    </p>
+                    </div>
                 @endif
             @endforeach
         </details>
-        </p>
+        </div>
     @else
-        <p>
+        <div style="@if($level) margin-left: {{ ($level + 1) * 14 }}px;@else padding-left: 28px; @endif clear: unset;">
             @component('scribe::components.field-details', [
               'name' => $field['name'],
               'type' => $field['type'] ?? 'string',
@@ -87,6 +88,6 @@
               'isInput' => $isInput,
             ])
             @endcomponent
-        </p>
+        </div>
     @endif
 @endforeach

resources/views/themes/default/endpoint.blade.php

@@ -101,7 +101,7 @@
                   $htmlOptions = [ 'class' => 'auth-value', ];
                   }
             ?>
-            <p>
+            <div style="padding-left: 28px; clear: unset;">
                 @component('scribe::components.field-details', [
                   'name' => $name,
                   'type' => null,
@@ -114,13 +114,13 @@
                   'html' => $htmlOptions,
                 ])
                 @endcomponent
-            </p>
+            </div>
         @endforeach
     @endif
     @if(count($endpoint->urlParameters))
         <h4 class="fancy-heading-panel"><b>URL Parameters</b></h4>
         @foreach($endpoint->urlParameters as $attribute => $parameter)
-            <p>
+            <div style="padding-left: 28px; clear: unset;">
                 @component('scribe::components.field-details', [
                   'name' => $parameter->name,
                   'type' => $parameter->type ?? 'string',
@@ -132,7 +132,7 @@
                   'isInput' => true,
                 ])
                 @endcomponent
-            </p>
+            </div>
         @endforeach
     @endif
     @if(count($endpoint->queryParameters))
@@ -144,7 +144,7 @@
                     $htmlOptions = [ 'class' => 'auth-value', ];
                 }
                 ?>
-            <p>
+            <div style="padding-left: 28px; clear: unset;">
                 @component('scribe::components.field-details', [
                   'name' => $parameter->name,
                   'type' => $parameter->type,
@@ -157,7 +157,7 @@
                   'html' => $htmlOptions,
                 ])
                 @endcomponent
-            </p>
+            </div>
         @endforeach
     @endif
     @if(count($endpoint->nestedBodyParameters))