From 124f7756da8afc5ee8f464f3079d75917e44ca2e Mon Sep 17 00:00:00 2001 From: Steve McConnel Date: Wed, 23 Apr 2025 14:36:25 -0600 Subject: [PATCH] Provide enough space for the DragActivityTabControl widget (BL-14614) --- src/BloomBrowserUI/bookEdit/css/editMode.less | 8 ++++++++ .../bookEdit/toolbox/games/DragActivityTabControl.tsx | 6 +++++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/BloomBrowserUI/bookEdit/css/editMode.less b/src/BloomBrowserUI/bookEdit/css/editMode.less index 4b33bc7c7127..9db248152f5f 100644 --- a/src/BloomBrowserUI/bookEdit/css/editMode.less +++ b/src/BloomBrowserUI/bookEdit/css/editMode.less @@ -1303,6 +1303,14 @@ body.hideAllCKEditors .cke_chrome { top: -8px; width: 100%; } +// Very narrow pages need more space for the #drag-activity-tab-control +.above-page-control-container:has(+ .Device16x9Portrait), +.above-page-control-container:has(+ .QuarterLetterPortrait), +.above-page-control-container:has(+ .A6Portrait) { + #drag-activity-tab-control { + top: -22px; + } +} // we want :blank, but it's not in browsers yet. So we simulate it by a mutation observer // that adds a class to the editable when it is empty. diff --git a/src/BloomBrowserUI/bookEdit/toolbox/games/DragActivityTabControl.tsx b/src/BloomBrowserUI/bookEdit/toolbox/games/DragActivityTabControl.tsx index 4183f9123872..64798dfa30f0 100644 --- a/src/BloomBrowserUI/bookEdit/toolbox/games/DragActivityTabControl.tsx +++ b/src/BloomBrowserUI/bookEdit/toolbox/games/DragActivityTabControl.tsx @@ -61,7 +61,11 @@ export const DragActivityTabControl: React.FunctionComponent<{ `} > {promptButtonContent && ( -
+
{/* // This button is only visible in start mode. I'd prefer to control that here but it's difficult. visibility is controlled with #promptButton rules in editMode.less. */}