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 );