fix(scene composer): fix overlay arrow clickable space

[hwandersman]

Overview

There is an extra invisible space below the overlay and a section on the overlay (the arrow) where if user clicks tag is not getting selected. Updated the overlay arrow CSS to keep the same visuals but the entire area clickable.

Verifying Changes

Create a tag. Add an overlay to the tag using the node inspector in the Scene Composer.

Click on the tag to show the overlay panel. Click on the tag below the panel, but to the right or left of the arrow, to deselect it. Click on the arrow at the bottom of the panel to reselect the tag. Should be able to click anywhere on the tag to select/deselect, and anywhere on the panel including the arrow to reselect the tag.

Screen.Recording.-.Click.Tag.With.Overlay.Panel.mov

Scene Composer

For scene-composer package changes specifically, you can preview the component in the published storybook artifact. To do this, wait for the Publish Storybook action to complete below.

• Click on the workflow details
• Select the Summary item on the left
• Download the zip file

To run the storybook build locally, you need a local static web server:

npm install -g httpserver
cd <Extracted Zip Directory>
httpserver

Then open the website http://localhost:8080 to run the doc site.

Legal

This project is available under the Apache 2.0 License.