From 2512236d064d6910070ba703c9b34d93b653b86c Mon Sep 17 00:00:00 2001
From: arjxn-py <arjxn.py@gmail.com>
Date: Mon, 25 Aug 2025 14:03:04 +0530
Subject: [PATCH 1/3] add a mediquery to panels for mobiles

---
 packages/base/style/base.css | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/packages/base/style/base.css b/packages/base/style/base.css
index 7561673b6..a61c1f45e 100644
--- a/packages/base/style/base.css
+++ b/packages/base/style/base.css
@@ -101,3 +101,21 @@ button.jp-mod-styled.jp-mod-reject {
   left: 0px;
   margin: 5px;
 }
+
+@media (max-width: 768px) {
+  .jgis-left-panel-container,
+  .jgis-right-panel-container {
+    position: fixed;
+    left: 0;
+    right: auto;
+    width: 90%;
+  }
+
+  .jgis-left-panel-container {
+    top: 30px;
+  }
+
+  .jgis-right-panel-container {
+    top: calc(30px + 250px + 20px);
+  }
+}

From 8692d3d7d2d3a51615a4c4aac4545716f9bfee97 Mon Sep 17 00:00:00 2001
From: arjxn-py <arjxn.py@gmail.com>
Date: Mon, 25 Aug 2025 16:45:30 +0530
Subject: [PATCH 2/3] wrap panels to a container and give it style

---
 packages/base/src/mainview/mainView.tsx |  2 ++
 packages/base/style/base.css            | 20 +++++++++++---------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/base/src/mainview/mainView.tsx b/packages/base/src/mainview/mainView.tsx
index 82caddef6..1afa78efa 100644
--- a/packages/base/src/mainview/mainView.tsx
+++ b/packages/base/src/mainview/mainView.tsx
@@ -2299,6 +2299,7 @@ export class MainView extends React.Component<IProps, IStates> {
           />
         </div>
 
+        <div className="jgis-panels-wrapper">
         {this._state && (
           <LeftPanel
             model={this._model}
@@ -2313,6 +2314,7 @@ export class MainView extends React.Component<IProps, IStates> {
             annotationModel={this._annotationModel}
           ></RightPanel>
         )}
+        </div>
       </>
     );
   }
diff --git a/packages/base/style/base.css b/packages/base/style/base.css
index a61c1f45e..946f692e2 100644
--- a/packages/base/style/base.css
+++ b/packages/base/style/base.css
@@ -103,19 +103,21 @@ button.jp-mod-styled.jp-mod-reject {
 }
 
 @media (max-width: 768px) {
-  .jgis-left-panel-container,
-  .jgis-right-panel-container {
+  .jgis-panels-wrapper {
     position: fixed;
-    left: 0;
-    right: auto;
-    width: 90%;
-  }
-
-  .jgis-left-panel-container {
     top: 30px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+    margin: 0 5px;
+    z-index: 1000;
+    width: 60%;
   }
 
+  .jgis-left-panel-container,
   .jgis-right-panel-container {
-    top: calc(30px + 250px + 20px);
+    position: relative;
+    margin: 0;
   }
 }

From 0674c4115c47c578965508e03045da96dca7fd24 Mon Sep 17 00:00:00 2001
From: arjxn-py <arjxn.py@gmail.com>
Date: Mon, 25 Aug 2025 17:16:45 +0530
Subject: [PATCH 3/3] lint

---
 packages/base/src/mainview/mainView.tsx | 28 ++++++++++++-------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/base/src/mainview/mainView.tsx b/packages/base/src/mainview/mainView.tsx
index 1afa78efa..70fb83a29 100644
--- a/packages/base/src/mainview/mainView.tsx
+++ b/packages/base/src/mainview/mainView.tsx
@@ -2300,20 +2300,20 @@ export class MainView extends React.Component<IProps, IStates> {
         </div>
 
         <div className="jgis-panels-wrapper">
-        {this._state && (
-          <LeftPanel
-            model={this._model}
-            commands={this._mainViewModel.commands}
-            state={this._state}
-          ></LeftPanel>
-        )}
-        {this._formSchemaRegistry && this._annotationModel && (
-          <RightPanel
-            model={this._model}
-            formSchemaRegistry={this._formSchemaRegistry}
-            annotationModel={this._annotationModel}
-          ></RightPanel>
-        )}
+          {this._state && (
+            <LeftPanel
+              model={this._model}
+              commands={this._mainViewModel.commands}
+              state={this._state}
+            ></LeftPanel>
+          )}
+          {this._formSchemaRegistry && this._annotationModel && (
+            <RightPanel
+              model={this._model}
+              formSchemaRegistry={this._formSchemaRegistry}
+              annotationModel={this._annotationModel}
+            ></RightPanel>
+          )}
         </div>
       </>
     );