Document emoji picker (#4338)

Co-authored-by: Tom Moor <tom.moor@gmail.com>

shared/styles/index.ts

@@ -37,3 +37,20 @@ export const hideScrollbars = () => `
     display: none;
   }
 `;
+
+/**
+ * Mixin on any component with relative positioning to add additional hidden clickable/hoverable area
+ *
+ * @param pixels
+ * @returns
+ */
+export const extraArea = (pixels: number): string => `
+  &::before {
+    position: absolute;
+    content: "";
+    top: -${pixels}px;
+    right: -${pixels}px;
+    left: -${pixels}px;
+    bottom: -${pixels}px;
+  }
+`;