feat: Mobile support and minor space adjustments

src/components/Actions.jsx

@@ -344,7 +344,7 @@ export function Actions() {
 
 
   return (
-    <div class="flex items-center gap-2 border-l-0 border-t-0 border-b-0 rounded-sm">
+    <div class="flex items-center gap-1 md:gap-2 border-l-0 border-t-0 border-b-0 rounded-sm">
       <div class="flex items-center gap-1 text-sm pl-2 rounded border border-active-border">
         <div class="flex items-center gap-1 border-b-0 border-b-gray-300 min-w-0">
           <span class="font-mono text-gray-400">0x</span>

src/components/Assembled.jsx

@@ -22,7 +22,7 @@ export function Assembled() {
   };
 
   onMount(() => {
-    setWidth(window.innerWidth * 0.3);
+    setWidth(window.innerWidth * (window.innerWidth > 768 ? 0.3 : 0.8));
     const handleResize = () => {
       const isMd = window.matchMedia("(min-width: 768px)").matches;
       setExpanded(isMd);
@@ -56,14 +56,14 @@ export function Assembled() {
       class={`${expanded() ? "w-[calc(100vw-8rem)] md:w-full" : "w-8"} flex border-y border-y-main-border ${expanded() ? "border-l" : "border-l-0" } border-l-main-border bg-main-background h-lvh md:h-[calc(100vh-6em)] absolute top-0 right-0 md:static ${expanded() ? "shadow-xl" : ""} md:shadow-none`}
       style={{ width: `${expanded() ? `${width()}px` : 'auto'}` }}
     >
-      <button type="button" class="w-[3px] h-lvh md:h-[calc(100vh-6rem)] cursor-col-resize hover:bg-terminal active:bg-terminal" onMouseDown={startResize}
+      <button type="button" class="w-[3px] h-svh md:h-[calc(100vh-6rem)] cursor-col-resize hover:bg-terminal active:bg-terminal" onMouseDown={startResize}
         style={{
           display: expanded() ? "block" : "none",
         }}
       >
       </button>
       <div
-        class={`${expanded() ? "p-1 md:p-4" : "p-0 pt-4 pr-2"} w-full`}
+        class={`${expanded() ? "p-1 md:p-4 pt-2 md:pt-2" : "p-0 pt-2 pr-2"} w-full`}
       >
         <div class="flex items-start gap-2">
         <h2 class={`md:text-xl pb-4 ${expanded() ? 'block' : 'hidden'}`}>Assembled Output</h2>

src/components/Header.astro

@@ -13,32 +13,32 @@ interface Props {
 
 const { showActions, fullwidth } = Astro.props;
 ---
-<header class="w-full py-4 justify-between items-center h-16 hidden md:flex">
+<header class="w-full py-2 md:py-4 justify-start md:justify-between items-center h-auto md:h-16 md:flex">
     <div class="flex items-center gap-2 w-full">
         <!-- <a href="/" class="w-[25vw] md:min-w-[295px] flex items-center gap-2 pl-4">
             <span class="w-6 h-6 text-terminal"><Fragment set:html={LogoWithBackground} /></span>
             <span class="text-gray-800 dark:text-gray-200">Sim8085</span>
         </a> -->
-        <div class="w-[25vw] md:min-w-[295px]">
+        <div class="hidden md:block w-[25vw]">
             <a
                 href="/"
-                class="inline-flex items-center gap-2 ml-2 pl-2 pr-2 py-2 rounded group hover:bg-terminal-200"
+                class="inline-flex items-center gap-2 ml-1 pl-1 lg:ml-2 lg:pl-2 pr-2 py-2 rounded group hover:bg-terminal-200"
             >
             <span class="w-6 h-6 text-terminal z-10 relative">
                 <Fragment set:html={LogoWithBackground} />
             </span>
             <span
-                class="relative text-gray-800 transform -translate-x-8 opacity-0 transition-all duration-100 group-hover:translate-x-0 group-hover:opacity-100"
+                class="hidden md:block relative text-gray-800 transform -translate-x-8 opacity-0 transition-all duration-100 group-hover:translate-x-0 group-hover:opacity-100"
             >
                 Sim8085
             </span>
             </a>
         </div>
-        <div class="w-[45vw] hidden md:flex flex-grow flex-shrink max-w-[800px] min-w-[300px]">
-            <div class="flex-grow"></div>
+        <div class="w-auto md:w-[45vw] pl-2 md:pl-0 flex flex-grow flex-shrink max-w-[800px] md:min-w-[300px]">
+            <div class="flex-grow hidden md:block"></div>
             { showActions ? <Actions client:idle /> : null }
         </div>
-        <div class={`${fullwidth ? "w-[30vw] min-w-[320px]" : ""} flex-grow flex-shrink-0 flex items-start pr-4`}>
+        <div class={`${fullwidth ? "w-[30vw]" : ""} flex-grow flex-shrink-0 flex items-start pr-4`}>
         <!-- <div class="flex flex-grow items-center gap-2 space-x-2"> -->
             <!-- <div class="pl-2 border-r border-r-gray-500 dark:border-r-gray-600 h-4"></div> -->
             <div class="flex-grow"></div>
@@ -52,7 +52,7 @@ const { showActions, fullwidth } = Astro.props;
             >
                 <span>
                     <Fragment set:html={HandHoldingHeartIcon } />
-                </span> <span class="bmc-btn-text">Donate</span>
+                </span> <span class="hidden md:inline bmc-btn-text">Donate</span>
             </a>
         </div>
     </div>

src/components/IOPorts.jsx

@@ -17,7 +17,7 @@ export function IOPorts () {
   };
   return (
     <div class="h-full flex flex-col">
-      <div class="flex border-b-2 dark:border-b-gray-600 mb-4">
+      <div class="flex border-b border-b-secondary-border mb-4">
         <h2 class="text-xl grow pb-1">I/O Ports</h2>
       </div>
       <div class="h-full overflow-y-auto grow min-h-0 pr-2">
@@ -62,13 +62,13 @@ function IOPortRow(props) {
   const startEditing = () => setEditing(true);
 
   return (
-    <div key={props.value} class="flex justify-between items-center py-1 px-1 hover:bg-gray-400 dark:hover:bg-gray-600">
+    <div key={props.value} class="flex justify-between items-center py-1 px-1 hover:bg-active-background">
       <span class="font-mono">0x{props.location.toString(16).padStart(2, '0').toUpperCase()}</span>
       <span class="flex items-center gap-2">
         {
         editing() ? (
           <input
-            class="font-mono w-5 border-b border-b-gray-800 dark:border-b-gray-400 dark:bg-transparent"
+            class="font-mono w-5 border-b border-b-main-border bg-main-background"
             value={value()}
             onInput={handleInputChange(setValue)}
             onKeyDown={handleKeyOrBlur}
@@ -78,7 +78,7 @@ function IOPortRow(props) {
           />
         ) : (
           <span
-            class={`font-mono cursor-pointer ${props.value ? 'text-orange-600 dark:bg-transparent dark:border-b-green-300 dark:text-yellow-400' : 'dark:text-gray-500'}`}
+            class={`font-mono cursor-pointer ${props.value ? 'text-orange-foreground' : 'text-inactive-foreground'}`}
             onDblClick={() => setEditing(true)}
           >{toByteString(props.value)}</span>
         )

src/components/Registers.jsx

@@ -127,7 +127,7 @@ function Register(props) {
       <span class="font-mono text-secondary-foreground">0x</span>
       {editing() ? (
         <input
-          class="font-mono w-5 border-b border-b-primary-border"
+          class="font-mono w-5 border-b border-b-primary-border bg-main-background"
           value={highValue()}
           onInput={handleInputChange(setHighValue)}
           onKeyDown={handleKeyOrBlur}
@@ -147,7 +147,7 @@ function Register(props) {
       )}
       { editing() && props.canEditLow ? (
         <input
-          class="font-mono w-5 border-b border-b-primary-border"
+          class="font-mono w-5 border-b border-b-primary-border bg-main-background"
           value={lowValue()}
           onInput={handleInputChange(setLowValue)}
           onKeyDown={handleKeyOrBlur}

src/components/RightPanel.jsx

@@ -66,7 +66,7 @@ export function RightPanel() {
 
   return (
     <div class={`flex items-start ${expanded() ? "" : ""}`} style={{ width: `${expanded() ? `${width()}px` : 'auto'}` }}>
-      <div class="relative z-10 bg-page-background flex flex-col items-center h-sm:gap-4 gap-8 px-2 md:px-4 pt-4 border-r border-r-main-border h-lvh md:h-[calc(100vh-6rem)]">
+      <div class="relative z-10 bg-page-background flex flex-col items-center h-sm:gap-4 gap-8 px-2 lg:px-4 pt-4 border-r border-r-main-border h-dvh md:h-[calc(100vh-6rem)]">
         <PanelButton
           icon={<FiCpu />}
           isActive={isActive('cpu')}
@@ -98,7 +98,7 @@ export function RightPanel() {
         <div class="pb-1"></div>
       </div>
       <div id="content"
-        class="shadow-xl md:shadow-none relative z-5 min-w-60 w-full bg-secondary-background border-l-0 border-t border-b border-r md:border-r-0 border-main-border rounded-tl-sm rounded-bl-sm px-2 md:px-4 py-4  h-lvh md:h-[calc(100vh-6rem)] flex overflow-x-hidden overflow-y-auto transform transition-transform duration-300 ease-in-out"
+        class="shadow-xl md:shadow-none relative z-5 min-w-60 w-full bg-secondary-background border-l-0 border-t border-b border-r md:border-r-0 border-main-border rounded-tl-sm rounded-bl-sm px-2 md:px-4 py-4  h-dvh md:h-[calc(100vh-6rem)] flex overflow-x-hidden overflow-y-auto transform transition-transform duration-300 ease-in-out"
         style={{
           display: expanded() ? "flex" : "none",
         }}>
@@ -118,7 +118,7 @@ export function RightPanel() {
         </div>
         <div class="grow"></div>
       </div>
-      <div class="w-[5px] h-lvh md:h-[calc(100vh-6rem)] cursor-col-resize bg-secondary-background hover:bg-terminal active:bg-terminal border-y border-y-main-border" onMouseDown={startResize}
+      <div class="w-[5px] h-dvh md:h-[calc(100vh-6rem)] cursor-col-resize bg-secondary-background hover:bg-terminal active:bg-terminal border-y border-y-main-border" onMouseDown={startResize}
         style={{
           display: expanded() ? "flex" : "none",
         }}

src/components/codemirror/CodeMirror.jsx

@@ -187,7 +187,7 @@ export function CodeMirror(props) {
 
   return (
     <div class={`relative programState__${store.programState}`}>
-      <div ref={editorRef} class="editor-container border-l-0 border-b-0 bg-main-background h-lvh md:h-[calc(100vh-8rem-2px)]">
+      <div ref={editorRef} class="editor-container border-l-0 border-b-0 bg-main-background h-dvh md:h-[calc(100vh-8rem-2px)]">
         <div class={`${isEditorLoading() ? '' : 'hidden'} p-4 text-center`}>
           Editor is loading...
         </div>

src/components/styles.css

@@ -195,11 +195,10 @@
   align-items: center;
   height: 24px;
   width: 44px;
-  border: 1px solid hsl(240 5% 84%);
+  border: 1px solid rgb(var(--sm-gray-200));
   border-radius: 12px;
   padding: 0 2px;
-  @apply bg-gray-400;
-  @apply dark:bg-gray-600;
+  background-color: rgb(var(--sm-gray-300));
   transition: 250ms background-color;
   @apply cursor-pointer;
 }

src/layouts/Layout.astro

@@ -23,7 +23,7 @@ const { title, showActions, fullwidth, smallFooter } = Astro.props;
 <html lang="en" data-theme="light">
 	<head>
 		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, viewport-fit=cover" />
+		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
         <meta name="description" content="Simulator, Assembler and Debugger for Intel 8085 microprocessor." />
         <meta name="author" content="Debjit Biswas, www.debjitbiswas.com" />
         <meta name="keywords" content="8085, assembler, simulator, IDE, Intel">
@@ -53,7 +53,7 @@ const { title, showActions, fullwidth, smallFooter } = Astro.props;
         </script>
         <PostHogInit />
     </head>
-	<body class={`bg-page-background text-primary-foreground min-h-screen`}>
+	<body class={`bg-page-background text-primary-foreground min-h-dvh`}>
 	    <main class={`${!fullwidth ? "max-w-4xl mx-auto" : ""}`}>
 			<Header showActions={showActions} fullwidth={fullwidth} />
             <div>

src/pages/index.astro

@@ -13,7 +13,7 @@ import '../components/styles.css';
     <!-- <Tips /> -->
     <main class="h-full relative">
         <div
-            class="flex items-start h-lvh md:h-[calc(100vh-6rem)]"
+            class="flex items-start h-dvh md:h-[calc(100vh-6rem)]"
         >
             <!-- Left Panel with fixed width -->
             <div
@@ -44,7 +44,7 @@ import '../components/styles.css';
 
             <!-- Right Panel with fixed width -->
             <div
-                class="flex min-w-max items-start h-lvh md:h-[calc(100vh-6rem)]"
+                class="flex min-w-max items-start h-dvh md:h-[calc(100vh-6rem)]"
             >
                 <Assembled client:idle />
             </div>