Open settings panel on btn click on mobiles.

edgedb · Sep 6, 2023 · 805a485 · 805a485
1 parent 65fae85
commit 805a485
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 11 deletions.
diff --git a/shared/studio/components/databasePage/databasePage.module.scss b/shared/studio/components/databasePage/databasePage.module.scss
@@ -21,15 +21,6 @@
     grid-template-columns: 1fr;
     padding: 0;
   }
-
-  @include breakpoint(mobile) {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 10;
-  }
 }
 
 .sessionBar {

diff --git a/shared/studio/components/sessionState/index.tsx b/shared/studio/components/sessionState/index.tsx
@@ -30,6 +30,7 @@ export function SessionStateControls() {
 export const SessionStateButton = observer(function SessionStateButton() {
   const sessionState = useDatabaseState().sessionState;
   const targetEl = document.getElementById("sessionStateControls");
+  const isMobile = useIsMobile();
 
   if (targetEl) {
     return createPortal(
@@ -41,7 +42,8 @@ export const SessionStateButton = observer(function SessionStateButton() {
             [styles.panelOpen]: sessionState.panelOpen,
           })}
           onClick={() => {
-            if (sessionState.barOpen) {
+            if (isMobile) sessionState.openPanel();
+            else if (sessionState.barOpen) {
               sessionState.closePanel();
               sessionState.setBarOpen(false);
             } else {

diff --git a/shared/studio/components/sessionState/sessionState.module.scss b/shared/studio/components/sessionState/sessionState.module.scss
@@ -284,9 +284,10 @@
   transition: opacity 0.2s 0s, z-index 0s 0.2s;
 
   @include breakpoint(mobile) {
+    position: fixed;
+    top: 0;
     left: 0;
     right: 0;
-    width: 100vw;
     background: #d9d9d9;
 
     @include darkTheme {