[eric] canvas: card surfaces drop their box shadows; a shadow on every window, composer and hover is raster paid on every pan for nothing

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PNA9xhjw5SkfuB2tJ5KwCj
This commit is contained in:
ciregenz
2026-09-01 15:40:45 -07:00
co-authored by Claude Fable 5.1
parent 1718f30806
commit d68ee068e6
6 changed files with 6 additions and 10 deletions
@@ -2166,7 +2166,6 @@ const AgentChat: React.FC<AgentChatProps> = ({ sessionId: sessionIdProp, onClose
width: 36,
height: 36,
'&:hover': { bgcolor: c.bg.secondary },
boxShadow: c.shadow.md,
zIndex: 1,
}}
>
@@ -128,7 +128,6 @@ export const ChatInputView: React.FC<Props> = (p) => {
borderRadius: '16px',
border: p.isDragOver ? `1px solid ${c.accent.primary}` : `1px solid ${c.border.subtle}`,
bgcolor: c.bg.surface,
boxShadow: c.shadow.md,
transition: 'border-color 0.15s',
}),
}}
@@ -50,8 +50,8 @@ const BrowserEmbed: React.FC<{ c: ClaudeTokens; browserId: string; title: string
onClick={onOpen}
sx={{
border: `1px solid ${c.border.subtle}`, borderRadius: 2, overflow: 'hidden', cursor: 'pointer',
bgcolor: c.bg.elevated, transition: 'border-color 150ms, box-shadow 150ms',
'&:hover': { borderColor: c.border.strong, boxShadow: c.shadow.md },
bgcolor: c.bg.elevated, transition: 'border-color 150ms',
'&:hover': { borderColor: c.border.strong },
'&:hover .osw-embed-open': { opacity: 1 },
}}
>
@@ -101,8 +101,8 @@ const AppEmbed: React.FC<{ c: ClaudeTokens; name: string; thumbnail: string | nu
onClick={onOpen}
sx={{
border: `1px solid ${c.border.subtle}`, borderRadius: 2, overflow: 'hidden', cursor: 'pointer',
bgcolor: c.bg.elevated, transition: 'border-color 150ms, box-shadow 150ms',
'&:hover': { borderColor: c.border.strong, boxShadow: c.shadow.md },
bgcolor: c.bg.elevated, transition: 'border-color 150ms',
'&:hover': { borderColor: c.border.strong },
'&:hover .osw-embed-open': { opacity: 1 },
}}
>
@@ -219,12 +219,11 @@ const CanvasWindowCard: React.FC<CanvasWindowCardProps> = ({
background,
border: tiling.isFullscreen ? 'none' : border,
borderRadius: c.radius.lg,
boxShadow: (isDragging || isResizing) ? c.shadow.lg : c.shadow.md,
overflow: 'hidden',
display: 'flex',
flexDirection: 'column',
zIndex: tiledSize ? 999990 : (isDragging || isResizing) ? 999999 : (zOverride ?? cardZOrder),
transition: noTransition ? 'none' : 'box-shadow 0.3s ease, border-color 0.2s ease',
transition: noTransition ? 'none' : 'border-color 0.2s ease',
}}
>
{children({
@@ -132,7 +132,7 @@ const OpenSwarmProCard: React.FC = () => {
<Box sx={{
p: 1.5, borderRadius: `${c.radius.md}px`, border: `1px solid ${c.border.subtle}`,
transition: c.transition,
'&:hover': { borderColor: c.border.medium, boxShadow: c.shadow.sm },
'&:hover': { borderColor: c.border.medium },
}}>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, minWidth: 0 }}>
@@ -40,7 +40,6 @@ const SubscriptionCard: React.FC<Props> = ({
transition: c.transition,
'&:hover': provider.preview ? {} : {
borderColor: connected ? c.status.success + '4d' : c.border.medium,
boxShadow: c.shadow.sm,
},
}}>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 1 }}>