feat: make website fully responsive across mobile, tablet, and desktop

app/components/CodeEditor/CodeEditor.module.css

@@ -1,17 +1,27 @@
 .codeEditor {
-  padding: 8px;
+  padding: 8px 8px 48px 8px;
   height: 100%;
   overflow-y: auto;
-  padding-bottom: 32px;
+  box-sizing: border-box;
 }
+
 .buttonsWrapper {
   position: absolute;
   bottom: 8px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  align-items: center;
   gap: 8px;
   width: 100%;
-  padding-left: 16px;
-  padding-right: 32px;
+  padding-left: 12px;
+  padding-right: 24px;
+  box-sizing: border-box;
+  z-index: 10;
+  pointer-events: none;
 }
+
+.buttonsWrapper > * {
+  pointer-events: auto;
+}
+

app/components/CommunityLinks/CommunityLinks.module.css

@@ -1,9 +1,13 @@
 .footerLinks {
   display: flex;
+  flex-wrap: wrap;
   justify-content: center;
   align-items: center;
-  gap: 1em;
+  gap: clamp(0.6em, 2vw, 1em);
   position: relative;
+  max-width: 100%;
+  padding-inline: 12px;
+  box-sizing: border-box;
 }
 .footerLink {
   color: hsl(var(--text));

app/components/ContentViewer/ContentViewer.module.css

@@ -1,20 +1,29 @@
 .content {
   display: flex;
   flex-direction: column;
-
   overflow-y: auto;
   flex: 1;
-  padding-right: 14px;
-  padding-bottom: 12px;
-  padding-left: 14px;
+  padding-right: clamp(10px, 2vw, 16px);
+  padding-bottom: 16px;
+  padding-left: clamp(10px, 2vw, 16px);
+  padding-top: 8px;
+  box-sizing: border-box;
 }
-.contentWrapper {
-  border-right: 1px solid hsl(var(--border-color));
 
+.contentWrapper {
+  border-right: none;
   display: flex;
   flex-direction: column;
-
   height: 100%;
   flex: 1;
-  height: 100%;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+@media (min-width: 1024px) {
+  .contentWrapper {
+    border-right: 1px solid hsl(var(--border-color));
+  }
 }
+

app/components/EditorNOutput/EditorNOutput.module.css

@@ -3,30 +3,47 @@
   height: 100%;
   display: flex;
   flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+}
 
-  max-width: 50%;
+@media (min-width: 1024px) {
+  .codeEditorNOutput {
+    max-width: 50%;
+  }
 }
 
 .outputWrapper {
   width: 100%;
-
-  /* padding: 16px; */
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   border: 1px solid hsl(var(--border-color));
   overflow-y: hidden;
   border-left: none;
   height: 100%;
+  box-sizing: border-box;
 }
+
+@media (max-width: 1023px) {
+  .outputWrapper {
+    border-left: 1px solid hsl(var(--border-color));
+    border-right: 1px solid hsl(var(--border-color));
+  }
+}
+
 .divider {
   width: 100%;
-  height: 6px;
+  height: 8px;
   background-color: hsl(var(--border-color));
   cursor: row-resize;
+  touch-action: none;
+  flex-shrink: 0;
 }
 
 .divider:hover,
 .divider:active {
   background-color: hsl(var(--primary) / 0.75);
 }
+

app/components/EditorNOutput/EditorNOutput.tsx

@@ -32,57 +32,69 @@ export default function EditorNOutput({
     errors: "",
     testCaseResults: [],
   });
-  const [topWidth, setTopWidth] = useState(400); // Initial width of the left div
+  const [topWidth, setTopWidth] = useState(380);
   const dividerRef = useRef<HTMLDivElement>(null);
-
   const containerRef = useRef<HTMLDivElement>(null);
-  const isDraggingRef = useRef<HTMLDivElement | boolean>(false);
+  const isDraggingRef = useRef<boolean>(false);
 
-  const handleMouseDown = () => {
+  const startDragging = () => {
     isDraggingRef.current = true;
   };
 
-  const handleMouseUp = () => {
+  const stopDragging = () => {
     isDraggingRef.current = false;
   };
 
-  const handleMouseMove = (
-    e: React.MouseEvent<HTMLDivElement, MouseEvent> | MouseEvent,
-  ) => {
-    if (!isDraggingRef.current) return;
+  const updateHeight = (clientY: number) => {
+    if (!isDraggingRef.current || !containerRef.current) return;
+
+    const containerRect = containerRef.current.getBoundingClientRect();
+    const newHeight = clientY - containerRect.top;
+    const minHeight = 100;
+    const maxHeight = containerRect.height - 100;
 
-    const containerRect = containerRef.current!.getBoundingClientRect();
-    const newTopWidth = e.clientY - containerRect.top;
+    const clampedHeight = Math.max(minHeight, Math.min(newHeight, maxHeight));
+    setTopWidth(clampedHeight);
+    localStorage.setItem("verticalTopHeight", String(clampedHeight));
+  };
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    updateHeight(e.clientY);
+  };
 
-    if (newTopWidth > 32) {
-      setTopWidth(newTopWidth);
-      localStorage.setItem("verticalTopHeight", String(newTopWidth));
-    } else {
-      localStorage.setItem("verticalTopHeight", String(containerRect.top));
-      setTopWidth(containerRect.top);
+  const handleTouchMove = (e: React.TouchEvent<HTMLDivElement>) => {
+    if (e.touches.length > 0) {
+      updateHeight(e.touches[0].clientY);
     }
   };
 
   useEffect(() => {
-    const topHeight = localStorage.getItem("verticalTopHeight");
-    if (topHeight) {
-      setTopWidth(Number(topHeight));
+    if (typeof window !== "undefined") {
+      const topHeight = localStorage.getItem("verticalTopHeight");
+      if (topHeight && Number(topHeight) > 100 && Number(topHeight) < window.innerHeight - 150) {
+        setTopWidth(Number(topHeight));
+      } else {
+        setTopWidth(Math.max(250, Math.floor(window.innerHeight * 0.45)));
+      }
     }
   }, []);
 
   return (
     <div
       className={styles.codeEditorNOutput}
       onMouseMove={handleMouseMove}
-      onMouseUp={handleMouseUp}
-      onMouseLeave={handleMouseUp}
+      onMouseUp={stopDragging}
+      onMouseLeave={stopDragging}
+      onTouchMove={handleTouchMove}
+      onTouchEnd={stopDragging}
       ref={containerRef}
     >
       <Box
-        flex={6}
         height={`${topWidth}px`}
         position={"relative"}
         className="top"
+        minHeight={"100px"}
+        width={"100%"}
       >
         <CodeEditor
           codeString={codeString}
@@ -98,11 +110,12 @@ export default function EditorNOutput({
       <div
         ref={dividerRef}
         className={styles.divider}
-        onMouseDown={handleMouseDown}
+        onMouseDown={startDragging}
+        onTouchStart={startDragging}
       ></div>
       <div
         className={styles.outputWrapper}
-        style={{ height: `calc(100% - ${topWidth}px - 6px)` }}
+        style={{ height: `calc(100% - ${topWidth}px - 8px)` }}
       >
         <Output outputResult={output} showSolution={showSolution} />
       </div>

app/components/HomePageLinks/HomePageLinks.module.css

@@ -1,9 +1,28 @@
-/* grid of 4 rows  */
 .HomePageLinks {
   display: grid;
-  grid-template-rows: repeat(4, 1fr);
-  gap: 8px;
-  column-gap: 32px;
-  grid-auto-flow: column;
-  font-size: large;
+  grid-template-columns: 1fr;
+  gap: 12px;
+  width: 100%;
+  font-size: 1.05rem;
+  box-sizing: border-box;
 }
+
+@media (min-width: 600px) {
+  .HomePageLinks {
+    grid-template-columns: repeat(2, 1fr);
+    column-gap: 28px;
+    row-gap: 10px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .HomePageLinks {
+    grid-template-rows: repeat(4, auto);
+    grid-auto-flow: column;
+    column-gap: 36px;
+    row-gap: 8px;
+    font-size: 1.15rem;
+    width: auto;
+  }
+}
+

app/components/KeyBindings/KeyBindings.module.css

@@ -1,31 +1,36 @@
 .key {
   font-family: monospace;
-
-  padding: 1px 5px;
-  font-weight: 900;
-  border-radius: 8px;
+  padding: 1px 6px;
+  font-size: 0.82em;
+  font-weight: 700;
+  border-radius: 6px;
   background-color: hsl(var(--text) / 0.85);
   text-transform: capitalize;
-  border: 2px solid hsl(var(--background) / 0.4);
-  border-bottom: 4px solid hsl(var(--background) / 0.6);
-
+  border: 1px solid hsl(var(--background) / 0.4);
+  border-bottom: 3px solid hsl(var(--background) / 0.6);
   color: hsl(var(--background));
+  display: inline-block;
 }
 
 .keysWrapper {
-  display: flex;
+  display: inline-flex;
   flex-direction: row;
-  gap: 6px;
+  gap: 4px;
   align-items: center;
-
-  justify-content: center;
+  vertical-align: middle;
+  margin-inline: 2px;
 }
+
 .keyAndPlus {
-  display: flex;
-  gap: 6px;
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
 }
+
 .plus {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  justify-self: center;
+  font-size: 0.85em;
+  font-weight: bold;
 }
+