[TASK] Add small size variants to styleguide components

Add documentation and examples for small size variants (btn-sm,
form-control-sm, etc.) to styleguide components, ensuring all available
size options are properly demonstrated.

To improve discoverability and documentation, descriptive text has been
added to all overview cards and detail pages. The overview pages now
show brief descriptions helping users understand what each component or
style is used for before navigating to the detail page. All component
and style detail pages have been enhanced with introductory text for
better documentation consistency.

Additionally, naming conventions have been unified, HTML sanitization
has been standardized across all templates, and minor HTML tag
mismatches have been fixed.

Resolves: #108149
Releases: main
Change-Id: I0fd6c7916ca92e5447269a8b84079ca7d2914993
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/91692
Tested-by: Garvin Hicking <garvin@hick.ing>
Reviewed-by: Lina Wolf <112@linawolf.de>
Tested-by: core-ci <typo3@b13.com>
Tested-by: Benni Mack <benni@typo3.org>
Reviewed-by: Benni Mack <benni@typo3.org>
Reviewed-by: Garvin Hicking <garvin@hick.ing>
Tested-by: Lina Wolf <112@linawolf.de>

Author: benjaminkott

Build/Sources/Sass/module/_styleguide.scss

@@ -54,6 +54,7 @@
     .example-container {
         display: flex;
         align-items: center;
+        flex-wrap: wrap;
         gap: var(--typo3-spacing);
 
         &.example-container--large-spacing {
@@ -136,6 +137,8 @@
 @container (min-width: 740px) {
     .styleguide-navigation {
         position: sticky;
-        top: 0;
+        top: calc(var(--module-docheader-bar-height) + var(--module-body-padding-y));
+        max-height: calc(100dvh - var(--module-docheader-height) - var(--module-body-padding-y) * 2);
+        overflow: auto;
     }
 }