diff --git a/projects/plugins/jetpack/changelog/fix-ai-assistant-bar-positioning-mobile b/projects/plugins/jetpack/changelog/fix-ai-assistant-bar-positioning-mobile new file mode 100644 index 0000000000000..b638349518fc2 --- /dev/null +++ b/projects/plugins/jetpack/changelog/fix-ai-assistant-bar-positioning-mobile @@ -0,0 +1,4 @@ +Significance: minor +Type: enhancement + +AI Assistant bar: fix issues introduced by latest block sticky positioning, make sure assistant bar is always AFTER main toolbar diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/jetpack-contact-form/components/ai-assistant-bar/index.tsx b/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/jetpack-contact-form/components/ai-assistant-bar/index.tsx index fbad746b7bc74..11cafff9fe237 100644 --- a/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/jetpack-contact-form/components/ai-assistant-bar/index.tsx +++ b/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/jetpack-contact-form/components/ai-assistant-bar/index.tsx @@ -230,42 +230,44 @@ export default function AiAssistantBar( { // Assistant bar component. const AiAssistantBarComponent = ( - { - if ( [ 'requesting', 'suggesting' ].includes( requestingState ) ) { - handleStopSuggestion(); - } - }, - } } - > -
+ { + if ( [ 'requesting', 'suggesting' ].includes( requestingState ) ) { + handleStopSuggestion(); + } + }, + } } > - { siteRequireUpgrade && } - { ! connected && } - -
-
+
+ { siteRequireUpgrade && } + { ! connected && } + +
+ + ); // Check if the Assistant bar should be rendered in the Assistant anchor (fixed mode) diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/jetpack-contact-form/components/ai-assistant-bar/style.scss b/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/jetpack-contact-form/components/ai-assistant-bar/style.scss index 8141a6c487a6f..85f51e4f545e0 100644 --- a/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/jetpack-contact-form/components/ai-assistant-bar/style.scss +++ b/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/jetpack-contact-form/components/ai-assistant-bar/style.scss @@ -4,13 +4,14 @@ &:not(.is-fixed) { position: relative; z-index: 30; - margin-top: 10px; - background-color: white; } &.is-fixed { - border-bottom: 1px solid #e0e0e0; + .jetpack-components-ai-control__container-wrapper { + position: relative; + padding-bottom: 0; + } .jetpack-components-ai-control__container { border-radius: 0; @@ -29,4 +30,14 @@ display: block; position: sticky; z-index: 31; + + .jetpack-ai-assistant__bar-wrapper { + position: relative; + } +} + +.jetpack-ai-assistant__bar-wrapper { + position: sticky; + bottom: 0; + z-index: 30; } diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/jetpack-contact-form/components/ai-assistant-toolbar-button/index.tsx b/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/jetpack-contact-form/components/ai-assistant-toolbar-button/index.tsx index 9cffc0ba89d41..08ee47fca6549 100644 --- a/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/jetpack-contact-form/components/ai-assistant-toolbar-button/index.tsx +++ b/projects/plugins/jetpack/extensions/blocks/ai-assistant/extensions/jetpack-contact-form/components/ai-assistant-toolbar-button/index.tsx @@ -69,7 +69,10 @@ export default function AiAssistantToolbarButton( { let slot = toolbar.parentElement?.querySelector( `.${ AI_ASSISTANT_BAR_SLOT_CLASS }` ) as HTMLElement; + if ( slot ) { + // always move the slot right after the toolbar. + toolbar.after( slot ); return setAnchor( slot ); } @@ -81,11 +84,11 @@ export default function AiAssistantToolbarButton( { slot.setAttribute( 'aria-label', __( 'AI Assistant', 'jetpack' ) ); slot.setAttribute( 'aria-orientation', 'horizontal' ); slot.className = AI_ASSISTANT_BAR_SLOT_CLASS; - toolbar.after( slot ); // Set the top position based on the toolbar height. const toolbarHeight = toolbar.offsetHeight; slot.style.top = `${ toolbarHeight }px`; + toolbar.after( slot ); // Set the anchor where the Assistant Bar will be rendered. setAnchor( slot );