fix: Issue 2136 - Fixed cropped display of vf-search examples having results. (#2232)

Author: bhushan-ebi

components/vf-content/CHANGELOG.md

@@ -1,3 +1,7 @@
+### 1.6.19
+
+* `vf-button` version correction
+
 ### 1.6.18
 
 * Dependency update to be compatible with ESM packages[Tracking issue](https://github.com/visual-framework/vf-core/issues/2107)

components/vf-content/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.18",
+  "version": "1.6.19",
   "name": "@visual-framework/vf-content",
   "description": "vf-content component",
   "homepage": "https://stable.visual-framework.dev/",
@@ -19,7 +19,7 @@
     "@visual-framework/vf-badge": "^3.0.4",
     "@visual-framework/vf-blockquote": "^1.2.10",
     "@visual-framework/vf-box": "^2.4.0",
-    "@visual-framework/vf-button": "^3.0.3",
+    "@visual-framework/vf-button": "^3.0.2",
     "@visual-framework/vf-divider": "^2.0.1",
     "@visual-framework/vf-figure": "^2.0.2",
     "@visual-framework/vf-form": "^2.0.3",

tools/vf-component-library/CHANGELOG.md

@@ -1,3 +1,7 @@
+### 1.2.16
+
+* Fix: Cropped display of `vf-search` examples having results [Tracking issue](https://github.com/visual-framework/vf-core/issues/2136)
+
 ### 1.2.15
 
 * Dependency update to be compatible with ESM packages[Tracking issue](https://github.com/visual-framework/vf-core/issues/2107)

tools/vf-component-library/src/site/_includes/layouts/components.njk

@@ -231,8 +231,14 @@ templateEngineOverride: njk
                 <div class="vf-u-padding--400"
                     style="overflow: auto; background-image: linear-gradient(45deg, rgba(59, 111, 182, .1) 25%, transparent 25%), linear-gradient(135deg, rgba(59, 111, 182, .1) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(59, 111, 182, .1) 75%), linear-gradient(135deg, transparent 75%, rgba(59, 111, 182, .1) 75%);background-size: 20px 20px; background-position-x: 0px, 10px, 10px, 0px;background-position-y: 0px, 0px, -10px, 10px;"
                 >
+                {% if component.baseHandle == 'vf-search' and 'vf-search--' in variant.handle and variant.context and variant.context.results %}
+                  <div style="height:350px;">
+                {% endif %}
                   {# When you want a box with a slight shadow #}
                   {% render '@'+variant.handle, variant.context %}
+                {% if component.baseHandle == 'vf-search' and 'vf-search--' in variant.handle and variant.context and variant.context.results %}
+                  </div>
+                {% endif %}
                 </div>
               {% endif %}
             {% if variants[0].context['exampleMultiColumns'] != "false" and (variants[0].context['component-type'] == "block" or variants[0].context['component-type'] == "element") %}