1 files changed, 24 insertions, 9 deletions
diff --git a/public/bluebey-studio/src/style.css b/public/bluebey-studio/src/style.css
index efd0a18..f4c9270 100644
--- a/public/bluebey-studio/src/style.css
+++ b/public/bluebey-studio/src/style.css
@@ -132,6 +132,10 @@ body:not(.panel-hidden) #stage {
 #panel::-webkit-scrollbar { width: 9px; }
 #panel::-webkit-scrollbar-thumb { background: #d8d1e8; border-radius: 9px; }
 
+/* The phone sheet's grab handle is a real element (built in the app) so it can
+   carry a drag; it is hidden everywhere else. */
+.panel-grip { display: none; }
+
 body.panel-hidden #panel { display: none; }
 
 body.panel-hidden #topbar { max-width: calc(100vw - 48px); }
@@ -203,33 +207,44 @@ body.panel-hidden #topbar { max-width: calc(100vw - 48px); }
     bottom: 0;
     width: auto;
     max-height: 65dvh;
-    padding: 20px 14px calc(20px + env(safe-area-inset-bottom));
+    padding: 0 14px calc(20px + env(safe-area-inset-bottom));
     border-left: 0;
     border-top: 1px solid var(--border);
     border-radius: 18px 18px 0 0;
     box-shadow: 0 -6px 24px rgba(40, 20, 80, 0.18);
   }
 
-  /* A grab handle so the sheet reads as an edge that opens and closes; it
-     sticks to the top of the scroll area as the sheet is scrolled. */
-  #panel::before {
-    content: "";
+  /* The grab handle: sticky at the top of the scroll area, so it stays grabbable
+     however far the menu is scrolled, and `touch-action: none` so a drag on it
+     resizes the sheet instead of scrolling it. */
+  .panel-grip {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     position: sticky;
     top: 0;
-    display: block;
+    z-index: 6;
+    height: 24px;
+    margin: 0 -14px;
+    background: var(--card);
+    touch-action: none;
+    cursor: grab;
+  }
+  .panel-grip::after {
+    content: "";
     width: 44px;
     height: 5px;
-    margin: 0 auto 12px;
     border-radius: 999px;
     background: #cfc6e4;
   }
+  .panel-grip:active { cursor: grabbing; }
 
   body.panel-hidden #topbar { max-width: none; }
 
   /* The grab handle is sticky at the top of the sheet, so the action bar and the
      tabs start below it. */
-  .panel-topbar { top: 17px; }
-  .tabs { top: 51px; }
+  .panel-topbar { top: 24px; }
+  .tabs { top: 58px; }
 }
 
 /* ----------------------------------------------------------------- sections */