From 86de784d78658a5dae516e695a360acfc651e45a Mon Sep 17 00:00:00 2001
From: Debjit Biswas <debjit@fastmail.fm>
Date: Sat, 16 Nov 2024 01:45:18 +0530
Subject: [PATCH] fix: Improve mobile styling

---
 src/components/Assembled.jsx                | 4 ++--
 src/components/Header.astro                 | 2 +-
 src/components/RightPanel.jsx               | 6 +++---
 src/components/analytics/CookieBanner.astro | 2 +-
 src/components/codemirror/CodeMirror.jsx    | 2 +-
 src/pages/index.astro                       | 6 +++---
 src/tailwind.main.config.mjs                | 3 +++
 7 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/components/Assembled.jsx b/src/components/Assembled.jsx
index 2909f85..223ca37 100644
--- a/src/components/Assembled.jsx
+++ b/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",
         }}
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 7892631..9f597ac 100644
--- a/src/components/Header.astro
+++ b/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>
diff --git a/src/components/RightPanel.jsx b/src/components/RightPanel.jsx
index e65c893..755baa1 100644
--- a/src/components/RightPanel.jsx
+++ b/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",
         }}
diff --git a/src/components/analytics/CookieBanner.astro b/src/components/analytics/CookieBanner.astro
index de03281..4f1d2e8 100644
--- a/src/components/analytics/CookieBanner.astro
+++ b/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">
diff --git a/src/components/codemirror/CodeMirror.jsx b/src/components/codemirror/CodeMirror.jsx
index 19e7f76..ce2eb10 100644
--- a/src/components/codemirror/CodeMirror.jsx
+++ b/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>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 59760d8..e7e98fc 100644
--- a/src/pages/index.astro
+++ b/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>
diff --git a/src/tailwind.main.config.mjs b/src/tailwind.main.config.mjs
index 999babd..33a4484 100644
--- a/src/tailwind.main.config.mjs
+++ b/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: {