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.
This commit is contained in:
James Brunton 2025-10-29 09:56:16 +00:00 committed by GitHub
parent d0c5d74471
commit ef177be918
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 14 additions and 4 deletions

View File

@ -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;

View File

@ -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%;