From 48bfc116af04e0689fb12f69a66cef18e5cb68a1 Mon Sep 17 00:00:00 2001
From: Andrey Azov <andrey@ebi.ac.uk>
Date: Thu, 4 Apr 2024 13:54:15 +0100
Subject: [PATCH] Replace the classNames prop in PointerBox with className and
 set zmenu max-width (#1112)

- Minor refactoring of the PointerBox component and the components that use it,
   to replace the classNames property on PointerBox (an object) with a className property (a string)
- Used this className property after the refactoring to set a max-width of 400px on Zmenu on genome browser page
---
 .../components/zmenu/Zmenu.module.css         |  5 +++--
 .../genome-browser/components/zmenu/Zmenu.tsx |  1 +
 .../zmenus/GeneAndOneTranscriptZmenu.tsx      |  1 -
 .../GeneSearchPanel.module.css                |  9 +--------
 .../gene-search-panel/GeneSearchPanel.tsx     |  6 +++++-
 .../in-app-search/InAppSearch.module.css      |  9 +--------
 .../in-app-search/InAppSearchMatches.tsx      |  6 +++++-
 .../pointer-box/PointerBox.module.css         | 18 ++++++++++++++---
 .../components/pointer-box/PointerBox.tsx     | 11 +++-------
 .../components/toolbox/Toolbox.module.css     | 11 +---------
 src/shared/components/toolbox/Toolbox.tsx     | 11 +++++++++-
 .../components/tooltip/Tooltip.module.css     | 11 ++--------
 src/shared/components/tooltip/Tooltip.tsx     |  9 ++++++++-
 .../ViewInAppPopup.module.css                 |  8 +-------
 .../view-in-app-popup/ViewInAppPopup.tsx      |  5 +----
 .../pointer-box/PointerBox.stories.module.css |  4 +---
 .../pointer-box/PointerBox.stories.tsx        |  6 +++---
 ...ory.tsx => pointerBoxPositioningStory.tsx} |  5 +----
 ...Story.tsx => pointerBoxScrollingStory.tsx} |  5 +----
 ...sStory.tsx => pointerBoxVariantsStory.tsx} | 20 ++++++++-----------
 20 files changed, 71 insertions(+), 90 deletions(-)
 rename stories/shared-components/pointer-box/{positioningStory.tsx => pointerBoxPositioningStory.tsx} (96%)
 rename stories/shared-components/pointer-box/{scrollingStory.tsx => pointerBoxScrollingStory.tsx} (96%)
 rename stories/shared-components/pointer-box/{variantsStory.tsx => pointerBoxVariantsStory.tsx} (93%)

diff --git a/src/content/app/genome-browser/components/zmenu/Zmenu.module.css b/src/content/app/genome-browser/components/zmenu/Zmenu.module.css
index baae802251..c15c4df05b 100644
--- a/src/content/app/genome-browser/components/zmenu/Zmenu.module.css
+++ b/src/content/app/genome-browser/components/zmenu/Zmenu.module.css
@@ -61,7 +61,8 @@
   align-items: center;
 }
 
-.toolBox {
-  max-width: 450px;
+.toolbox {
+  max-width: 400px;
   min-width: 250px;
+  word-break: break-word;
 }
diff --git a/src/content/app/genome-browser/components/zmenu/Zmenu.tsx b/src/content/app/genome-browser/components/zmenu/Zmenu.tsx
index dfe01632a0..69a642abf0 100644
--- a/src/content/app/genome-browser/components/zmenu/Zmenu.tsx
+++ b/src/content/app/genome-browser/components/zmenu/Zmenu.tsx
@@ -115,6 +115,7 @@ const Zmenu = (props: ZmenuProps) => {
           onOutsideClick={destroyZmenu}
           anchor={anchorRef.current}
           position={toolboxPosition}
+          className={styles.toolbox}
         >
           {zmenuContent}
         </Toolbox>
diff --git a/src/content/app/genome-browser/components/zmenu/zmenus/GeneAndOneTranscriptZmenu.tsx b/src/content/app/genome-browser/components/zmenu/zmenus/GeneAndOneTranscriptZmenu.tsx
index aa6abcd367..60cdea56f7 100644
--- a/src/content/app/genome-browser/components/zmenu/zmenus/GeneAndOneTranscriptZmenu.tsx
+++ b/src/content/app/genome-browser/components/zmenu/zmenus/GeneAndOneTranscriptZmenu.tsx
@@ -104,7 +104,6 @@ const GeneAndOneTranscriptZmenu = (props: Props) => {
     <ToolboxExpandableContent
       mainContent={mainContent}
       footerContent={footerContent}
-      className={styles.toolBox}
     />
   );
 };
diff --git a/src/shared/components/gene-search-panel/GeneSearchPanel.module.css b/src/shared/components/gene-search-panel/GeneSearchPanel.module.css
index 160d8a157e..262011c456 100644
--- a/src/shared/components/gene-search-panel/GeneSearchPanel.module.css
+++ b/src/shared/components/gene-search-panel/GeneSearchPanel.module.css
@@ -104,14 +104,7 @@
 }
 
 .tooltip {
-  background: var(--color-black);
-  padding: 12px 20px;
-  filter: drop-shadow(2px 2px 3px var(--shadow-color));
-  color: var(--color-white);
-}
-
-.tooltipTip {
-  fill: var(--color-black);
+  --pointer-box-padding: 12px 20px;
 }
 
 /* FIXME: remove the pseudo-radio elements when we replace them with real radio buttons */
