From ef177be918264ebc6adef84c43db0c50841e1093 Mon Sep 17 00:00:00 2001 From: James Brunton Date: Wed, 29 Oct 2025 09:56:16 +0000 Subject: [PATCH 1/2] 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 = ({ icon, ...props }) => { +export const LocalIcon: React.FC = ({ 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 = ({ 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 ; + return ; }; 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%; From 8060934ee9fd8aef3ed0af26439c6c11cec0b043 Mon Sep 17 00:00:00 2001 From: James Brunton Date: Wed, 29 Oct 2025 11:58:04 +0000 Subject: [PATCH 2/2] Add linting to ensure correct imports style is used (#4759) # Description of Changes Add linting to ensure correct imports style is used. I've disabled the linting for two imports which use relative paths because the files they're importing are siblings to core and proprietary. They could probs be imported by `@app/../assets/xxx` but it seems silly. The other thing we could do is add an explicit `@assets` path alias or something, but it seemed more complex than just disabling the lint for those two imports at this stage. We could always do it in the future if we want to import stuff up there a lot in the future. --- frontend/eslint.config.mjs | 9 +++++++++ frontend/src/core/components/shared/LocalIcon.tsx | 2 +- frontend/src/index.tsx | 2 +- 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/frontend/eslint.config.mjs b/frontend/eslint.config.mjs index c4c826183..89928251b 100644 --- a/frontend/eslint.config.mjs +++ b/frontend/eslint.config.mjs @@ -27,6 +27,15 @@ export default defineConfig( tseslint.configs.recommended, { rules: { + 'no-restricted-imports': [ + 'error', + { + patterns: [ + ".*", // Disallow any relative imports (they should be '@app/x/y/z' or similar) + "src/*", // Disallow any absolute imports (they should be '@app/x/y/z' or similar) + ], + }, + ], '@typescript-eslint/no-empty-object-type': [ 'error', { diff --git a/frontend/src/core/components/shared/LocalIcon.tsx b/frontend/src/core/components/shared/LocalIcon.tsx index 9701f6ace..a9b7198fc 100644 --- a/frontend/src/core/components/shared/LocalIcon.tsx +++ b/frontend/src/core/components/shared/LocalIcon.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { addCollection, Icon } from '@iconify/react'; -import iconSet from '../../../assets/material-symbols-icons.json'; +import iconSet from '../../../assets/material-symbols-icons.json'; // eslint-disable-line no-restricted-imports -- Outside app paths // Load icons synchronously at import time - guaranteed to be ready on first render let iconsLoaded = false; diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index c8e9081c1..c52fb3753 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -1,6 +1,6 @@ import '@mantine/core/styles.css'; import '@mantine/dates/styles.css'; -import '../vite-env.d.ts'; +import '../vite-env.d.ts'; // eslint-disable-line no-restricted-imports -- Outside app paths import '@app/styles/index.css'; // Import global styles import React from 'react'; import ReactDOM from 'react-dom/client';