Provide enough space for the DragActivityTabControl widget (BL-14614)

Author: StephenMcConnel

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.

src/BloomBrowserUI/bookEdit/toolbox/games/DragActivityTabControl.tsx

@@ -61,7 +61,11 @@ export const DragActivityTabControl: React.FunctionComponent<{
                 `}
             >
                 {promptButtonContent && (
-                    <div>
+                    <div
+                        css={css`
+                            margin-right: 20px;
+                        `}
+                    >
                         {/* // 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. */}