From 4c00d92ccb6cd73d1572810f4ea990e08d66addd Mon Sep 17 00:00:00 2001 From: Thomas Hallock Date: Mon, 8 Dec 2025 11:14:02 -0600 Subject: [PATCH] fix(practice): use explicit padding to prevent shorthand override MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace padding shorthand with explicit paddingTop/Right/Bottom/Left values to ensure the extra 4rem top padding for help overlays is applied correctly. CSS shorthand properties can override specific properties depending on declaration order. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- apps/web/src/components/practice/ActiveSession.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/apps/web/src/components/practice/ActiveSession.tsx b/apps/web/src/components/practice/ActiveSession.tsx index f03d06e9..09971a7b 100644 --- a/apps/web/src/components/practice/ActiveSession.tsx +++ b/apps/web/src/components/practice/ActiveSession.tsx @@ -922,7 +922,11 @@ export function ActiveSession({ flexDirection: 'column', alignItems: 'center', gap: '1.5rem', - padding: '2rem', + // Use explicit padding values - shorthand 'padding' can override specific paddingTop + paddingTop: '4rem', // Extra top padding for help overlay that extends above + paddingRight: '2rem', + paddingBottom: '2rem', + paddingLeft: '2rem', backgroundColor: isDark ? 'gray.800' : 'white', borderRadius: '16px', boxShadow: 'md',