fix(Storybook): Resolve storybook docs styling in Firefox

Storybook obscures components that have hidden elements (think ContextMenu or DatePicker) when viewed with the Firefox browser.

This made the docs section almost unusable in Firefox. The only solution at this time appears to be overiding some Storybook styles.

storybookjs/storybook#16714
storybookjs/storybook#8928

Included a `ContextMenu` cypress test to help catch the issue with Storybook version bumps.

packages/react-component-library/.storybook/preview-head.html

@@ -3,6 +3,26 @@
   rel="stylesheet"
 />
 <style type="text/css">
-  .sbdocs-h2:first-of-type { margin-bottom: 40px; }
-  .rn-sidebar--storybook { position: unset !important; max-height: 30rem; }
+  /* https://github.com/storybookjs/storybook/issues/8928 */
+  #docs-root .sbdocs-h2:first-of-type {
+    margin-bottom: 40px;
+  }
+
+  #docs-root .docs-story {
+    overflow: visible;
+  }
+
+  #docs-root .docs-story > div:last-child {
+    bottom: 10px;
+  }
+
+  #docs-root .docs-story > div:first-child > div:first-child {
+    transform: none;
+    height: auto;
+  }
+
+  .rn-sidebar--storybook {
+    position: unset !important;
+    max-height: 30rem;
+  }
 </style>

packages/react-component-library/cypress/selectors/ContextMenu.ts

@@ -0,0 +1,4 @@
+export default {
+  target: '[data-testid="storybook-context-menu-target"]',
+  menu: '[data-testid="context-menu"]',
+}

packages/react-component-library/cypress/selectors/index.ts

@@ -1,9 +1,11 @@
 import datePicker from './DatePicker'
+import contextMenu from './ContextMenu'
 import timeline from './timeline'
 import form from './form'
 
 export default {
   datePicker,
+  contextMenu,
   timeline,
-  form
+  form,
 }

packages/react-component-library/cypress/specs/ContextMenu/index.spec.ts

@@ -0,0 +1,23 @@
+import { describe, cy, it, before } from 'local-cypress'
+
+import selectors from '../../selectors'
+
+// https://github.com/storybookjs/storybook/issues/8928
+
+describe('ContextMenu', () => {
+  describe('Storybook: Docs Mode', () => {
+    describe('the user opens the menu', () => {
+      before(() => {
+        cy.visit('/iframe.html?id=context-menu--default&viewMode=docs')
+
+        cy.get(selectors.contextMenu.target).eq(0).rightclick()
+      })
+
+      it('should show the Context Menu unobscured', () => {
+        cy.get(selectors.contextMenu.menu)
+          .contains('This is too much text')
+          .should('be.visible')
+      })
+    })
+  })
+})

packages/react-component-library/src/components/ContextMenu/ContextMenu.stories.tsx

@@ -28,6 +28,7 @@ const ClickArea = React.forwardRef(({ children, ...rest }: any, ref: any) => (
       padding: '1rem',
       backgroundColor: '#c9c9c9',
     }}
+    data-testid="storybook-context-menu-target"
   >
     {children}
   </div>