fix: Improve mobile styling

src/components/Assembled.jsx

@@ -53,10 +53,10 @@ 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-lvh md:h-[calc(100vh-6em)] absolute top-0 right-0 md:static ${expanded() ? "shadow-xl" : ""} md:shadow-none`}
+      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`}
       style={{ width: `${expanded() ? `${width()}px` : 'auto'}` }}
     >
-      <button type="button" class="w-[3px] h-svh 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-6.2rem)] cursor-col-resize hover:bg-terminal active:bg-terminal" onMouseDown={startResize}
         style={{
           display: expanded() ? "block" : "none",
         }}

src/components/Header.astro

@@ -38,7 +38,7 @@ const { showActions, fullwidth } = Astro.props;
             <div class="flex-grow hidden md:block"></div>
             { showActions ? <Actions client:idle /> : null }
         </div>
-        <div class={`${fullwidth ? "w-[30vw]" : ""} flex-grow flex-shrink-0 flex items-start pr-4`}>
+        <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> -->
             <div class="flex-grow"></div>

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 lg:px-4 pt-4 border-r border-r-main-border h-dvh 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-[calc(100dvh-4rem)] md:h-[calc(100vh-6.2rem)]">
         <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-dvh 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 text-sm md:text-base 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-[calc(100dvh-4rem)] md:h-[calc(100vh-6.2rem)] 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-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}
+      <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" onMouseDown={startResize}
         style={{
           display: expanded() ? "flex" : "none",
         }}

src/components/analytics/CookieBanner.astro

@@ -1,7 +1,7 @@
 <div
     x-data="cookieBanner"
     x-show="showBanner"
-    class="fixed bottom-0 right-0 w-[30vw] max-w-[500px] p-4 m-4 rounded-md bg-secondary-background border border-secondary-border shadow-lg"
+    class="fixed bottom-0 right-0 w-[80vw] md:w-[30vw] max-w-[500px] text-sm md:text-base p-4 m-4 rounded-md bg-secondary-background border border-secondary-border shadow-lg"
     style="display: none;"
 >
     <p class="mb-2">

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-dvh md:h-[calc(100vh-8rem-2px)]">
+      <div ref={editorRef} class="editor-container border-l-0 border-b-0 bg-main-background h-[calc(100dvh-4rem-2px)]  md:h-[calc(100vh-8.2rem-2px)]">
         <div class={`${isEditorLoading() ? '' : 'hidden'} p-4 text-center`}>
           Editor is loading...
         </div>

src/pages/index.astro

@@ -11,9 +11,9 @@ import '../components/styles.css';
 
 <Layout title="Sim8085 - A 8085 microprocessor simulator" showActions={true} fullwidth={true} smallFooter={true}>
     <!-- <Tips /> -->
-    <main class="h-full relative">
+    <main class="relative">
         <div
-            class="flex items-start h-dvh md:h-[calc(100vh-6rem)]"
+            class="flex items-start h-[calc(100dvh-4rem)] md:h-[calc(100vh-6.2rem)]"
         >
             <!-- 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-dvh md:h-[calc(100vh-6rem)]"
+                class="flex min-w-max items-start h-[calc(100dvh-4rem)] md:h-[calc(100vh-6.2rem)]"
             >
                 <Assembled client:idle />
             </div>

src/tailwind.main.config.mjs

@@ -27,6 +27,9 @@ export default {
       '../public/tips/*.html',
       './components/**/*.{astro,html,js,jsx,md,mdx,css}',
     ]
+  },
+  future: {
+    hoverOnlyWhenSupported: true,
   },
 	darkMode: 'selector',
 	theme: {