fix(OpenUI5Support): override default [popover] styles (#12301)

* fix(OpenUI5Support): override default [popover] styles

* chore: make selector more specific

Author: TeodorTaushanov

packages/base/src/css/OpenUI5PopupStyles.css

@@ -0,0 +1,5 @@
+[data-sap-ui-popup][popover] {
+	border: none;
+	overflow: visible;
+	margin: 0;
+}

packages/base/src/features/insertOpenUI5PopupStyles.ts

@@ -0,0 +1,10 @@
+import { hasStyle, createStyle } from "../ManagedStyles.js";
+import openUI5PopupStyles from "../generated/css/OpenUI5PopupStyles.css.js";
+
+const insertOpenUI5PopupStyles = () => {
+	if (!hasStyle("data-ui5-popup-styles")) {
+		createStyle(openUI5PopupStyles, "data-ui5-popup-styles");
+	}
+};
+
+export default insertOpenUI5PopupStyles;

packages/base/src/features/patchPopup.ts

@@ -1,5 +1,6 @@
 // OpenUI5's Control.js subset
 import getSharedResource from "../getSharedResource.js";
+import insertOpenUI5PopupStyles from "./insertOpenUI5PopupStyles.js";
 
 type Control = {
 	getDomRef: () => HTMLElement | null,
@@ -137,6 +138,7 @@ const createGlobalStyles = () => {
 };
 
 const patchPopup = (Popup: OpenUI5Popup) => {
+	insertOpenUI5PopupStyles();
 	patchOpen(Popup); // Popup.prototype.open
 	patchClosed(Popup); // Popup.prototype._closed
 	createGlobalStyles(); // Ensures correct popover positioning by OpenUI5 (otherwise 0,0 is the center of the screen)