Remove the extra spaces being inserted when we copy paste

Ref:

- https://github.com/facebook/react/issues/1643
- https://stackoverflow.com/questions/10837063/display-text-with-spaces-that-are-not-copied

web/apps/cast/src/components/LargeType.tsx

@@ -1,3 +1,5 @@
+import styled from "@emotion/styled";
+
 const colourPool = [
     "#87CEFA", // Light Blue
     "#90EE90", // Light Green
@@ -23,23 +25,11 @@ const colourPool = [
 
 export default function LargeType({ chars }: { chars: string[] }) {
     return (
-        <div
-            style={{
-                fontSize: "4rem",
-                fontWeight: "bold",
-                fontFamily: "monospace",
-                display: "flex",
-            }}
-        >
+        <Container style={{}}>
             {chars.map((char, i) => (
                 <span
                     key={i}
                     style={{
-                        display: "flex",
-                        flexDirection: "column",
-                        alignItems: "center",
-                        padding: "0.5rem",
-                        lineHeight: 1.2,
                         // alternating background
                         backgroundColor: i % 2 === 0 ? "#2e2e2e" : "#5e5e5e",
                         // varying colors
@@ -49,6 +39,27 @@ export default function LargeType({ chars }: { chars: string[] }) {
                     {char}
                 </span>
             ))}
-        </div>
+        </Container>
     );
 }
+
+const Container = styled.div`
+    font-size: 4rem;
+    font-weight: bold;
+    font-family: monospace;
+
+    line-height: 1.2;
+
+    /*
+     * -  We want them to be spans so that when the text is copy pasted, there
+     *    is no extra whitespace inserted.
+     *
+     * -  But we also want them to have a block level padding.
+     *
+     * To achieve both these goals, make them inline-blocks
+     */
+    span {
+        display: inline-block;
+        padding: 0.5rem;
+    }
+`;