From ef177be918264ebc6adef84c43db0c50841e1093 Mon Sep 17 00:00:00 2001
From: James Brunton <jbrunton96@gmail.com>
Date: Wed, 29 Oct 2025 09:56:16 +0000
Subject: [PATCH] Fix issues with fullscreen tools on Safari (#4757)

# Description of Changes
Fix issues with fullscreen tools not rendering and throwing SVG errors
in the console on Safari.
---
 .../src/core/components/shared/LocalIcon.tsx     | 16 ++++++++++++++--
 frontend/src/core/components/tools/ToolPanel.css |  2 --
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/frontend/src/core/components/shared/LocalIcon.tsx b/frontend/src/core/components/shared/LocalIcon.tsx
index 25f85688c..9701f6ace 100644
--- a/frontend/src/core/components/shared/LocalIcon.tsx
+++ b/frontend/src/core/components/shared/LocalIcon.tsx
@@ -29,7 +29,7 @@ interface LocalIconProps {
  * LocalIcon component that uses our locally bundled Material Symbols icons
  * instead of loading from CDN
  */
-export const LocalIcon: React.FC<LocalIconProps> = ({ icon, ...props }) => {
+export const LocalIcon: React.FC<LocalIconProps> = ({ icon, width, height, style, ...props }) => {
   // Convert our icon naming convention to the local collection format
   const iconName = icon.startsWith('material-symbols:')
     ? icon
@@ -45,8 +45,20 @@ export const LocalIcon: React.FC<LocalIconProps> = ({ icon, ...props }) => {
     }
   }
 
+  const iconStyle: React.CSSProperties = { ...style };
+
+  // Use width if provided, otherwise fall back to height
+  const size = width || height;
+  if (size && typeof size === 'string') {
+    // If it's a CSS unit string (like '1.5rem'), use it as fontSize
+    iconStyle.fontSize = size;
+  } else if (typeof size === 'number') {
+    // If it's a number, treat it as pixels
+    iconStyle.fontSize = `${size}px`;
+  }
+
   // Always render the icon - Iconify will use local if available, CDN if not
-  return <Icon icon={iconName} {...props} />;
+  return <Icon icon={iconName} style={iconStyle} {...props} />;
 };
 
 export default LocalIcon;
diff --git a/frontend/src/core/components/tools/ToolPanel.css b/frontend/src/core/components/tools/ToolPanel.css
index b8b50ae3d..0e6861abd 100644
--- a/frontend/src/core/components/tools/ToolPanel.css
+++ b/frontend/src/core/components/tools/ToolPanel.css
@@ -187,7 +187,6 @@
   border: 1px solid var(--fullscreen-border-subtle-65);
   box-shadow: 0 14px 32px var(--fullscreen-shadow-group);
   break-inside: avoid;
-  backdrop-filter: blur(10px);
 }
 
 .tool-panel__fullscreen-section-header {
@@ -230,7 +229,6 @@
   border: 1px solid var(--fullscreen-border-subtle-70);
   border-radius: 0.95rem;
   background: var(--fullscreen-bg-item);
-  backdrop-filter: blur(6px);
   cursor: pointer;
   transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
   width: 100%;