From 618b67f5515744d01bdecd8bea816ea248e78ad2 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 29 Oct 2025 20:02:02 +0200
Subject: [PATCH] fix(share): redesign layout to avoid jumping on tablets

---
 packages/share-theme/src/styles/content.css |  1 +
 packages/share-theme/src/styles/layout.css  | 26 +++++++++++++++++----
 packages/share-theme/src/styles/mobile.css  | 12 ++++++++--
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/packages/share-theme/src/styles/content.css b/packages/share-theme/src/styles/content.css
index 6002b3913..47111f978 100644
--- a/packages/share-theme/src/styles/content.css
+++ b/packages/share-theme/src/styles/content.css
@@ -25,6 +25,7 @@
 .ck-content pre {
     overflow: auto;
     position: relative;
+    min-width: unset !important;
 }
 
 .ck-content pre .copy-button {
diff --git a/packages/share-theme/src/styles/layout.css b/packages/share-theme/src/styles/layout.css
index 947c411b7..9f26c6379 100644
--- a/packages/share-theme/src/styles/layout.css
+++ b/packages/share-theme/src/styles/layout.css
@@ -1,13 +1,21 @@
+html,
+body {
+    width: 100vw;
+    height: 100vh;
+}
+
 #split-pane {
     display: flex;
     flex-direction: row;
-    gap: 50px;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
 }
 
 #left-pane {
     display: flex;
-    width: calc((100vw - 900px) / 2);
     min-width: fit-content;
+    max-width: 20vw;
     height: calc(100vh);
     background: var(--background-secondary);
     border-right: 5px solid var(--background-highlight);
@@ -15,18 +23,28 @@
     position: sticky;
     top: 0;
     overflow-y: auto;
+    flex-shrink: 0;
 }
 
 #right-pane {
     display: flex;
     margin: 0 auto;
-    gap: 40px;
     flex: 1;
-    padding-right: 50px;
+    overflow: auto;
 }
 
 #main {
     order: 2;
     max-width: 900px;
     flex: 1;
+    padding: 0 20px;
+    box-sizing: border-box;
+    width: 100%;
+    overflow: auto;
+}
+
+@media (min-width: 1200px) {
+    #main {
+        padding: 0 50px;
+    }
 }
\ No newline at end of file
diff --git a/packages/share-theme/src/styles/mobile.css b/packages/share-theme/src/styles/mobile.css
index d0959b351..3b8d95051 100644
--- a/packages/share-theme/src/styles/mobile.css
+++ b/packages/share-theme/src/styles/mobile.css
@@ -35,9 +35,18 @@
 
 @media (max-width: 48em) {
     
+    html,
+    body {
+        width: unset;
+        height: unset;
+    }
+
+    #split-pane {
+        overflow: auto;
+    }
+
     #right-pane, #main {
         width: 100%;
-        overflow: hidden;
         padding: 0;
     }
     
@@ -45,7 +54,6 @@
         padding: 1rem;
     }
     
-    
     #mobile-header {
         display: flex;
     }