From 71846f327e88be25c09d7e0c981240dc7d28278b Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 10 Jan 2024 00:22:17 +0000
Subject: [PATCH 1/2] Fix Stickerpicker layout crossing multiple CSS stacking
 contexts

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/rooms/_Stickers.pcss           |  4 +-
 src/components/views/rooms/Stickerpicker.tsx | 55 ++++++--------------
 2 files changed, 18 insertions(+), 41 deletions(-)

diff --git a/res/css/views/rooms/_Stickers.pcss b/res/css/views/rooms/_Stickers.pcss
index 75d947f4994..7375d9fcd4c 100644
--- a/res/css/views/rooms/_Stickers.pcss
+++ b/res/css/views/rooms/_Stickers.pcss
@@ -5,11 +5,9 @@
 .mx_Stickers_content_container {
     overflow: hidden;
     height: 300px;
-}
 
-#mx_persistedElement_stickerPicker {
     .mx_AppTileFullWidth {
-        height: unset;
+        height: 100%;
         box-sizing: border-box;
         border-left: none;
         border-right: none;
diff --git a/src/components/views/rooms/Stickerpicker.tsx b/src/components/views/rooms/Stickerpicker.tsx
index a34344c853b..aa2536de46b 100644
--- a/src/components/views/rooms/Stickerpicker.tsx
+++ b/src/components/views/rooms/Stickerpicker.tsx
@@ -25,7 +25,6 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import dis from "../../../dispatcher/dispatcher";
 import AccessibleButton from "../elements/AccessibleButton";
 import WidgetUtils, { UserWidget } from "../../../utils/WidgetUtils";
-import PersistedElement from "../elements/PersistedElement";
 import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
 import ContextMenu, { ChevronFace } from "../../structures/ContextMenu";
 import { WidgetType } from "../../../widgets/WidgetType";
@@ -40,9 +39,6 @@ import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 // We sit in a context menu, so this should be given to the context menu.
 const STICKERPICKER_Z_INDEX = 3500;
 
-// Key to store the widget's AppTile under in PersistedElement
-const PERSISTED_ELEMENT_KEY = "stickerPicker";
-
 interface IProps {
     room: Room;
     threadId?: string | null;
@@ -62,8 +58,6 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
         threadId: null,
     };
 
-    public static currentWidget?: UserWidget;
-
     private dispatcherRef?: string;
 
     private prevSentVisibility?: boolean;
@@ -170,21 +164,10 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
     private updateWidget = (): void => {
         const stickerpickerWidget = WidgetUtils.getStickerpickerWidgets(this.props.room.client)[0];
         if (!stickerpickerWidget) {
-            Stickerpicker.currentWidget = undefined;
             this.setState({ stickerpickerWidget: null, widgetId: null });
             return;
         }
 
-        const currentWidget = Stickerpicker.currentWidget;
-        const currentUrl = currentWidget?.content?.url ?? null;
-        const newUrl = stickerpickerWidget?.content?.url ?? null;
-
-        if (newUrl !== currentUrl) {
-            // Destroy the existing frame so a new one can be created
-            PersistedElement.destroyElement(PERSISTED_ELEMENT_KEY);
-        }
-
-        Stickerpicker.currentWidget = stickerpickerWidget;
         this.setState({
             stickerpickerWidget,
             widgetId: stickerpickerWidget ? stickerpickerWidget.id : null,
@@ -284,27 +267,23 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
                             width: this.popoverWidth,
                         }}
                     >
-                        <PersistedElement persistKey={PERSISTED_ELEMENT_KEY} zIndex={STICKERPICKER_Z_INDEX}>
-                            <AppTile
-                                app={stickerApp}
-                                room={this.props.room}
-                                threadId={this.props.threadId}
-                                fullWidth={true}
-                                userId={MatrixClientPeg.safeGet().credentials.userId!}
-                                creatorUserId={
-                                    stickerpickerWidget.sender || MatrixClientPeg.safeGet().credentials.userId!
-                                }
-                                waitForIframeLoad={true}
-                                showMenubar={true}
-                                onEditClick={this.launchManageIntegrations}
-                                onDeleteClick={this.removeStickerpickerWidgets}
-                                showTitle={false}
-                                showPopout={false}
-                                handleMinimisePointerEvents={true}
-                                userWidget={true}
-                                showLayoutButtons={false}
-                            />
-                        </PersistedElement>
+                        <AppTile
+                            app={stickerApp}
+                            room={this.props.room}
+                            threadId={this.props.threadId}
+                            fullWidth={true}
+                            userId={MatrixClientPeg.safeGet().credentials.userId!}
+                            creatorUserId={stickerpickerWidget.sender || MatrixClientPeg.safeGet().credentials.userId!}
+                            waitForIframeLoad={true}
+                            showMenubar={true}
+                            onEditClick={this.launchManageIntegrations}
+                            onDeleteClick={this.removeStickerpickerWidgets}
+                            showTitle={false}
+                            showPopout={false}
+                            handleMinimisePointerEvents={true}
+                            userWidget={true}
+                            showLayoutButtons={false}
+                        />
                     </div>
                 </div>
             );

From 6aa88f5557d5b7e5b9d071fe5c7171ce43445f47 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 10 Jan 2024 01:48:46 +0000
Subject: [PATCH 2/2] Mount stickerpicker contextmenu as child instead to avoid
 crossing css stacking contexts

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 res/css/views/rooms/_Stickers.pcss           |  4 +-
 src/components/views/rooms/Stickerpicker.tsx | 56 ++++++++++++++------
 2 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/res/css/views/rooms/_Stickers.pcss b/res/css/views/rooms/_Stickers.pcss
index 7375d9fcd4c..75d947f4994 100644
--- a/res/css/views/rooms/_Stickers.pcss
+++ b/res/css/views/rooms/_Stickers.pcss
@@ -5,9 +5,11 @@
 .mx_Stickers_content_container {
     overflow: hidden;
     height: 300px;
+}
 
+#mx_persistedElement_stickerPicker {
     .mx_AppTileFullWidth {
-        height: 100%;
+        height: unset;
         box-sizing: border-box;
         border-left: none;
         border-right: none;
diff --git a/src/components/views/rooms/Stickerpicker.tsx b/src/components/views/rooms/Stickerpicker.tsx
index aa2536de46b..89a66219ccc 100644
--- a/src/components/views/rooms/Stickerpicker.tsx
+++ b/src/components/views/rooms/Stickerpicker.tsx
@@ -25,6 +25,7 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import dis from "../../../dispatcher/dispatcher";
 import AccessibleButton from "../elements/AccessibleButton";
 import WidgetUtils, { UserWidget } from "../../../utils/WidgetUtils";
+import PersistedElement from "../elements/PersistedElement";
 import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
 import ContextMenu, { ChevronFace } from "../../structures/ContextMenu";
 import { WidgetType } from "../../../widgets/WidgetType";
@@ -39,6 +40,9 @@ import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 // We sit in a context menu, so this should be given to the context menu.
 const STICKERPICKER_Z_INDEX = 3500;
 
+// Key to store the widget's AppTile under in PersistedElement
+const PERSISTED_ELEMENT_KEY = "stickerPicker";
+
 interface IProps {
     room: Room;
     threadId?: string | null;
@@ -58,6 +62,8 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
         threadId: null,
     };
 
+    public static currentWidget?: UserWidget;
+
     private dispatcherRef?: string;
 
     private prevSentVisibility?: boolean;
@@ -164,10 +170,21 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
     private updateWidget = (): void => {
         const stickerpickerWidget = WidgetUtils.getStickerpickerWidgets(this.props.room.client)[0];
         if (!stickerpickerWidget) {
+            Stickerpicker.currentWidget = undefined;
             this.setState({ stickerpickerWidget: null, widgetId: null });
             return;
         }
 
+        const currentWidget = Stickerpicker.currentWidget;
+        const currentUrl = currentWidget?.content?.url ?? null;
+        const newUrl = stickerpickerWidget?.content?.url ?? null;
+
+        if (newUrl !== currentUrl) {
+            // Destroy the existing frame so a new one can be created
+            PersistedElement.destroyElement(PERSISTED_ELEMENT_KEY);
+        }
+
+        Stickerpicker.currentWidget = stickerpickerWidget;
         this.setState({
             stickerpickerWidget,
             widgetId: stickerpickerWidget ? stickerpickerWidget.id : null,
@@ -267,23 +284,27 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
                             width: this.popoverWidth,
                         }}
                     >
-                        <AppTile
-                            app={stickerApp}
-                            room={this.props.room}
-                            threadId={this.props.threadId}
-                            fullWidth={true}
-                            userId={MatrixClientPeg.safeGet().credentials.userId!}
-                            creatorUserId={stickerpickerWidget.sender || MatrixClientPeg.safeGet().credentials.userId!}
-                            waitForIframeLoad={true}
-                            showMenubar={true}
-                            onEditClick={this.launchManageIntegrations}
-                            onDeleteClick={this.removeStickerpickerWidgets}
-                            showTitle={false}
-                            showPopout={false}
-                            handleMinimisePointerEvents={true}
-                            userWidget={true}
-                            showLayoutButtons={false}
-                        />
+                        <PersistedElement persistKey={PERSISTED_ELEMENT_KEY} zIndex={STICKERPICKER_Z_INDEX}>
+                            <AppTile
+                                app={stickerApp}
+                                room={this.props.room}
+                                threadId={this.props.threadId}
+                                fullWidth={true}
+                                userId={MatrixClientPeg.safeGet().credentials.userId!}
+                                creatorUserId={
+                                    stickerpickerWidget.sender || MatrixClientPeg.safeGet().credentials.userId!
+                                }
+                                waitForIframeLoad={true}
+                                showMenubar={true}
+                                onEditClick={this.launchManageIntegrations}
+                                onDeleteClick={this.removeStickerpickerWidgets}
+                                showTitle={false}
+                                showPopout={false}
+                                handleMinimisePointerEvents={true}
+                                userWidget={true}
+                                showLayoutButtons={false}
+                            />
+                        </PersistedElement>
                     </div>
                 </div>
             );
@@ -335,6 +356,7 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
                 menuPaddingLeft={0}
                 menuPaddingRight={0}
                 zIndex={STICKERPICKER_Z_INDEX}
+                mountAsChild={true}
                 {...this.props.menuPosition}
             >
                 <GenericElementContextMenu element={this.getStickerpickerContent()} onResize={this.onFinished} />