Fix document-level mobile viewport width/overflow

src/components/BoxTable.tsx

@@ -35,7 +35,7 @@ const smartShuffle = (n: number[]): number[] => {
 }
 
 const BoxTable = () => {
-    const [count, setCount] = useState<number>(100);
+    const [count, setCount] = useState<number>(16);
     const {sources, boxes, boxesBySource} = useMemo(() => {
         const sources: number[] = range(1, count);
         const destinations: number[] = smartShuffle(sources);
@@ -99,11 +99,11 @@ const BoxTable = () => {
     const columns = Math.ceil(Math.sqrt(boxes.length));
     return (
         <div className="flex flex-col items-center justify-center w-full">
-            <div className="grid gap-4 max-w-full"
+            <div className="grid gap-x-4 gap-y-1 max-w-full"
                  style={{gridTemplateColumns: `repeat(${Math.max(3, columns)}, minmax(0, 1fr))`}}>
                 {boxes.map(([source, destination]) =>
                     <div key={source}
-                         className={classNames("col-span-1 aspect-square", isFiltered && filteredBoxes[source] ? "opacity-0 pointer-events-none" : "")}
+                         className={classNames("col-span-1 aspect-square", isFiltered && filteredBoxes[source] ? "opacity-10 pointer-events-none" : "")}
                          onClick={() => toggleLines(source)} onMouseEnter={() => showLine(source)}
                          onMouseLeave={() => hideLine(source)}>
                         <div

src/pages/index.tsx

@@ -28,6 +28,7 @@ const Home: NextPage = () => {
                             The prisoners are allowed to open 50 boxes each in an
                         attempt to find their own number, and all of the prisoners must be successful in order to be set
                         free. This problem raises questions about strategy and probability in search of a solution.
+                        </p>
                     </div>
                     <div className="pt-5">
 

src/styles/globals.scss

@@ -5,10 +5,16 @@
 @tailwind components;
 @tailwind utilities;
 
+html,
+body,
+#__next {
+  @apply  w-full overflow-x-hidden;
+}
 
 body {
   font-family: "Merriweather", serif;
 }
+
 .box {
   @apply transition-all max-h-[6rem];
 
@@ -18,12 +24,20 @@ body {
 
   .arrow {
     @apply drop-shadow-lg;
-    * { pointer-events: none }
+    * {
+      pointer-events: none
+    }
+  }
+
+  > .text {
+    @apply transition-opacity opacity-30;
   }
 
-  > .text { @apply transition-opacity opacity-30; }
   &:hover {
-    > .text { @apply opacity-100; }
+    > .text {
+      @apply opacity-100;
+    }
+
     > svg {
       @apply max-w-full max-h-full -translate-y-[40%];
     }