diff --git a/src/shared/components/gene-search-panel/GeneSearchPanel.tsx b/src/shared/components/gene-search-panel/GeneSearchPanel.tsx
index 0df28cf60a..546f287a70 100644
--- a/src/shared/components/gene-search-panel/GeneSearchPanel.tsx
+++ b/src/shared/components/gene-search-panel/GeneSearchPanel.tsx
@@ -49,6 +49,7 @@ import type { SearchMatch } from 'src/shared/types/search-api/search-match';
 
 import styles from './GeneSearchPanel.module.css';
 import radioStyles from 'src/shared/components/radio-group/RadioGroup.module.css';
+import pointerBoxStyles from 'src/shared/components/pointer-box/PointerBox.module.css';
 
 type Props = {
   onClose: () => void;
@@ -300,7 +301,10 @@ const GeneMatch = (props: { match: SearchMatch; species: CommittedItem }) => {
       {shouldShowTooltip && anchorRef.current && (
         <PointerBox
           anchor={anchorRef.current}
-          classNames={{ box: styles.tooltip, pointer: styles.tooltipTip }}
+          className={classNames(
+            styles.tooltip,
+            pointerBoxStyles.pointerBoxShadow
+          )}
           position={PointerBoxPosition.RIGHT_TOP}
           onOutsideClick={handleClick}
         >
diff --git a/src/shared/components/in-app-search/InAppSearch.module.css b/src/shared/components/in-app-search/InAppSearch.module.css
index 29646c670d..eddd0dfa8b 100644
--- a/src/shared/components/in-app-search/InAppSearch.module.css
+++ b/src/shared/components/in-app-search/InAppSearch.module.css
@@ -91,14 +91,7 @@
 }
 
 .tooltip {
-  background: var(--color-black);
-  padding: 12px 20px;
-  filter: drop-shadow(2px 2px 3px var(--shadow-color));
-  color: var(--color-white);
-}
-
-.tooltipTip {
-  fill: var(--color-black);
+  --pointer-box-padding: 12px 20px;
 }
 
 .tooltipContent {
diff --git a/src/shared/components/in-app-search/InAppSearchMatches.tsx b/src/shared/components/in-app-search/InAppSearchMatches.tsx
index 3d0e0652d9..37d9a0237f 100644
--- a/src/shared/components/in-app-search/InAppSearchMatches.tsx
+++ b/src/shared/components/in-app-search/InAppSearchMatches.tsx
@@ -41,6 +41,7 @@ import type { AppName } from 'src/shared/state/in-app-search/inAppSearchSlice';
 import type { InAppSearchMode } from './InAppSearch';
 
 import styles from './InAppSearch.module.css';
+import pointerBoxStyles from 'src/shared/components/pointer-box/PointerBox.module.css';
 
 type InAppSearchMatchesProps = SearchResults & {
   app: AppName;
@@ -136,7 +137,10 @@ const InAppSearchMatch = (props: InAppSearchMatchProps) => {
               ? PointerBoxPosition.RIGHT_BOTTOM
               : PointerBoxPosition.BOTTOM_RIGHT
           }
-          classNames={{ box: styles.tooltip, pointer: styles.tooltipTip }}
+          className={classNames(
+            styles.tooltip,
+            pointerBoxStyles.pointerBoxShadow
+          )}
           onOutsideClick={hideTooltip}
         >
           <MatchDetails {...props} onClick={onAppClick} />
diff --git a/src/shared/components/pointer-box/PointerBox.module.css b/src/shared/components/pointer-box/PointerBox.module.css
index 620a60ac01..f50ca39b44 100644
--- a/src/shared/components/pointer-box/PointerBox.module.css
+++ b/src/shared/components/pointer-box/PointerBox.module.css
@@ -1,9 +1,12 @@
 .pointerBox {
+  --_pointer-box-color: var(--pointer-box-color, var(--color-black));
+  color: var(--pointer-box-text-color, var(--color-white));
+  background-color: var(--_pointer-box-color);
+  cursor: default; /* to override cursor: pointer if e.g. parent is a button */
   position: absolute;
-  z-index: 1000;
   width: max-content;
-  box-sizing: content-box; /* Safari doesn't seem to respect "width: max-content" if box-sizing is border-box */
-  padding: 6px;
+  padding: var(--pointer-box-padding, 6px);
+  z-index: 1000;
 }
 
 /* Class applied to pointer box while the code is finding appropriate position for it.
@@ -18,6 +21,15 @@ hence it is placed in top left corner of the screen with position: fixed */
 }
 
 .pointer {
+  fill: var(--_pointer-box-color);
   position: absolute;
   mix-blend-mode: lighten;
 }
+
+/* This is a shared class for adding a shadow to PointerBox.
+   It is passed to PointerBox from parent components
+   that need PointerBox to have a shadow.
+*/
+.pointerBoxShadow {
+  filter: drop-shadow(2px 2px 3px var(--shadow-color));
+}
diff --git a/src/shared/components/pointer-box/PointerBox.tsx b/src/shared/components/pointer-box/PointerBox.tsx
index a3b5bf4d9b..8257810bea 100644
--- a/src/shared/components/pointer-box/PointerBox.tsx
+++ b/src/shared/components/pointer-box/PointerBox.tsx
@@ -46,7 +46,6 @@ export type InlineStylesState = {
 
 type PointerProps = {
   style: InlineStyles;
-  className?: string;
   width: number;
   height: number;
 };
@@ -60,10 +59,7 @@ export type PointerBoxProps = {
   pointerWidth?: number;
   pointerHeight?: number;
   pointerOffset?: number;
-  classNames?: {
-    box?: string;
-    pointer?: string;
-  };
+  className?: string;
   children: ReactNode;
   onOutsideClick?: (() => void) | ((event: Event) => void);
   onClose?: () => void;
@@ -166,7 +162,7 @@ const PointerBox = (props: PointerBoxProps) => {
 
   const bodyClasses = classNames(
     styles.pointerBox,
-    props.classNames?.box,
+    props.className,
     positionFromProps,
     { [styles.invisible]: isPositioning || !hasInlineStyles() }
   );
@@ -178,7 +174,6 @@ const PointerBox = (props: PointerBoxProps) => {
       style={inlineStyles.boxStyles}
     >
       <Pointer
-        className={props.classNames?.pointer}
         width={pointerWidthFromProps}
         height={pointerHeightFromProps}
         style={inlineStyles.pointerStyles}
@@ -201,7 +196,7 @@ const Pointer = (props: PointerProps) => {
     height: `${pointerHeight}px`
   };
 
-  const pointerClasses = classNames(styles.pointer, props.className);
+  const pointerClasses = classNames(styles.pointer);
   const polygonPoints = `0,${pointerHeight} ${pointerWidth},${pointerHeight} ${pointerEndX},0`;
 
   return (
diff --git a/src/shared/components/toolbox/Toolbox.module.css b/src/shared/components/toolbox/Toolbox.module.css
index b53c4573cc..b1ce8752e5 100644
--- a/src/shared/components/toolbox/Toolbox.module.css
+++ b/src/shared/components/toolbox/Toolbox.module.css
@@ -1,14 +1,5 @@
-
 .toolbox {
-  background: var(--color-black);
-  padding: 12px 20px;
-  filter: drop-shadow(2px 2px 3px var(--shadow-color));
-  cursor: default;
-  color: var(--color-white);
+  --pointer-box-padding: 12px 20px;
   min-height: 40px;
   font-size: 13px;
 }
-
-.tooltipTip {
-  fill: var(--color-black);
-}
diff --git a/src/shared/components/toolbox/Toolbox.tsx b/src/shared/components/toolbox/Toolbox.tsx
index 12b4a2278f..07b2bb38df 100644
--- a/src/shared/components/toolbox/Toolbox.tsx
+++ b/src/shared/components/toolbox/Toolbox.tsx
@@ -15,12 +15,14 @@
  */
 
 import React, { ReactNode } from 'react';
+import classNames from 'classnames';
 
 import PointerBox, {
   Position
 } from 'src/shared/components/pointer-box/PointerBox';
 
 import styles from './Toolbox.module.css';
+import pointerBoxStyles from 'src/shared/components/pointer-box/PointerBox.module.css';
 
 export enum ToolboxPosition {
   LEFT = 'left',
@@ -31,6 +33,7 @@ type ToolboxProps = {
   position?: ToolboxPosition;
   anchor: HTMLElement;
   onOutsideClick?: () => void;
+  className?: string;
   children: ReactNode;
 };
 
@@ -41,13 +44,19 @@ const Toolbox = (props: ToolboxProps) => {
       ? Position.LEFT_BOTTOM
       : Position.RIGHT_BOTTOM;
 
+  const componentClasses = classNames(
+    styles.toolbox,
+    pointerBoxStyles.pointerBoxShadow,
+    props.className
+  );
+
   return (
     <PointerBox
       position={pointerBoxPosition}
       anchor={props.anchor}
       onOutsideClick={props.onOutsideClick}
       renderInsideAnchor={true}
-      classNames={{ box: styles.toolbox, pointer: styles.tooltipTip }}
+      className={componentClasses}
     >
       {props.children}
     </PointerBox>
diff --git a/src/shared/components/tooltip/Tooltip.module.css b/src/shared/components/tooltip/Tooltip.module.css
index 562e9a35e2..1e938ae2f2 100644
--- a/src/shared/components/tooltip/Tooltip.module.css
+++ b/src/shared/components/tooltip/Tooltip.module.css
@@ -1,14 +1,7 @@
 .tooltip {
-  background: var(--color-dark-grey);
-  padding: 6px 18px 8px;
-  filter: drop-shadow(2px 2px 3px var(--shadow-color));
-  cursor: default;
-  color: var(--color-white);
+  --pointer-box-color: var(--color-dark-grey);
+  --pointer-box-padding: 6px 18px 8px;
   border-radius: 4px;
   font-size: 14px;
   max-width: 300px;
 }
-
-.tooltipTip {
-  fill: var(--color-dark-grey);
-}
diff --git a/src/shared/components/tooltip/Tooltip.tsx b/src/shared/components/tooltip/Tooltip.tsx
index 2ff9048908..5484502387 100644
--- a/src/shared/components/tooltip/Tooltip.tsx
+++ b/src/shared/components/tooltip/Tooltip.tsx
@@ -15,6 +15,7 @@
  */
 
 import React, { ReactNode, useEffect, useState } from 'react';
+import classNames from 'classnames';
 
 import { TOOLTIP_TIMEOUT } from './tooltip-constants';
 
@@ -25,6 +26,7 @@ import PointerBox, {
 import { TooltipPosition } from './tooltip-types';
 
 import styles from './Tooltip.module.css';
+import pointerBoxStyles from 'src/shared/components/pointer-box/PointerBox.module.css';
 
 type Props = {
   anchor: HTMLElement;
@@ -62,6 +64,11 @@ const TooltipWithAnchor = (props: Props) => {
     return null;
   }
 
+  const componentClasses = classNames(
+    styles.tooltip,
+    pointerBoxStyles.pointerBoxShadow
+  );
+
   return (
     <PointerBox
       position={props.position ?? Position.BOTTOM_RIGHT}
@@ -70,7 +77,7 @@ const TooltipWithAnchor = (props: Props) => {
       autoAdjust={props.autoAdjust}
       renderInsideAnchor={props.renderInsideAnchor}
       onClose={props.onClose}
-      classNames={{ box: styles.tooltip, pointer: styles.tooltipTip }}
+      className={componentClasses}
       onOutsideClick={props.onClose}
     >
       {props.children}
diff --git a/src/shared/components/view-in-app-popup/ViewInAppPopup.module.css b/src/shared/components/view-in-app-popup/ViewInAppPopup.module.css
index 9a6f323328..08bb2321cd 100644
--- a/src/shared/components/view-in-app-popup/ViewInAppPopup.module.css
+++ b/src/shared/components/view-in-app-popup/ViewInAppPopup.module.css
@@ -3,15 +3,9 @@
 }
 
 .pointerBox {
-  padding: 6px 12px;
-  background: var(--color-black);
-  color: var(--color-white);
+  --pointer-box-padding: 6px 12px;
 }
 
 .pointerBox p {
   max-width: 200px;
 }
-
-.pointerBoxPointer {
-  fill: var(--color-black);
-}
diff --git a/src/shared/components/view-in-app-popup/ViewInAppPopup.tsx b/src/shared/components/view-in-app-popup/ViewInAppPopup.tsx
index 77f00a7fdb..928f8dc9b8 100644
--- a/src/shared/components/view-in-app-popup/ViewInAppPopup.tsx
+++ b/src/shared/components/view-in-app-popup/ViewInAppPopup.tsx
@@ -67,10 +67,7 @@ const ViewInAppPopup = (props: ViewInAppPopupProps) => {
           onClose={onClose}
           position={position}
           autoAdjust={true}
-          classNames={{
-            box: styles.pointerBox,
-            pointer: styles.pointerBoxPointer
-          }}
+          className={styles.pointerBox}
         >
           <ViewInApp theme="dark" links={links} />
         </PointerBox>
diff --git a/stories/shared-components/pointer-box/PointerBox.stories.module.css b/stories/shared-components/pointer-box/PointerBox.stories.module.css
index 08c9691370..893295a873 100644
--- a/stories/shared-components/pointer-box/PointerBox.stories.module.css
+++ b/stories/shared-components/pointer-box/PointerBox.stories.module.css
@@ -1,7 +1,5 @@
 .pointerBox {
-  padding: 6px 12px;
-  background: black;
-  color: white;
+  --pointer-box-padding: 6px 12px;
 }
 
 .pointerBox p {
diff --git a/stories/shared-components/pointer-box/PointerBox.stories.tsx b/stories/shared-components/pointer-box/PointerBox.stories.tsx
index a89e21fdb3..e9fce341c8 100644
--- a/stories/shared-components/pointer-box/PointerBox.stories.tsx
+++ b/stories/shared-components/pointer-box/PointerBox.stories.tsx
@@ -16,9 +16,9 @@
 
 import React from 'react';
 
-import VariantsStory from './variantsStory';
-import PositioningStory from './positioningStory';
-import ScrollingStory from './scrollingStory';
+import VariantsStory from './pointerBoxVariantsStory';
+import PositioningStory from './pointerBoxPositioningStory';
+import ScrollingStory from './pointerBoxScrollingStory';
 
 export default {
   title: 'Components/Shared Components/PointerBox'
diff --git a/stories/shared-components/pointer-box/positioningStory.tsx b/stories/shared-components/pointer-box/pointerBoxPositioningStory.tsx
similarity index 96%
rename from stories/shared-components/pointer-box/positioningStory.tsx
rename to stories/shared-components/pointer-box/pointerBoxPositioningStory.tsx
index d1f2f26c63..f7c32e4c86 100644
--- a/stories/shared-components/pointer-box/positioningStory.tsx
+++ b/stories/shared-components/pointer-box/pointerBoxPositioningStory.tsx
@@ -57,10 +57,7 @@ const Item = (props: ItemProps) => {
           position={props.position}
           container={props.container.current}
           autoAdjust={true}
-          classNames={{
-            box: styles.pointerBox,
-            pointer: styles.pointerBoxPointer
-          }}
+          className={styles.pointerBox}
           pointerOffset={5}
         >
           Hello sailor!
diff --git a/stories/shared-components/pointer-box/scrollingStory.tsx b/stories/shared-components/pointer-box/pointerBoxScrollingStory.tsx
similarity index 96%
rename from stories/shared-components/pointer-box/scrollingStory.tsx
rename to stories/shared-components/pointer-box/pointerBoxScrollingStory.tsx
index 94d7b701a6..65c6561a5a 100644
--- a/stories/shared-components/pointer-box/scrollingStory.tsx
+++ b/stories/shared-components/pointer-box/pointerBoxScrollingStory.tsx
@@ -56,10 +56,7 @@ const ScrollingStory = () => {
               position={Position.BOTTOM_LEFT}
               onClose={() => setShowPointerBox(false)}
               renderInsideAnchor={renderingTarget === RenderingTarget.ANCHOR}
-              classNames={{
-                box: styles.pointerBox,
-                pointer: styles.pointerBoxPointer
-              }}
+              className={styles.pointerBox}
             >
               Hello sailor!
             </PointerBox>
diff --git a/stories/shared-components/pointer-box/variantsStory.tsx b/stories/shared-components/pointer-box/pointerBoxVariantsStory.tsx
similarity index 93%
rename from stories/shared-components/pointer-box/variantsStory.tsx
rename to stories/shared-components/pointer-box/pointerBoxVariantsStory.tsx
index d815774287..a3aa996cd4 100644
--- a/stories/shared-components/pointer-box/variantsStory.tsx
+++ b/stories/shared-components/pointer-box/pointerBoxVariantsStory.tsx
@@ -38,10 +38,6 @@ const VariantsStory = () => {
   const handleClose = () => {
     setVisibleId(null);
   };
-  const pointerBoxClasses = {
-    box: styles.pointerBox,
-    pointer: styles.pointerBoxPointer
-  };
 
   return (
     <div className={styles.variantsStoryLayout}>
@@ -60,7 +56,7 @@ const VariantsStory = () => {
               anchor={topLeftRef.current}
               onOutsideClick={handleClose}
               position={Position.TOP_LEFT}
-              classNames={pointerBoxClasses}
+              className={styles.pointerBox}
             >
               TOP LEFT
             </PointerBox>
@@ -79,7 +75,7 @@ const VariantsStory = () => {
               anchor={topRightRef.current}
               onOutsideClick={handleClose}
               position={Position.TOP_RIGHT}
-              classNames={pointerBoxClasses}
+              className={styles.pointerBox}
             >
               TOP RIGHT
             </PointerBox>
@@ -98,7 +94,7 @@ const VariantsStory = () => {
               anchor={rightTopRef.current}
               onOutsideClick={handleClose}
               position={Position.RIGHT_BOTTOM}
-              classNames={pointerBoxClasses}
+              className={styles.pointerBox}
             >
               <p>RIGHT BOTTOM (grows down)</p>
               <p>{faker.lorem.paragraph()}</p>
@@ -118,7 +114,7 @@ const VariantsStory = () => {
               anchor={rightBottomRef.current}
               onOutsideClick={handleClose}
               position={Position.RIGHT_TOP}
-              classNames={pointerBoxClasses}
+              className={styles.pointerBox}
             >
               <p>RIGHT TOP (grows up)</p>
               <p>{faker.lorem.sentence()}</p>
@@ -138,7 +134,7 @@ const VariantsStory = () => {
               anchor={bottomLeftRef.current}
               onOutsideClick={handleClose}
               position={Position.BOTTOM_LEFT}
-              classNames={pointerBoxClasses}
+              className={styles.pointerBox}
             >
               BOTTOM LEFT
             </PointerBox>
@@ -157,7 +153,7 @@ const VariantsStory = () => {
               anchor={bottomRightRef.current}
               onOutsideClick={handleClose}
               position={Position.BOTTOM_RIGHT}
-              classNames={pointerBoxClasses}
+              className={styles.pointerBox}
             >
               BOTTOM RIGHT
             </PointerBox>
@@ -176,7 +172,7 @@ const VariantsStory = () => {
               anchor={leftTopRef.current}
               onOutsideClick={handleClose}
               position={Position.LEFT_BOTTOM}
-              classNames={pointerBoxClasses}
+              className={styles.pointerBox}
             >
               <p>LEFT TOP (grows up)</p>
               <p>{faker.lorem.sentence()}</p>
@@ -196,7 +192,7 @@ const VariantsStory = () => {
               anchor={leftBottomRef.current}
               onOutsideClick={handleClose}
               position={Position.LEFT_TOP}
-              classNames={pointerBoxClasses}
+              className={styles.pointerBox}
             >
               <p>LEFT BOTTOM (grows down)</p>
               <p>{faker.lorem.sentence()}</p>