AB#10000 bugfix(CSA-85062): moved the text from gallery card title into textbox

[conner-nice]

What

Fixes CSA-85062. The Gallery card title was rendered as an absolutely-positioned overlay on top of the image, leaving it unreadable on light-background images. Moves the title into the text content block beneath the image, restoring the pre-C26 behavior.

Visual comparison

Left: previous version. Right: C26. After this fix, C26 matches the previous version.

Changes

• src/messages/Gallery/GalleryItem.tsx — moved the title <Typography component="h4"> out of the .top (image) container and into the .bottom (content) block alongside subtitle and buttons. Title is now gated on title && so cards without one render cleanly. Renamed hasExtraInfo → hasContent and folded title into the gate so a title-only card still gets a content block.
• src/messages/Gallery/Gallery.module.css — removed the absolute-positioned overlay rule for .slideItem .top h4; added h4 to the same margin/padding reset as p inside .slideItem .bottom.
• test/Gallery.spec.tsx — two new tests verifying the title lives inside .webchat-carousel-template-content (i.e. below the image, not overlaying it), including the title-only-card edge case.
• package.json — version bump 0.72.0 → 0.74.1.

How to test

• npm test — the Gallery suite now asserts the title is in the content block and not the image container.
• Manually: render a gallery card whose image has a light/white background; title and subtitle should sit in the text panel beneath the image, fully readable.

Downstream

Cognigy.AI monorepo will bump @cognigy/chat-components in microfrontends/interaction-panel/package.json once this is released.

[snyk-io]

✅ Snyk checks have passed. No issues have been found so far.

Status	Scan Engine	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

[Copilot]

Pull request overview

This PR fixes the gallery card layout so slide titles no longer overlay the image; instead, the title is rendered in the text/content block beneath the image (matching the older/C26 behavior described in the PR).

Changes:

• Updated GalleryItem rendering logic so the content block is shown when a title exists, and moved the title <h4> into that content block.
• Updated gallery CSS to remove the absolute-positioned overlay title styling and normalize title/subtitle spacing in the bottom content area.
• Added tests to assert the title is rendered beneath the image (including a case with no subtitle/buttons), and bumped the package version.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

File	Description
test/Gallery.spec.tsx	Adds assertions ensuring gallery titles are rendered in the content area below the image.
src/messages/Gallery/GalleryItem.tsx	Moves title rendering into the content block and adjusts when the content block is rendered.
src/messages/Gallery/Gallery.module.css	Removes overlay title positioning and normalizes bottom content typography spacing.
package.json	Bumps library version.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[conner-nice]

Synced in 25943ba — package-lock.json's root version is now 0.74.1 to match package.json.

[sushmi21]

This change also affects Webchat v3 and needs to be discussed with our PO first. We previously agreed to introduce a dedicated endpoint setting so customers can choose themselves whether the title appears inside or below the image. We need to make sure this change doesn't conflict with or silently override that decision. (AB#63575)

[sushmi21]

Rework to add a new setting to descide the title positon

• types.ts — add galleryCardTitleBelowImage: boolean to IWebchatSettings.layout (types.ts:12). Default semantics: false/unset = overlay.

• GalleryItem.tsx — read config?.settings?.layout?.galleryCardTitleBelowImage. Restore the overlay title in .top as the default path (PR deleted it); render the title in .bottom only when the flag is on.

• Gallery.module.css — re-add the absolute-positioned .slideItem .top h4 overlay rule (PR removed it); keep the .bottom h4 reset for the opt-in path.

• Gallery.spec.tsx — the two current tests assert below-image unconditionally and will now fail. Split into: default render → title in .top (overlay); flag-on render → title in .webchat-carousel-template-content. Pass the flag via config={{ settings: { layout: { galleryCardTitleBelowImage: true } } }} (idiom from Text.spec.tsx:78).

• dom-compat.spec.tsx — please revert to main. This file only checks that the rendered DOM still matches the published baseline so nothing breaks in Webchat, and shouldn't be modified. With overlay back as the default, the gallery renders the same as the baseline, so there's nothing here that needs changing.