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

[StephenMcConnel]

This change is 

[andrew-polk]

Converting to draft as I think the introduction of the gap for other sizes is a show-stopper.
And I'm deprioritizing this card.

[StephenMcConnel]

I figured out how to avoid increasing the gap when it's not needed.

Reviewable status: 0 of 2 files reviewed, all discussions resolved

[andrew-polk]

Reviewed 2 of 2 files at r1, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @StephenMcConnel)

---

src/BloomBrowserUI/bookEdit/css/editMode.less line 1313 at r1 (raw file):

        top: -22px;
    }
}

It looks like we can do this dynamically with

.above-page-control-container {
    container-type: inline-size;
    container-name: above-page-control;
}
@container above-page-control (max-width: 450px) {
    #drag-activity-tab-control {
        top: -22px;
    }
}

(I don't what the 450 should be)

But I'm not sure this is sufficient.
Probably we need JH to take a look since the wrapped text looks bad to me. Particularly that the button and text next to it wrap differently (aren't lined up).
There's also a problem when zooming in. The controls appear to move up relative to the view and thus start to get cut off on top.