Fix Overlapping of Panels on smaller screens (#896)

* add a mediquery to panels for mobiles

* wrap panels to a container and give it style

* lint

Author: arjxn-py

packages/base/src/mainview/mainView.tsx

@@ -2299,20 +2299,22 @@ export class MainView extends React.Component<IProps, IStates> {
           />
         </div>
 
-        {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 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>
+          )}
+        </div>
       </>
     );
   }

packages/base/style/base.css

@@ -101,3 +101,23 @@ button.jp-mod-styled.jp-mod-reject {
   left: 0px;
   margin: 5px;
 }
+
+@media (max-width: 768px) {
+  .jgis-panels-wrapper {
+    position: fixed;
+    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 {
+    position: relative;
+    margin: 0;
+  }
+}