improve display of foreign elements

molikk · Jan 2, 2025 · 943ed5a · 943ed5a
1 parent d8a776e
commit 943ed5a
Showing 1 changed file with 4 additions and 8 deletions.
diff --git a/src/cards/compact/loadUtils.ts b/src/cards/compact/loadUtils.ts
@@ -10,12 +10,10 @@ export class LoadUtils {
 	static getIconWithCondition(condition: boolean, x: number, y: number, icon: string, style_class: string, size = 30) {
 		return svg`
 			<g display="${condition ? '' : 'none'}">
-				<foreignObject x="${x}" y="${y}" width="${size}" height="${size}" style="position: fixed; ">
-					<body xmlns="http://www.w3.org/1999/xhtml">
-					<div style="position: fixed; ">
+				<foreignObject x="${x}" y="${y}" width="${size}" height="${size}">
+					<div xmlns="http://www.w3.org/1999/xhtml" style="position: fixed; width: ${size}px; height: ${size}px;">
 						<ha-icon icon="${icon}" class="${style_class}"></ha-icon>
 					</div>
-					</body>
 				</foreignObject>
 			</g>`;
 	}
@@ -27,12 +25,10 @@ export class LoadUtils {
 	static getIconWithStyleAndCondition(condition: boolean, x: number, y: number, icon: string, color: string, size = 30, icon_size = 20) {
 		return svg`
 			<g display="${condition ? '' : 'none'}">
-				<foreignObject x="${x}" y="${y}" width="${size}" height="${size}" style="position: fixed; ">
-					<body xmlns="http://www.w3.org/1999/xhtml">
-					<div style="position: fixed; ">
+				<foreignObject x="${x}" y="${y}" width="${size}" height="${size}">
+					<div xmlns="http://www.w3.org/1999/xhtml" style="position: fixed; width: ${size}px; height: ${size}px;">
 						<ha-icon icon="${icon}" style="color: ${color} !important; --mdc-icon-size: ${icon_size}px;"></ha-icon>
 					</div>
-					</body>
 				</foreignObject>
 			</g>`;
 	}