mobile improvements

Author: KevinVandy

app/components/CodeExplorer.tsx

@@ -86,7 +86,7 @@ export function CodeExplorer({
 
   return (
     <div
-      className={`flex flex-col min-h-[80dvh] border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden ${
+      className={`flex flex-col min-h-[60dvh] sm:min-h-[80dvh] border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden ${
         isFullScreen ? 'fixed inset-0 z-50 bg-white dark:bg-gray-900 p-4' : ''
       }`}
     >
@@ -116,7 +116,9 @@ export function CodeExplorer({
           <div className="flex-1 overflow-auto relative">
             <CodeBlock
               isEmbedded
-              className={`${isFullScreen ? 'max-h-[90dvh]' : 'max-h-[80dvh]'}`}
+              className={`h-full ${
+                isFullScreen ? 'max-h-[90dvh]' : 'max-h-[80dvh]'
+              }`}
             >
               <code
                 className={`language-${overrideExtension(

app/components/CodeExplorerTopBar.tsx

@@ -43,7 +43,8 @@ export function CodeExplorerTopBar({
               : 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'
           }`}
         >
-          Code Explorer
+          <span className="hidden sm:inline">Code Explorer</span>
+          <span className="sm:hidden">Code</span>
           {activeTab === 'code' ? (
             <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-500" />
           ) : (
@@ -58,7 +59,8 @@ export function CodeExplorerTopBar({
               : 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'
           }`}
         >
-          Interactive Sandbox
+          <span className="hidden sm:inline">Interactive Sandbox</span>
+          <span className="sm:hidden">Sandbox</span>
           {activeTab === 'sandbox' ? (
             <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-500" />
           ) : (

app/components/FileExplorer.tsx

@@ -129,19 +129,20 @@ export function FileExplorer({
     startWidth: 0,
   })
 
-  const startResize = (e: React.MouseEvent) => {
+  const startResize = (e: React.MouseEvent | React.TouchEvent) => {
     setIsResizing(true)
     startResizeRef.current = {
-      startX: e.clientX,
+      startX: 'touches' in e ? e.touches[0].clientX : e.clientX,
       startWidth: sidebarWidth,
     }
   }
 
   React.useEffect(() => {
-    const handleMouseMove = (e: MouseEvent) => {
+    const handleMouseMove = (e: MouseEvent | TouchEvent) => {
       if (!isResizing) return
 
-      const diff = e.clientX - startResizeRef.current.startX
+      const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX
+      const diff = clientX - startResizeRef.current.startX
       const newWidth = startResizeRef.current.startWidth + diff
 
       if (newWidth >= MIN_SIDEBAR_WIDTH && newWidth <= 600) {
@@ -153,10 +154,8 @@ export function FileExplorer({
 
     const handleMouseUp = () => {
       setIsResizing(false)
-      // Check if we should close the sidebar
       if (sidebarWidth <= MIN_SIDEBAR_WIDTH) {
-        setSidebarWidth(200) // Reset width to default
-        // Find setIsSidebarOpen in parent scope
+        setSidebarWidth(200)
         const event = new CustomEvent('closeSidebar')
         window.dispatchEvent(event)
       }
@@ -165,11 +164,15 @@ export function FileExplorer({
     if (isResizing) {
       document.addEventListener('mousemove', handleMouseMove)
       document.addEventListener('mouseup', handleMouseUp)
+      document.addEventListener('touchmove', handleMouseMove)
+      document.addEventListener('touchend', handleMouseUp)
     }
 
     return () => {
       document.removeEventListener('mousemove', handleMouseMove)
       document.removeEventListener('mouseup', handleMouseUp)
+      document.removeEventListener('touchmove', handleMouseMove)
+      document.removeEventListener('touchend', handleMouseUp)
     }
   }, [isResizing, sidebarWidth])
 
@@ -190,10 +193,13 @@ export function FileExplorer({
   return (
     <>
       <div
-        style={{ width: isSidebarOpen ? sidebarWidth : 0 }}
-        className={`flex-shrink-0 overflow-y-auto bg-gradient-to-r from-gray-50 via-gray-50 to-transparent dark:from-gray-800/50 dark:via-gray-800/50 dark:to-transparent lg:pr-2 shadow-sm ${
+        style={{
+          width: isSidebarOpen ? sidebarWidth : 0,
+          paddingRight: isSidebarOpen ? '0.5rem' : 0,
+        }}
+        className={`flex-shrink-0 overflow-y-auto bg-gradient-to-r from-gray-50 via-gray-50 to-transparent dark:from-gray-800/50 dark:via-gray-800/50 dark:to-transparent shadow-sm ${
           isResizing ? '' : 'transition-all duration-300'
-        } ${isSidebarOpen ? '' : 'w-0 pr-0'}`}
+        }`}
       >
         {githubContents && isSidebarOpen ? (
           <div className="p-2">
@@ -214,6 +220,7 @@ export function FileExplorer({
           isResizing ? '' : 'transition-colors'
         } ${isSidebarOpen ? '' : 'hidden'}`}
         onMouseDown={startResize}
+        onTouchStart={startResize}
       />
     </>
   )

app/components/Markdown.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { FaRegCopy } from 'react-icons/fa'
 import { MarkdownLink } from '~/components/MarkdownLink'
 import type { HTMLProps } from 'react'
-import { getHighlighter as shikiGetHighlighter } from 'shiki/bundle-web.mjs'
+import { createHighlighter as shikiGetHighlighter } from 'shiki/bundle-web.mjs'
 import { transformerNotationDiff } from '@shikijs/transformers'
 import parse, {
   attributesToProps,
@@ -104,17 +104,10 @@ export function CodeBlock({
 
   const [codeElement, setCodeElement] = React.useState(
     <>
-      <pre
-        ref={ref}
-        className={`shiki github-light ${isEmbedded ? 'rounded-none' : ''}`}
-      >
+      <pre ref={ref} className={`shiki github-light`}>
         <code>{code}</code>
       </pre>
-      <pre
-        className={`shiki tokyo-night bg-gray-900 text-gray-400 ${
-          isEmbedded ? 'rounded-none' : ''
-        }`}
-      >
+      <pre className={`shiki tokyo-night bg-gray-900 text-gray-400`}>
         <code>{code}</code>
       </pre>
     </>
@@ -141,6 +134,9 @@ export function CodeBlock({
       setCodeElement(
         <div
           // className={`m-0 text-sm rounded-md w-full border border-gray-500/20 dark:border-gray-500/30`}
+          className={`${
+            isEmbedded ? 'h-full [&>pre]:h-full [&>pre]:rounded-none' : ''
+          } `}
           dangerouslySetInnerHTML={{ __html: htmls.join('') }}
           ref={ref}
         />