fix: Improve mobile layout

src/components/Actions.jsx

@@ -344,7 +344,10 @@ export function Actions() {
 
 
   return (
-    <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 md:gap-2 border-l-0 border-t-0 border-b-0 rounded-sm
+        flex-row-reverse max-w-sm mx-auto justify-between
+        md:flex-row md:w-auto
+    ">
       <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

@@ -8,6 +8,7 @@ import CopyComponent from './CopyComponent.jsx';
 import {Tooltip} from '@kobalte/core/tooltip';
 import {BsArrowBarLeft, BsArrowBarRight} from 'solid-icons/bs';
 import styles from './Assembled.module.css';
+import {BiRegularDockLeft, BiRegularDockRight, BiSolidDockLeft, BiSolidDockRight} from "solid-icons/bi";
 
 export function Assembled() {
     let [lines, setLines] = createSignal([]);
@@ -24,7 +25,7 @@ export function Assembled() {
     };
 
     onMount(() => {
-        setWidth(window.innerWidth * (window.innerWidth > 768 ? 0.3 : 0.8));
+        setWidth(window.innerWidth * (window.innerWidth > 768 ? 0.3 : 1));
         const handleResize = () => {
             const isMd = window.matchMedia("(min-width: 768px)").matches;
             setExpanded(isMd);
@@ -33,8 +34,16 @@ export function Assembled() {
         // Initial check
         handleResize();
 
-        // Listen for resize events
-        window.addEventListener("resize", handleResize);
+        const isMd = window.matchMedia("(min-width: 768px)").matches;
+
+        if (isMd) {
+            // Listen for resize events
+            window.addEventListener("resize", handleResize);
+        }
+
+        window.addEventListener("showRightPanel", () => {
+            setExpanded(true);
+        });
 
         // Cleanup listener on component unmount
         return () => {
@@ -68,19 +77,19 @@ export function Assembled() {
 
     return (
         <div
-            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-[calc(100dvh-4rem)] md:h-[calc(100vh-6.2rem)] absolute top-0 right-0 md:static ${expanded() ? "shadow-xl" : ""} md:shadow-none`}
+            class={`${expanded() ? "w-svw md:w-full" : "w-8"} flex border-y-0 md:border-y border-y-main-border ${expanded() ? "md:border-l" : "border-l-0"} border-l-main-border bg-page-background md:bg-main-background h-[calc(100svh-5.6rem)] md:h-[calc(100vh-6.2rem)] absolute top-0 right-0 md:static ${expanded() ? "shadow-xl" : ""} md:shadow-none`}
             style={{width: `${expanded() ? `${width()}px` : 'auto'}`}}
         >
             <button type="button"
-                    class="min-w-[3px] w-[3px] h-svh md:h-[calc(100vh-6.2rem)] cursor-col-resize hover:bg-terminal active:bg-terminal"
+                    class="w-0 md:min-w-[3px] md:w-[3px] h-[calc(100svh-5.5rem)] md:h-[calc(100vh-6.2rem)] 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 pt-2 md:pt-2" : "p-0 pt-2 pr-2"} w-full`}
+                class={`${expanded() ? "p-2 md:p-4 pt-2 md:pt-2" : "p-1 pt-2 pr-4"} w-full`}
             >
                 <div class="flex items-start gap-2">
                     <h2 class={`md:text-xl pb-4 ${expanded() ? 'block' : 'hidden'}`}>
@@ -103,8 +112,8 @@ export function Assembled() {
                     </div>
                     <div class="flex-grow"></div>
                     <Tooltip placement="left">
-                        <Tooltip.Trigger class="tooltip__trigger relative" onClick={toggleExpanded}>
-                            {expanded() ? <BsArrowBarRight/> : <BsArrowBarLeft/>}
+                        <Tooltip.Trigger class="tooltip__trigger relative py-1 hidden md:block" onClick={toggleExpanded}>
+                            {expanded() ? <BiSolidDockRight /> : <BiRegularDockRight />}
                             {store.assembled.length || store.errors.length && !expanded() ? (
                                 <span
                                     class={`w-2 h-2 rounded-[2rem] bg-terminal absolute left-0 bottom-[-4px] ${styles.radiatingBorder}`}> </span>
@@ -119,11 +128,11 @@ export function Assembled() {
                     </Tooltip>
                 </div>
                 <div class={`flex flex-col ${expanded() ? 'block' : 'hidden'}`}
-                     style={{height: "calc(100vh - 8rem - 1px)"}}>
+                     style={{height: "calc(100vh - 5.5rem)"}}>
                     <div style={{height: 'calc(100% - 0rem)'}}>
                         <div
                             class={`${store.assembled.length ? '' : 'hidden'} w-full overflow-x-auto text-[0.7rem] md:text-sm`}
-                            style={{height: 'calc(100% - 2.75rem)'}}
+                            style={{height: 'calc(100% - 3.75rem)'}}
                         >
                             <table class={`font-mono table ${styles.machineCodeTable}`}>
                                 <thead>

src/components/Header.astro

@@ -2,6 +2,10 @@
 import HandHoldingHeartIcon from '../icons/hand-holding-heart.svg?raw';
 import LockIcon from '../icons/lock.svg?raw';
 import MenuIcon from '../icons/menu.svg?raw';
+import RegularDockLeftIcon from '../icons/regular-dock-left.svg?raw';
+import SolidDockLeftIcon from '../icons/solid-dock-left.svg?raw';
+import RegularDockRightIcon from '../icons/regular-dock-right.svg?raw';
+import SolidDockRightIcon from '../icons/solid-dock-right.svg?raw';
 import Logo from '../icons/logo.svg?raw';
 import LogoWithBackground from '../icons/logo-with-green-background.svg?raw';
 import FAQs from './FAQs.astro';
@@ -23,13 +27,13 @@ const user = session?.user;
 const isLoggedIn = !!user;
 const avatarUrl = user?.user_metadata?.avatar_url || '/default-avatar.png'; // Default avatar if none exists
 ---
-<header class="w-full py-2 md:py-4 justify-start md:justify-between items-center h-auto md:h-16 md:flex">
+<header class="w-full py-0 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="hidden md:block">
+        <div class="md:block">
             <a
                 href="/"
                 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 relative"
@@ -44,16 +48,28 @@ const avatarUrl = user?.user_metadata?.avatar_url || '/default-avatar.png'; // D
                 </span>
             </a>
         </div>
-        <!--
-        <div class="pl-4">
+        {showActions ? <div class="pl-4 hidden">
             <FileActions client:idle/>
-        </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> : null}
+        {showActions ? (
+            <div class="
+                md:pl-0 flex flex-grow flex-shrink md:min-w-[300px] md:gap-2 md:justify-end
+                fixed bottom-0 left-0 z-50 bg-page-background w-full py-2 px-4
+                md:static
+            ">
+                <button type="button" id="left-panel-btn" class="md:hidden">
+                    <span class="regular-icon"><Fragment set:html={RegularDockLeftIcon} /></span>
+                    <span class="solid-icon"><Fragment set:html={SolidDockLeftIcon} /></span>
+                </button>
+                <div class="flex-grow hidden md:block"></div>
+                {showActions ?
+                    <Actions client:idle/> : null}
+                <button type="button" id="right-panel-btn" class="md:hidden">
+                    <span class="regular-icon"><Fragment set:html={RegularDockRightIcon} /></span>
+                    <span class="solid-icon"><Fragment set:html={SolidDockRightIcon} /></span>
+                </button>
+            </div>
+        ) : null}
         <div class={`${fullwidth ? "w-[30vw]" : ""} flex-grow flex-shrink-0 flex items-start pr-2 md: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> -->
@@ -110,30 +126,45 @@ const avatarUrl = user?.user_metadata?.avatar_url || '/default-avatar.png'; // D
                 </button>
                 <div x-data="mobileMenu" class="relative block md:hidden">
                     <div class="relative">
-                        <button @click="menuOpen = !menuOpen" class="flex items-center focus:outline-none py-2">
+                        <button @click="menuOpen = !menuOpen" class="flex items-center focus:outline-none py-1">
                             <span
-                                class="w-8 h-8 rounded-full text-xl content-center text-inactive-foreground hover:text-active-foreground">
+                                class="w-8 h-8 rounded-full text-xl content-center text-inactive-foreground hover:text-active-foreground flex items-center justify-end">
                                 <Fragment set:html={MenuIcon}/>
                             </span>
                         </button>
                         <div x-show="menuOpen" @click.away="menuOpen = false"
                              class="absolute right-0 mt-2 w-48 bg-secondary-background rounded-md shadow-lg overflow-hidden z-10">
                             <template x-if="isLoggedIn">
                                 <button @click="logout"
-                                        class="block w-full px-4 py-2 text-sm text-left text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
+                                        class="block w-full px-4 py-2 text-sm text-left text-active-foreground hover:bg-active-background">
                                     Logout
                                 </button>
                             </template>
                             <template x-if="!isLoggedIn">
                                 <a href="/login"
-                                   class="block w-full px-4 py-2 text-sm text-left text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
+                                   class="block w-full px-4 py-2 text-sm text-left text-active-foreground hover:bg-active-background">
                                     Login
                                 </a>
                             </template>
                             <a href="https://buymeacoffee.com/sim8085"
-                               class="block w-full px-4 py-2 text-sm text-left text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600">
+                               class="block w-full px-4 py-2 text-sm text-left text-active-foreground hover:bg-active-background">
                                 Donate
                             </a>
+                            <a href="/docs/en"
+                               target="_blank"
+                               class="block w-full px-4 py-2 text-sm text-left text-active-foreground hover:bg-active-background">
+                                Documentation
+                            </a>
+                            <a href="/changelog"
+                               target="_blank"
+                               class="block w-full px-4 py-2 text-sm text-left text-active-foreground hover:bg-active-background">
+                                Changelog
+                            </a>
+                            <a href="https://github.com/debjitbis08/sim8085"
+                               target="_blank"
+                               class="block w-full px-4 py-2 text-sm text-left text-active-foreground hover:bg-active-background">
+                                GitHub
+                            </a>
                         </div>
                     </div>
                 </div>
@@ -173,6 +204,22 @@ const avatarUrl = user?.user_metadata?.avatar_url || '/default-avatar.png'; // D
         animation: none;
         box-shadow: none;
     }
+
+    .regular-icon {
+        display: block;
+    }
+
+    .solid-icon {
+        display: none;
+    }
+
+    .solid .solid-icon {
+        display: block
+    }
+
+    .solid .regular-icon {
+        display: none;
+    }
 </style>
 <script>
     import Alpine from 'alpinejs';
@@ -258,4 +305,32 @@ const avatarUrl = user?.user_metadata?.avatar_url || '/default-avatar.png'; // D
             }
         }));
     });
+
+    document.getElementById("left-panel-btn")?.addEventListener("click", function () {
+        window.dispatchEvent(
+            new CustomEvent("showLeftPanel", {
+                detail: {},
+            })
+        );
+        if (this.classList.contains("solid")) {
+            this.classList.remove("solid");
+        } else {
+            this.classList.add("solid");
+        }
+    });
+
+    document.getElementById("right-panel-btn")?.addEventListener("click", function () {
+        window.dispatchEvent(
+            new CustomEvent("showRightPanel", {
+                detail: {},
+            })
+        );
+        if (this.classList.contains("solid")) {
+            this.classList.remove("solid");
+        } else {
+            this.classList.add("solid");
+        }
+    });
 </script>
+
+

src/components/MemoryList.jsx

@@ -171,7 +171,7 @@ export default function MemoryList({ threshold = 4 }) {
         <h2 class="text-xl grow pb-1">Memory</h2>
         <div class="flex gap-2">
           <Dialog>
-            <Dialog.Trigger class="dialog__trigger">
+            <Dialog.Trigger class="dialog__trigger hidden md:block">
               <AiOutlineFullscreen class="font-bold" title="View All Memory Locations" />
             </Dialog.Trigger>
             <Dialog.Portal>

src/components/RightPanel.jsx

@@ -10,6 +10,7 @@ import {Settings} from "./Settings";
 import {KeyboardShortcuts} from "./KeyboardShortcuts";
 import {Tooltip} from "@kobalte/core/tooltip";
 import {Workspace} from "./Workspace.jsx";
+import {BiRegularDockLeft, BiSolidDockLeft} from "solid-icons/bi";
 
 export function RightPanel() {
     const [activeTab, setActiveTab] = createSignal('cpu');
@@ -28,6 +29,10 @@ export function RightPanel() {
         // Listen for resize events
         window.addEventListener("resize", handleResize);
 
+        window.addEventListener("showLeftPanel", () => {
+            setExpanded(true);
+        });
+
         // Cleanup listener on component unmount
         return () => {
             window.removeEventListener("resize", handleResize);
@@ -73,7 +78,16 @@ export function RightPanel() {
         <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-4 pt-4 border-r border-r-main-border h-[calc(100dvh-4rem)] md:h-[calc(100vh-6.2rem)]">
+                class="relative z-10 bg-page-background flex flex-col items-center h-sm:gap-4 gap-4 pt-2 md:pt-4 border-r-0 md:border-r border-r-main-border h-[calc(100dvh-4rem)] md:h-[calc(100vh-6.2rem)]">
+                <div class="hidden md:block">
+                    <PanelButton
+                        icon={expanded() ? <BiSolidDockLeft /> : <BiRegularDockLeft />}
+                        isActive={true}
+                        onClick={() => toggleExpanded()}
+                        title="Expand or Collapse this panel"
+                    />
+                </div>
+                <div class="h-[0.1rem] bg-secondary-foreground w-5 hidden md:block"></div>
                 {/*<PanelButton*/}
                 {/*  icon={<FiFolder />}*/}
                 {/*  isActive={isActive('workspace')}*/}
@@ -115,9 +129,6 @@ export function RightPanel() {
                  style={{
                      display: expanded() ? "block" : "none",
                  }}>
-                <div onClick={toggleExpanded} class="md:hidden cursor-pointer w-full mb-2 flex justify-end">
-                    {expanded() ? <BsArrowBarLeft/> : <BsArrowBarRight/>}
-                </div>
                 <div class={`w-full ${activeTab() === 'workspace' ? '' : 'hidden'}`}>
                     <Workspace/>
                 </div>
@@ -138,7 +149,7 @@ export function RightPanel() {
                 <div class="grow"></div>
             </div>
             <div
-                class="w-[5px] h-[calc(100dvh-4rem)] md:h-[calc(100vh-6.2rem)] cursor-col-resize bg-secondary-background hover:bg-terminal active:bg-terminal border-y border-y-main-border"
+                class="w-0 md:w-[5px] h-[calc(100dvh-4rem)] md:h-[calc(100vh-6.2rem)] 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",
@@ -157,7 +168,7 @@ export function PanelButton(props) {
                 onClick={props.onClick}
                 disabled={props.disabled}
             >
-                <span class="sm:text-xl md:text-xl lg:text-2xl py-2 px-2 lg:px-4">{props.icon}</span>
+                <span class="sm:text-xl md:text-xl lg:text-2xl py-1 md:py-2 px-2 lg:px-4">{props.icon}</span>
             </Tooltip.Trigger>
             <Tooltip.Portal>
                 <Tooltip.Content class="tooltip__content">

src/components/ThemeSwitcher.astro

@@ -35,7 +35,7 @@ import ComputerDesktopIcon from '../icons/computer-desktop.svg?raw';
     >
       <div>
         <button
-            class="inline-flex justify-center rounded-md px-3 py-2 text-sm font-semibold text-inactive-foreground hover:text-active-foreground transition-colors bg-transparent focus:outline-none"
+            class="inline-flex justify-center rounded-md px-3 pr-0 py-1 md:py-2 text-sm font-semibold text-inactive-foreground hover:text-active-foreground transition-colors bg-transparent focus:outline-none"
             x-ref="button"
             x-on:click="toggle()"
             :aria-expanded="open"

src/components/styles.css

@@ -117,7 +117,7 @@
 
 .dialog__content {
     @apply z-50;
-    @apply min-w-full md:min-w-[500px];
+    @apply min-w-full md:min-w-[500px] min-h-svh md:min-h-max;
     background-color: rgb(var(--sm-secondary-background));
     border: 1px solid hsl(240 5% 84%);
     border-radius: 6px;