From e867f70957d53a73d1d7da0366b7a7da66c8bb36 Mon Sep 17 00:00:00 2001
From: emargetis <erik.margetis@gmail.com>
Date: Thu, 25 Apr 2024 21:24:45 -0500
Subject: [PATCH] fix: made mobile puzzle slightly more responsive

Co-authored-by: Alex Sklar <sklarfox@gmail.com>
Co-authored-by: Joseph Liang <j3liang@icloud.com>
---
 src/components/Puzzle/index.js            | 37 ++++++++++++++++++++---
 src/components/TodoList/TodoList.js       |  4 ---
 src/components/TodoList/TodoListClient.js |  2 +-
 3 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/src/components/Puzzle/index.js b/src/components/Puzzle/index.js
index 935f5b7..fe8788a 100644
--- a/src/components/Puzzle/index.js
+++ b/src/components/Puzzle/index.js
@@ -4,10 +4,27 @@ import Signal from './Signal'
 import SignalVertical from './SignalVertical'
 import { useEffect, useState } from 'react'
 
-function IFrame() {
+const divStyle = {
+  border: '14px solid',
+  borderImage: 'url(' + '/landing/Client-window2.svg' + ') 15',
+}
+
+function IFrame({ narrow }) {
   const {
     siteConfig: { customFields },
   } = useDocusaurusContext()
+
+  if (narrow === 'sm') {
+    return (
+      <div style={divStyle}>
+        <iframe
+          className="bg-transparent h-96 w-[475px] ml-[-35px]"
+          src={'https://c218db58.website-puzzle.pages.dev/'}
+        ></iframe>
+      </div>
+    )
+  }
+
   return (
     <div className="container inline-block w-[500px] m-0 p-0">
       <iframe
@@ -27,20 +44,30 @@ export default function Puzzle() {
     window.addEventListener('resize', e => setWindowWidth(e.target.innerWidth))
   }, [])
 
+  if (windowWidth < 600) {
+    return (
+      <div className="grid grid-cols-1 gap-0 justify-center w-full">
+        <IFrame narrow={'sm'} />
+        <SignalVertical />
+        <IFrame narrow={'sm'} />
+      </div>
+    )
+  }
+
   if (windowWidth < 1094) {
     return (
       <div className="grid grid-cols-1 gap-0 justify-center">
-        <IFrame />
+        <IFrame narrow={'md'} />
         <SignalVertical />
-        <IFrame />
+        <IFrame narrow={'md'} />
       </div>
     )
   }
   return (
     <div className="flex">
-      <IFrame />
+      <IFrame narrow={'lg'} />
       <Signal />
-      <IFrame />
+      <IFrame narrow={'lg'} />
     </div>
   )
 }
diff --git a/src/components/TodoList/TodoList.js b/src/components/TodoList/TodoList.js
index 9cc80a2..fa7e16d 100644
--- a/src/components/TodoList/TodoList.js
+++ b/src/components/TodoList/TodoList.js
@@ -23,10 +23,6 @@ export default function TodoList() {
     setTodoList(filteredTodoList)
   }
 
-  const divStyle = {
-    border: '40px solid',
-    borderImage: 'url(' + '/landing/Client-window2.svg' + ') 25 25',
-  }
   if (windowWidth < 1094) {
     return (
       <div className="grid grid-cols-1 gap-0 justify-center text-left">
diff --git a/src/components/TodoList/TodoListClient.js b/src/components/TodoList/TodoListClient.js
index 4115344..7cc7d87 100644
--- a/src/components/TodoList/TodoListClient.js
+++ b/src/components/TodoList/TodoListClient.js
@@ -104,7 +104,7 @@ export function TodoListClient({
 
 const divStyle = {
   border: '40px solid',
-  borderImage: 'url(' + '/landing/Client-window2.svg' + ') 25 25',
+  borderImage: 'url(' + '/landing/Client-window2.svg' + ') 35 35',
 }
 
 const deleteButtonStyle = {