diff --git a/src/components/composer/composer/composer.ts b/src/components/composer/composer/composer.ts index c7145d8e0b..b799a41544 100644 --- a/src/components/composer/composer/composer.ts +++ b/src/components/composer/composer/composer.ts @@ -234,7 +234,8 @@ export class Composer extends Component assistantStyle["max-height"] = `${availableSpaceAbove - CLOSE_ICON_RADIUS}px`; // render top // We compensate 2 px of margin on the assistant style + 1px for design reasons - assistantStyle.transform = `translate(0, calc(-100% - ${cellHeight + 3}px))`; + assistantStyle.top = `-3px`; + assistantStyle.transform = `translate(0, -100%)`; } if (cellX + ASSISTANT_WIDTH > this.props.delimitation.width) { // render left diff --git a/src/components/small_bottom_bar/small_bottom_bar.ts b/src/components/small_bottom_bar/small_bottom_bar.ts index 749b7775c0..c2974463b3 100644 --- a/src/components/small_bottom_bar/small_bottom_bar.ts +++ b/src/components/small_bottom_bar/small_bottom_bar.ts @@ -8,7 +8,7 @@ import { CellComposerStore } from "../composer/composer/cell_composer_store"; import { CellComposerProps, Composer } from "../composer/composer/composer"; import { ComposerFocusStore, ComposerInterface } from "../composer/composer_focus_store"; import { css, cssPropertiesToCss } from "../helpers"; -import { getBoundingRectAsPOJO, isIOS } from "../helpers/dom_helpers"; +import { getBoundingRectAsPOJO } from "../helpers/dom_helpers"; import { RibbonMenu } from "./ribbon_menu/ribbon_menu"; interface Props { @@ -105,7 +105,7 @@ export class SmallBottomBar extends Component { height: this.focus === "inactive" ? "26px" : "fit-content", "max-height": `130px`, }), - showAssistant: !isIOS(), // Hide assistant on iOS as it breaks visually + showAssistant: false, // Hide assistant in small composer as it gets cropped ATM placeholder: this.composerStore.placeholder, }; } diff --git a/tests/composer/autocomplete_dropdown_component.test.ts b/tests/composer/autocomplete_dropdown_component.test.ts index faf856fb17..079c7233cb 100644 --- a/tests/composer/autocomplete_dropdown_component.test.ts +++ b/tests/composer/autocomplete_dropdown_component.test.ts @@ -560,8 +560,9 @@ describe("composer Assistant", () => { expect(assistantEL).toMatchSnapshot(); expect(assistantEL.style.width).toBe("300px"); const containerEL = fixture.querySelector(".o-composer-assistant-container")!; - const marginsOffset = rect.height + 3; // 3px for the border and margin - expect(containerEL.style.transform).toBe(`translate(0, calc(-100% - ${marginsOffset}px))`); + + expect(containerEL.style.top).toBe(`-3px`); // 3px for the border and margin + expect(containerEL.style.transform).toBe(`translate(0, -100%)`); }); test("composer assistant min-width is the same as the underlying cell", async () => {