@mastra/playground-ui 62.0.0-alpha.2 → 62.0.0-alpha.4

package/dist/components/Sidebar.es.js

@@ -22,7 +22,7 @@ import { D as DropdownMenu } from '../dropdown-menu-D8GR_NhL.js';
 import { useLocalStorageState } from '../hooks/use-local-storage-state.es.js';
 
 import '../Sidebar.css';function SidebarFooter({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx("footer", { "data-slot": "sidebar-footer", className: cn("mt-auto shrink-0 space-y-1.5 pb-2", className), ...props, children });
+  return /* @__PURE__ */ jsx("footer", { "data-slot": "sidebar-footer", className: cn("mt-auto shrink-0 space-y-1.5", className), ...props, children });
 }
 
 const SidebarContext = React__default.createContext(null);
@@ -1202,8 +1202,9 @@ function SidebarPanel({ children, className, mobileMode = "drawer" }) {
             className: cn(
               "flex h-full min-h-0 flex-col overflow-hidden",
               "transition-opacity duration-200 motion-reduce:transition-none",
-              "px-2",
-              isHidden && "pointer-events-none px-0 opacity-0"
+              // Inset on every side, like the mobile drawer's container, so the header and footer never touch an edge.
+              "p-2",
+              isHidden && "pointer-events-none p-0 opacity-0"
             ),
             children
           }
@@ -1258,7 +1259,7 @@ function SidebarRoot({
     {
       "data-slot": "sidebar-surface",
       className: cn(
-        "my-2 -mr-2 -ml-4 flex min-h-0 flex-1 flex-col overflow-hidden rounded-r-xl py-1.5",
+        "-mr-2 -ml-4 flex min-h-0 flex-1 flex-col overflow-hidden rounded-r-xl py-1.5",
         sidebar?.state === "collapsed" ? "pr-2 pl-4" : "pr-3.5 pl-5.5",
         frameSurfaceStyle
       ),