From 2d704b1ae6badef423dda897daad92c72e78805a Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Thu, 12 Dec 2024 16:20:26 +0300
Subject: [PATCH]  wrap  <h2> in  <div>

---
 .../components/SearchFiltersPanel/index.vue   | 54 ++++++++++---------
 1 file changed, 28 insertions(+), 26 deletions(-)

diff --git a/packages/kolibri-common/components/SearchFiltersPanel/index.vue b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
index 13095ae4494..7e379b3772c 100644
--- a/packages/kolibri-common/components/SearchFiltersPanel/index.vue
+++ b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
@@ -33,32 +33,34 @@
             :value="value.keywords || ''"
             @change="val => $emit('input', { ...value, keywords: val })"
           />
-          <h2 class="section title">
-            {{ $tr('categories') }}
-          </h2>
-          <!-- list of category metadata - clicking prompts a filter modal -->
-          <div
-            v-for="(category, key) in availableLibraryCategories"
-            :key="key"
-            span="4"
-            class="category-list-item"
-          >
-            <KButton
-              :text="coreString(category.value)"
-              appearance="flat-button"
-              :appearanceOverrides="
-                isCategoryActive(category.value)
-                  ? { ...categoryListItemStyles, ...categoryListItemActiveStyles }
-                  : categoryListItemStyles
-              "
-              :disabled="
-                availableRootCategories &&
-                  !availableRootCategories[category.value] &&
-                  !isCategoryActive(category.value)
-              "
-              :iconAfter="hasNestedCategories(key) ? 'chevronRight' : null"
-              @click="handleCategory(key)"
-            />
+          <div v-if="Object.keys(availableLibraryCategories).length">
+            <h2 class="section title">
+              {{ $tr('categories') }}
+            </h2>
+            <!-- list of category metadata - clicking prompts a filter modal -->
+            <div
+              v-for="(category, key) in availableLibraryCategories"
+              :key="key"
+              span="4"
+              class="category-list-item"
+            >
+              <KButton
+                :text="coreString(category.value)"
+                appearance="flat-button"
+                :appearanceOverrides="
+                  isCategoryActive(category.value)
+                    ? { ...categoryListItemStyles, ...categoryListItemActiveStyles }
+                    : categoryListItemStyles
+                "
+                :disabled="
+                  availableRootCategories &&
+                    !availableRootCategories[category.value] &&
+                    !isCategoryActive(category.value)
+                "
+                :iconAfter="hasNestedCategories(key) ? 'chevronRight' : null"
+                @click="handleCategory(key)"
+              />
+            </div>
           </div>
           <div
             span="4"