@eeacms/volto-cca-policy 1.0.25 → 1.0.26

package/CHANGELOG.md

@@ -4,6 +4,26 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.0.26](https://github.com/eea/volto-cca-policy/compare/1.0.25...1.0.26) - 21 September 2026
+
+#### :rocket: New Features
+
+- feat(navigator): implement TagOverflowPopup component and replace Popup in navigator [kreafox - [`42a66c8`](https://github.com/eea/volto-cca-policy/commit/42a66c826f2e19ebd0102fc05a2df5ccd1648f14)]
+
+#### :bug: Bug Fixes
+
+- fix(navigator): rename adaptation support cycle step and improve guide me layout [kreafox - [`2806e1b`](https://github.com/eea/volto-cca-policy/commit/2806e1b258dc3b1172c21a567f5d76328d855bb9)]
+- fix(navigator): update climate impacts to climate hazards - refs #304609 [kreafox - [`cf2af49`](https://github.com/eea/volto-cca-policy/commit/cf2af49836f3b5a1b33621ae29650b14fb38c078)]
+
+#### :nail_care: Enhancements
+
+- refactor: update import paths for ToolThumbnail and TagOverflowPopup components [kreafox - [`c174abe`](https://github.com/eea/volto-cca-policy/commit/c174abeafcfb8040e43cb496a3f0b10747c057a8)]
+- refactor(navigator): consolidate ToolThumbnail import paths and update related components [kreafox - [`5996b0b`](https://github.com/eea/volto-cca-policy/commit/5996b0b28814cb24c4167d9eb72cf6c632eb2a36)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`851dcd2`](https://github.com/eea/volto-cca-policy/commit/851dcd27a6fd162e723b2e6e8fe542d8ab3bc8d1)]
+
 ### [1.0.25](https://github.com/eea/volto-cca-policy/compare/1.0.24...1.0.25) - 17 September 2026
 
 #### :rocket: New Features
@@ -441,7 +461,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINSFILE] sanitize sonarqube command Refs #305084 [valentinab25 - [`8106a44`](https://github.com/eea/volto-cca-policy/commit/8106a44e8f40dd360a274cede4b3f9c215d026cf)]
 
 #### :hammer_and_wrench: Others
 
@@ -772,7 +791,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINSFILE] sanitize sonarqube command Refs #305084 [valentinab25 - [`8106a44`](https://github.com/eea/volto-cca-policy/commit/8106a44e8f40dd360a274cede4b3f9c215d026cf)]
 
 #### :hammer_and_wrench: Others
 
@@ -1309,7 +1327,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINSFILE] add package version in sonarqube [valentinab25 - [`e901251`](https://github.com/eea/volto-cca-policy/commit/e901251592eb54609fbc7eb8fcf7bd452c2da9cd)]
 
 ### [0.3.102](https://github.com/eea/volto-cca-policy/compare/0.3.101...0.3.102) - 24 February 2026
 
@@ -1319,7 +1336,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINSFILE] use sonarqube branches [EEA Jenkins - [`8b3699a`](https://github.com/eea/volto-cca-policy/commit/8b3699a6cbaef662b5e80884ac2c1f7dc9c6591e)]
 
 ### [0.3.101](https://github.com/eea/volto-cca-policy/compare/0.3.100...0.3.101) - 28 January 2026
 
@@ -1607,7 +1623,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - style: fix item spacing [kreafox - [`7d4535d`](https://github.com/eea/volto-cca-policy/commit/7d4535dbc486e6cb80fc55d6ac8c7c01d9cf48af)]
 - chore: code cleanup [kreafox - [`842419b`](https://github.com/eea/volto-cca-policy/commit/842419b1bce3dc624755c81c9dea672198cab9e2)]
 - style: update teaser block styling [kreafox - [`1e0cad8`](https://github.com/eea/volto-cca-policy/commit/1e0cad8e1ed3ae827ee868dce8ad50b292a937ba)]
-- chore: update Makefile, run yarn i18n [kreafox - [`61e6962`](https://github.com/eea/volto-cca-policy/commit/61e6962901068ae6512265417a730bd9befd65fe)]
 - chore: move styling to theme folder [kreafox - [`8cf6a1b`](https://github.com/eea/volto-cca-policy/commit/8cf6a1b8b14abf472a9c61b28db574f6d9e0bd3b)]
 - chore: remove ArrayWidget customization [kreafox - [`249bf93`](https://github.com/eea/volto-cca-policy/commit/249bf93054f7726c3d57a8b8ca01b75cd0d30522)]
 - chore: remove Footer customization [kreafox - [`7038af3`](https://github.com/eea/volto-cca-policy/commit/7038af37d48a328dfc31746f3fa84973e2f840ab)]
@@ -4370,13 +4385,10 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Refs #260715 rast-block wip [Tripon Eugen - [`f19d54e`](https://github.com/eea/volto-cca-policy/commit/f19d54e0b9a6a86bf344eb85b6a1cda7f3de91bf)]
 - Refs #260715 rast-block wip [Tripon Eugen - [`2828537`](https://github.com/eea/volto-cca-policy/commit/2828537b6c084cd1a82162d552fb4ef025b71f9f)]
 - Refs #260715 rast-block updates [Tripon Eugen - [`1e803e5`](https://github.com/eea/volto-cca-policy/commit/1e803e5bd3d3fb7558f261c76c68866be7beb8b5)]
-- test: [JENKINS] Use java17 for sonarqube scanner [valentinab25 - [`0a15e1b`](https://github.com/eea/volto-cca-policy/commit/0a15e1b2ad081233685e80d5b3c60a8663f6b896)]
-- test: [JENKINS] Run cypress in started frontend container [valentinab25 - [`9554e44`](https://github.com/eea/volto-cca-policy/commit/9554e44c92a621a52b2adb5a4830fb084ee5734b)]
 ### [0.1.49](https://github.com/eea/volto-cca-policy/compare/0.1.48...0.1.49) - 15 November 2023
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Refactor automated testing [valentinab25 - [`7b820a6`](https://github.com/eea/volto-cca-policy/commit/7b820a6369c2ddd5203b1a4abe352cb4bb43db7a)]
 - chore: husky, lint-staged use fixed versions [valentinab25 - [`f0a8061`](https://github.com/eea/volto-cca-policy/commit/f0a8061c275c236deb00087c23fac9860a073106)]
 
 #### :hammer_and_wrench: Others
@@ -4393,9 +4405,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Refs #259267 - jenkins test [Tripon Eugen - [`cacd31e`](https://github.com/eea/volto-cca-policy/commit/cacd31e7b1afe0983674ed5c7632d2e1d7fa752e)]
 - Refs #259267 - jenkins [Tripon Eugen - [`5b3affe`](https://github.com/eea/volto-cca-policy/commit/5b3affee8401239de10097884c1b7f2349d15ec0)]
 - Refs #259267 - add When, lead image and title to files [Tripon Eugen - [`2cedb23`](https://github.com/eea/volto-cca-policy/commit/2cedb237f898af9057e13fba94b615ef71077204)]
-- test: [JENKINS] Add cpu limit on cypress docker [valentinab25 - [`4d607a5`](https://github.com/eea/volto-cca-policy/commit/4d607a576e9d0a5c34e48c41b409e7df616ee3d6)]
-- test: [JENKINS] Increase shm-size to cypress docker [valentinab25 - [`b7f74d5`](https://github.com/eea/volto-cca-policy/commit/b7f74d53513a6edbfbca5cb6d19687929bb1e5db)]
-- test: [JENKINS] Improve cypress time [valentinab25 - [`db65617`](https://github.com/eea/volto-cca-policy/commit/db656173391f65157098d95d388c25f6429753d8)]
 - Refs #259267 - cca event blocks attachments and check not mandatoty fields [Tripon Eugen - [`3138e5a`](https://github.com/eea/volto-cca-policy/commit/3138e5afb5bfbdbed14e27ed457b16867b7fa414)]
 - Refs #256681 - Fix error in CCA Event view menu. ([React Intl] An id must be provided to format a message.) [GhitaB - [`517eeb8`](https://github.com/eea/volto-cca-policy/commit/517eeb817264a47bbfd6b9b7d22aaf22d44ed224)]
 - Refs #161485 - Fix ECDE name conflict. [GhitaB - [`8bfd99f`](https://github.com/eea/volto-cca-policy/commit/8bfd99ff68bb82a04d1c0ed625fa514fcf46289e)]
@@ -4612,7 +4621,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Remove alpha testing version [valentinab25 - [`ad1ced0`](https://github.com/eea/volto-cca-policy/commit/ad1ced0971ba116c13a3b5fcc039172cc915c919)]
 
 #### :hammer_and_wrench: Others
 
@@ -5093,7 +5101,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Refs #158294 - Update supported languages list. [GhitaB - [`0a4f91f`](https://github.com/eea/volto-cca-policy/commit/0a4f91f39b7edc367bd4c127d6a8f273c7788361)]
-- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`8f1f9ce`](https://github.com/eea/volto-cca-policy/commit/8f1f9ce6c22805670cc0800d3c779b6d619d0f31)]
 ### [0.1.1](https://github.com/eea/volto-cca-policy/compare/0.1.0...0.1.1) - 13 December 2022
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "1.0.25",
+  "version": "1.0.26",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/Search/NavigatorCatalogue/NavigatorCatalogueCardItem.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { Checkbox, Icon, Popup } from 'semantic-ui-react';
+import { Checkbox, Icon } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
 import ExternalLink from '@eeacms/search/components/Result/ExternalLink';
 import ResultContext from '@eeacms/search/components/Result/ResultContext';
-import ToolThumbnail from '../../theme/ToolThumbnail/ToolThumbnail';
+import TagOverflowPopup from '@eeacms/volto-cca-policy/components/theme/TagOverflowPopup';
+import ToolThumbnail from '@eeacms/volto-cca-policy/components/theme/ToolThumbnail/ToolThumbnail';
 import { getToolThumbnailUrl } from '../../theme/ToolThumbnail/utils';
 import {
   getCompareToolTitle,
@@ -78,27 +79,10 @@ const TagGroup = ({ typeLabel, values, type, maxItems }) => {
         </span>
       ))}
       {remaining > 0 && (
-        <Popup
-          className="catalogue-tag-popup"
-          content={
-            <div className="catalogue-tag-tooltip">
-              <ul>
-                {hidden.map((value) => (
-                  <li key={`${type}-hidden-${value}`}>{value}</li>
-                ))}
-              </ul>
-            </div>
-          }
-          position="bottom left"
-          trigger={
-            <button
-              type="button"
-              className={`navigator-tag ${type} more`}
-              aria-label={`${typeLabel}: ${hidden.join(', ')}`}
-            >
-              + {remaining}
-            </button>
-          }
+        <TagOverflowPopup
+          items={hidden}
+          className={`navigator-tag ${type} more`}
+          ariaLabel={`${typeLabel}: ${hidden.join(', ')}`}
         />
       )}
     </div>
@@ -107,6 +91,7 @@ const TagGroup = ({ typeLabel, values, type, maxItems }) => {
 
 const CycleElements = ({ intl, values }) => {
   const visible = values.slice(0, 3);
+  const hidden = values.slice(3);
 
   if (!visible.length) return null;
 
@@ -123,6 +108,13 @@ const CycleElements = ({ intl, values }) => {
           {value}
         </span>
       ))}
+      {hidden.length > 0 && (
+        <TagOverflowPopup
+          items={hidden}
+          className="navigator-tag cycle-element more"
+          ariaLabel={`${intl.formatMessage(messages.cycle)}: ${hidden.join(', ')}`}
+        />
+      )}
     </div>
   );
 };
@@ -141,7 +133,7 @@ const NavigatorCatalogueCardItem = (props) => {
     .join(', ');
   const toolProvider = result?._result?.tool_provider?.raw;
   const adaptationSupportCycleSteps = rawValueAsArray(
-    result.adaptation_support_cycle_step,
+    result.cca_adaptation_support_cycle_step,
   )
     .map((value) => {
       const title = value?.title || value;

package/src/components/Search/NavigatorCatalogue/NavigatorCatalogueCardItem.test.jsx

@@ -94,7 +94,7 @@ describe('NavigatorCatalogueCardItem', () => {
           'Datasets and indicators',
         ],
       },
-      adaptation_support_cycle_step: {
+      cca_adaptation_support_cycle_step: {
         raw: [
           { title: 'Step 1: Preparing the ground' },
           { title: 'Step 2: Assessing risks' },
@@ -131,7 +131,10 @@ describe('NavigatorCatalogueCardItem', () => {
     expect(screen.getByText('Resilience')).toBeInTheDocument();
     expect(screen.getByText('Adaptation')).toBeInTheDocument();
     expect(screen.getByText('Step 1')).toBeInTheDocument();
-    expect(screen.queryByText('Step 4')).not.toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Cycle: Step 4' }),
+    ).toHaveTextContent('+ 1');
+    expect(screen.getByText('Step 4')).toBeInTheDocument();
     expect(
       screen.getByTitle(
         'Maps and graphs, Reports and decision support, Datasets and indicators',
@@ -152,6 +155,22 @@ describe('NavigatorCatalogueCardItem', () => {
     });
   });
 
+  it('shows the cycle steps from the field used by the catalogue filter', () => {
+    renderCard({
+      title: 'Climate planning tool',
+      href: 'https://example.com/tool',
+      cca_adaptation_support_cycle_step: {
+        raw: ['Step 2: Assessing risks'],
+      },
+      adaptation_support_cycle_step: {
+        raw: [{ title: 'Step 1: Preparing the ground' }],
+      },
+    });
+
+    expect(screen.getByText('Step 2')).toBeInTheDocument();
+    expect(screen.queryByText('Step 1')).not.toBeInTheDocument();
+  });
+
   it('renders sparse results and disables comparison without a UID', () => {
     useCompareTools.mockReturnValue({
       isSelected: true,

package/src/components/Search/NavigatorGuide/NavigatorGuideContentView.jsx

@@ -6,10 +6,11 @@ import { defineMessages, useIntl } from 'react-intl';
 import { Button, Checkbox, Icon, Loader, Message } from 'semantic-ui-react';
 import URLManager from '@elastic/search-ui/lib/cjs/URLManager';
 import { useSearchContext } from '@eeacms/search/lib/hocs';
-import ToolThumbnail from '../../theme/ToolThumbnail/ToolThumbnail';
+import ToolThumbnail from '@eeacms/volto-cca-policy/components/theme/ToolThumbnail/ToolThumbnail';
 import guideSteps from '../../../search/navigator_guide/guideSteps';
 import { navigatorGuideStepAtom } from '../../../state';
-import { mergeGuideOptions } from './utils';
+import { mergeGuideOptions, sortAdaptationSteps } from './utils';
+import { rawValueAsArray } from '../NavigatorCatalogue/utils';
 import useGuideFacetOptions from './useGuideFacetOptions';
 import { getNavigatorCataloguePageURL } from '../../Search/NavigatorCatalogue/utils';
 
@@ -95,7 +96,7 @@ const isStepSelected = (filters, field) =>
 
 const previewTagTypes = {
   adaptationSectors: 'sector',
-  climateImpacts: 'hazard',
+  climateHazards: 'hazard',
   adaptationStage: 'adaptation-stage',
   coverage: 'coverage',
 };
@@ -130,31 +131,39 @@ const NavigatorGuideContentView = ({ appConfig }) => {
   const hasSelections = steps.some(({ field }) =>
     isStepSelected(filters, field),
   );
-  const options = mergeGuideOptions(
+  const mergedOptions = mergeGuideOptions(
     allFacetOptions?.[step?.field],
     getFacetOptions(facets, step?.field),
     selectedValues,
     hasSelections,
   );
+  const options =
+    step?.id === 'adaptationStage'
+      ? sortAdaptationSteps(mergedOptions)
+      : mergedOptions;
   const isLastStep = activeStep === steps.length - 1;
   const selectedStepLabels = steps
     .filter(({ field }) => isStepSelected(filters, field))
     .map(({ label }) =>
       intl.formatMessage(label).toLocaleLowerCase(currentLang),
     );
-  const selectedPreviewTags = steps.flatMap((item) => {
-    const values =
-      (filters || []).find((filter) => filter.field === item.field)?.values ||
-      [];
+  const selectedPreviewTags = (result) =>
+    steps.flatMap((item) => {
+      const values =
+        (filters || []).find((filter) => filter.field === item.field)?.values ||
+        [];
 
-    return values.map((value) => ({
-      label: item.id === 'adaptationStage' ? value.split(':')[0] : value,
-      type: previewTagTypes[item.id],
-    }));
-  });
-  const visiblePreviewTags = selectedPreviewTags.slice(0, 3);
-  const remainingPreviewTags =
-    selectedPreviewTags.length - visiblePreviewTags.length;
+      const resultValues = rawValueAsArray(
+        result[item.field.replace('.keyword', '')],
+      ).map((value) => value?.title || value);
+
+      return values
+        .filter((value) => resultValues.includes(value))
+        .map((value) => ({
+          label: item.id === 'adaptationStage' ? value.split(':')[0] : value,
+          type: previewTagTypes[item.id],
+        }));
+    });
 
   React.useEffect(() => {
     if (storedActiveStep !== activeStep) {
@@ -204,88 +213,94 @@ const NavigatorGuideContentView = ({ appConfig }) => {
 
       <div className="navigator-guide-layout">
         <section className="navigator-guide-wizard">
-          <div className="navigator-guide-progress">
-            {steps.map((item, index) => (
-              <React.Fragment key={item.id}>
-                <Button
-                  className={`navigator-guide-progress-step${
-                    index === activeStep ? ' active' : ''
-                  }${index < activeStep ? ' completed' : ''}`}
-                  aria-current={index === activeStep ? 'step' : undefined}
-                  onClick={() => setActiveStep(index)}
-                >
-                  <span>
-                    {isStepSelected(filters, item.field) ? (
-                      <Icon className="ri-check-line" />
-                    ) : (
-                      index + 1
+          <div className="navigator-guide-wizard-content">
+            <div className="navigator-guide-progress-wrapper">
+              <div className="navigator-guide-progress">
+                {steps.map((item, index) => (
+                  <React.Fragment key={item.id}>
+                    <Button
+                      className={`navigator-guide-progress-step${
+                        index === activeStep ? ' active' : ''
+                      }${index < activeStep ? ' completed' : ''}`}
+                      aria-current={index === activeStep ? 'step' : undefined}
+                      onClick={() => setActiveStep(index)}
+                    >
+                      <span>
+                        {isStepSelected(filters, item.field) ? (
+                          <Icon className="ri-check-line" />
+                        ) : (
+                          index + 1
+                        )}
+                      </span>
+                      {intl.formatMessage(item.label)}
+                    </Button>
+                    {index < steps.length - 1 && (
+                      <span
+                        className={`navigator-guide-progress-connector${
+                          index < activeStep ? ' completed' : ''
+                        }`}
+                        aria-hidden="true"
+                      />
                     )}
-                  </span>
-                  {intl.formatMessage(item.label)}
-                </Button>
-                {index < steps.length - 1 && (
-                  <span
-                    className={`navigator-guide-progress-connector${
-                      index < activeStep ? ' completed' : ''
-                    }`}
-                    aria-hidden="true"
-                  />
-                )}
-              </React.Fragment>
-            ))}
-          </div>
-          <div
-            className="navigator-guide-progress-bar"
-            role="progressbar"
-            aria-valuemin="1"
-            aria-valuemax={steps.length}
-            aria-valuenow={activeStep + 1}
-          >
-            <div
-              className="navigator-guide-progress-bar-fill"
-              style={{ width: `${((activeStep + 1) / steps.length) * 100}%` }}
-            />
-          </div>
+                  </React.Fragment>
+                ))}
+              </div>
+              <div
+                className="navigator-guide-progress-bar"
+                role="progressbar"
+                aria-valuemin="1"
+                aria-valuemax={steps.length}
+                aria-valuenow={activeStep + 1}
+              >
+                <div
+                  className="navigator-guide-progress-bar-fill"
+                  style={{
+                    width: `${((activeStep + 1) / steps.length) * 100}%`,
+                  }}
+                />
+              </div>
+              <div className="navigator-guide-step-meta">
+                <span className="navigator-guide-step-number">
+                  {intl.formatMessage(messages.stepProgress, {
+                    current: activeStep + 1,
+                    total: steps.length,
+                  })}
+                </span>
+                <span>{intl.formatMessage(messages.selectAllThatApply)}</span>
+              </div>
+            </div>
 
-          <div className="navigator-guide-step-meta">
-            <span className="navigator-guide-step-number">
-              {intl.formatMessage(messages.stepProgress, {
-                current: activeStep + 1,
-                total: steps.length,
-              })}
-            </span>
-            <span>{intl.formatMessage(messages.selectAllThatApply)}</span>
-          </div>
-          <h3>{intl.formatMessage(step.title)}</h3>
-          {step.description && <p>{intl.formatMessage(step.description)}</p>}
+            <h3>{intl.formatMessage(step.title)}</h3>
+            {step.description && <p>{intl.formatMessage(step.description)}</p>}
 
-          {isLoading ? (
-            <div className="navigator-guide-options-loading">
-              <Loader active inline />
-            </div>
-          ) : options.length > 0 ? (
-            <div className="navigator-guide-options">
-              {options.map((option) => (
-                <label
-                  key={option.value}
-                  className={`navigator-guide-option${
-                    selectedValues.includes(option.value) ? ' selected' : ''
-                  }${option.disabled ? ' disabled' : ''}`}
-                  aria-disabled={option.disabled || undefined}
-                >
-                  <Checkbox
-                    checked={selectedValues.includes(option.value)}
-                    disabled={option.disabled}
-                    onChange={() => toggleValue(option.value)}
-                  />
-                  <span>{option.value}</span>
-                  <small>{option.count}</small>
-                </label>
-              ))}
-            </div>
-          ) : (
-            <Message>{intl.formatMessage(messages.noOptions)}</Message>
-          )}
+            {isLoading ? (
+              <div className="navigator-guide-options-loading">
+                <Loader active inline />
+              </div>
+            ) : options.length > 0 ? (
+              <div className="navigator-guide-options">
+                {options.map((option) => (
+                  <label
+                    key={option.value}
+                    className={`navigator-guide-option${
+                      selectedValues.includes(option.value) ? ' selected' : ''
+                    }${option.disabled ? ' disabled' : ''}`}
+                    aria-disabled={option.disabled || undefined}
+                  >
+                    <Checkbox
+                      checked={selectedValues.includes(option.value)}
+                      disabled={option.disabled}
+                      onChange={() => toggleValue(option.value)}
+                    />
+                    <span>{option.value}</span>
+                    <small>{option.count}</small>
+                  </label>
+                ))}
+              </div>
+            ) : (
+              <Message>{intl.formatMessage(messages.noOptions)}</Message>
+            )}
+          </div>
 
           <div className="navigator-guide-actions">
             <Button
@@ -346,53 +361,56 @@ const NavigatorGuideContentView = ({ appConfig }) => {
               <div className="navigator-guide-preview-results">
                 {(results || [])
                   .slice(0, appConfig.previewResultsLimit)
-                  .map((result) => (
-                    <div
-                      className="navigator-guide-preview-result"
-                      key={result._original?._id || result.href}
-                    >
-                      <ToolThumbnail
-                        result={result}
-                        fallbackIcon="ri-stack-line"
-                      />
-                      <div className="navigator-guide-preview-result-content">
-                        <small
-                          className="navigator-tool-provider"
-                          title={result?._result?.tool_provider?.raw}
-                        >
-                          {result?._result?.tool_provider?.raw}
-                        </small>
-                        <a
-                          href={result.href}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="navigator-guide-preview-result-title"
-                          title={result.title}
-                        >
-                          <h5>{result.title}</h5>
-                        </a>
-                        {selectedPreviewTags.length > 0 && (
-                          <div className="navigator-guide-preview-tags">
-                            {visiblePreviewTags.map(
-                              ({ label, type }, index) => (
+                  .map((result) => {
+                    const tags = selectedPreviewTags(result);
+                    const visibleTags = tags.slice(0, 3);
+                    const remainingTags = tags.length - visibleTags.length;
+                    return (
+                      <div
+                        className="navigator-guide-preview-result"
+                        key={result._original?._id || result.href}
+                      >
+                        <ToolThumbnail
+                          result={result}
+                          fallbackIcon="ri-stack-line"
+                        />
+                        <div className="navigator-guide-preview-result-content">
+                          <small
+                            className="navigator-tool-provider"
+                            title={result?._result?.tool_provider?.raw}
+                          >
+                            {result?._result?.tool_provider?.raw}
+                          </small>
+                          <a
+                            href={result.href}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="navigator-guide-preview-result-title"
+                            title={result.title}
+                          >
+                            <h5>{result.title}</h5>
+                          </a>
+                          {tags.length > 0 && (
+                            <div className="navigator-guide-preview-tags">
+                              {visibleTags.map(({ label, type }, index) => (
                                 <span
                                   className={`navigator-tag ${type}`}
                                   key={`${type}-${label}-${index}`}
                                 >
                                   {label}
                                 </span>
-                              ),
-                            )}
-                            {remainingPreviewTags > 0 && (
-                              <span className="navigator-guide-preview-tag-more">
-                                + {remainingPreviewTags}
-                              </span>
-                            )}
-                          </div>
-                        )}
+                              ))}
+                              {remainingTags > 0 && (
+                                <span className="navigator-guide-preview-tag-more">
+                                  + {remainingTags}
+                                </span>
+                              )}
+                            </div>
+                          )}
+                        </div>
                       </div>
-                    </div>
-                  ))}
+                    );
+                  })}
               </div>
               <Button
                 labelPosition="right"