@rebasepro/admin 0.0.1-canary.eae7889 → 0.1.0

package/src/components/HomePage/ContentHomePage.tsx

@@ -19,9 +19,10 @@ import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable"
 import { restrictToVerticalAxis, restrictToWindowEdges } from "@dnd-kit/modifiers";
 import { RenameGroupDialog } from "./RenameGroupDialog";
 import { toArray } from "@rebasepro/utils";
-import { useCollapsedGroups, useCustomizationController, useTranslation, useSlot, useAdminModeController } from "@rebasepro/core";
+import { useCollapsedGroups, buildCollapsedDefaults, useCustomizationController, useTranslation, useSlot, useAdminModeController, useRebaseRegistry } from "@rebasepro/core";
 import { useRestoreScroll } from "@rebasepro/core";
-import { STUDIO_NAVIGATION_GROUPS } from "@rebasepro/core";
+
+import { BootstrapAdminBanner } from "@rebasepro/core";
 import { useBreadcrumbsController, useCMSContext } from "../../index";
 
 export const DEFAULT_GROUP_NAME = "Views";
@@ -45,7 +46,8 @@ export function ContentHomePage({
     const { navigationStateController } = context;
     const customizationController = useCustomizationController();
     const adminModeController = useAdminModeController();
-    const isStudioMode = adminModeController.mode === "studio";
+    const registry = useRebaseRegistry();
+
     const { resolvedSlots } = customizationController;
     const breadcrumbs = useBreadcrumbsController();
     const { t } = useTranslation();
@@ -61,19 +63,19 @@ export function ContentHomePage({
         onNavigationEntriesUpdate = () => {}
     } = navigationStateController.topLevelNavigation || {};
 
+    // Studio mode shows view-type entries (devViews) + admin entries (Users/Roles).
+    // Content mode shows collections, admin entries (Users/Roles), and custom entries — but not studio views.
     const rawNavigationEntries = useMemo(() => {
-        return unFilteredNavigationEntries.filter(e => {
-            const isStudioGroup = e.group ? STUDIO_NAVIGATION_GROUPS.includes(e.group) : false;
-            return isStudioMode ? isStudioGroup : !isStudioGroup;
-        });
-    }, [unFilteredNavigationEntries, isStudioMode]);
+        if (adminModeController.mode === "studio") {
+            return unFilteredNavigationEntries.filter(e => e.type === "view" || e.type === "admin");
+        }
+        return unFilteredNavigationEntries.filter(e => e.type !== "view");
+    }, [unFilteredNavigationEntries, adminModeController.mode]);
 
     const groupOrderFromNavController = useMemo(() => {
-        return unFilteredGroupOrder.filter(g => {
-            const isStudioGroup = STUDIO_NAVIGATION_GROUPS.includes(g);
-            return isStudioMode ? isStudioGroup : !isStudioGroup;
-        });
-    }, [unFilteredGroupOrder, isStudioMode]);
+        const entryGroups = new Set(rawNavigationEntries.map(e => e.group).filter(Boolean));
+        return unFilteredGroupOrder.filter(g => entryGroups.has(g));
+    }, [unFilteredGroupOrder, rawNavigationEntries]);
 
     const fuse = useRef<Fuse<NavigationEntry> | null>(null);
     const [filteredUrls, setFilteredUrls] = useState<string[] | null>(null);
@@ -244,7 +246,11 @@ export function ContentHomePage({
         ...(adminGroupData ? [adminGroupData.name] : [])
     ], [items, adminGroupData]);
 
-    const { isGroupCollapsed, toggleGroupCollapsed } = useCollapsedGroups(groupNames, "home");
+    const collapsedDefaults = useMemo(
+        () => buildCollapsedDefaults(registry.cmsConfig?.navigationGroupMappings, "home"),
+        [registry.cmsConfig?.navigationGroupMappings]
+    );
+    const { isGroupCollapsed, toggleGroupCollapsed } = useCollapsedGroups(groupNames, "home", collapsedDefaults);
 
     const {
         sensors,
@@ -312,8 +318,11 @@ export function ContentHomePage({
        Render
        ─────────────────────────────────────────────────────────────── */
     return (
-        <div ref={containerRef} className="py-2 overflow-auto h-full w-full dark:bg-surface-800">
+        <div ref={containerRef} className="py-2 overflow-auto h-full w-full bg-surface-50 dark:bg-surface-800">
             <Container maxWidth="6xl">
+                <div className="mb-4">
+                    <BootstrapAdminBanner />
+                </div>
                 {/* search & actions */}
                 <div
                     className="w-full sticky py-4 transition-all duration-400 ease-in-out top-0 z-10 flex flex-row gap-4"

package/src/components/HomePage/NavigationCard.tsx

@@ -26,10 +26,10 @@ export const NavigationCard = React.memo(function NavigationCard({
     return (
         <Card
             className={cls(
-                "group h-full p-5 cursor-pointer transition-all duration-200 ease-in-out",
-                "border-surface-200/40 dark:border-surface-700/40",
-                "hover:-translate-y-0.5 hover:shadow-md hover:shadow-primary/5",
-                "hover:border-primary/30 dark:hover:border-primary/20",
+                "group h-full p-4 cursor-pointer transition-all duration-150 ease-in-out",
+                "border-surface-200 dark:border-surface-700/40",
+                "hover:shadow-md hover:shadow-black/[0.04]",
+                "hover:border-surface-300 dark:hover:border-primary/20",
                 shrink && "w-full max-w-full min-h-0 scale-75"
             )}
             onClick={() => {

package/src/components/HomePage/NavigationGroup.tsx

@@ -40,8 +40,8 @@ export function NavigationGroup({
                 component={"h2"}
                 color="secondary"
                 className={cls(
-                    "p-4 py-2 rounded",
-                    "font-medium text-sm text-surface-600 dark:text-surface-400"
+                    "px-4 py-1 rounded",
+                    "font-semibold text-[11px] uppercase tracking-wider text-surface-400 dark:text-surface-400"
                 )}
             >
                 {currentGroupName}

package/src/components/RebaseAuthGate.tsx

@@ -27,6 +27,8 @@ export function RebaseAuthGate({ children }: { children: React.ReactNode }) {
     const registry = useRebaseRegistry();
     const authController = useAuthController();
 
+    console.log("[AuthGate] initialLoading:", authController?.initialLoading, "user:", authController?.user?.email ?? null);
+
     if (authController?.initialLoading) {
         return <CircularProgressCenter size={"large"}/>;
     }

package/src/components/RebaseCMS.tsx

@@ -10,7 +10,7 @@ import type { RebaseCMSConfig } from "@rebasepro/types";
  * is auto-wired as a native feature (slots, provider, Studio view) without
  * needing any external plugin.
  */
-export function RebaseCMS({ collections, homePage, entityViews, entityActions, plugins, collectionEditor }: RebaseCMSConfig) {
+export function RebaseCMS({ collections, homePage, entityViews, entityActions, plugins, collectionEditor, navigationGroupMappings }: RebaseCMSConfig) {
     const dispatch = useRebaseRegistryDispatch();
 
     useLayoutEffect(() => {
@@ -19,9 +19,10 @@ homePage,
 entityViews,
 entityActions,
 plugins,
-collectionEditor });
+collectionEditor,
+navigationGroupMappings });
         return () => dispatch.unregisterCMS();
-    }, [dispatch, collections, homePage, entityViews, entityActions, plugins, collectionEditor]);
+    }, [dispatch, collections, homePage, entityViews, entityActions, plugins, collectionEditor, navigationGroupMappings]);
 
     return null;
 }

package/src/components/RebaseNavigation.tsx

@@ -69,11 +69,14 @@ export function RebaseNavigation({ children }: RebaseNavigationProps) {
     const userConfigPersistence = useBuildLocalConfigurationPersistence();
 
     // ── Collection Editor resolution ──────────────────────────────────
+    // The collection editor is ALWAYS enabled when Studio is registered.
+    // The `collectionEditor` CMS config is for fine-tuning (readOnly, auth, etc.),
+    // not for opting-in. When omitted, the editor defaults to enabled
+    // (read-only in production).
     const collectionEditorConfig = registry.cmsConfig?.collectionEditor;
-    const collectionEditorEnabled = Boolean(collectionEditorConfig);
+    const collectionEditorEnabled = Boolean(collectionEditorConfig) || Boolean(registry.studioConfig);
     const collectionEditorOptions: CollectionEditorOptions | undefined = useMemo(() => {
-        if (!collectionEditorConfig) return undefined;
-        if (collectionEditorConfig === true) return {};
+        if (collectionEditorConfig === true || !collectionEditorConfig) return {};
         return collectionEditorConfig;
     }, [collectionEditorConfig]);
 
@@ -103,7 +106,7 @@ export function RebaseNavigation({ children }: RebaseNavigationProps) {
         rebaseClient,
         resolvedCollections,
         collectionEditorEnabled ? {
-            readOnly: collectionEditorOptions?.readOnly,
+            readOnly: collectionEditorOptions?.readOnly ?? process.env.NODE_ENV === "production",
             getAuthToken: collectionEditorOptions?.getAuthToken ?? authController?.getAuthToken
         } : { readOnly: true }
     );
@@ -117,7 +120,6 @@ export function RebaseNavigation({ children }: RebaseNavigationProps) {
         return {
             slug: "schema",
             name: "Edit collections",
-            group: "Database",
             icon: "LayoutList",
             nestedRoutes: true,
             view: (
@@ -138,6 +140,7 @@ export function RebaseNavigation({ children }: RebaseNavigationProps) {
         plugins: registry.cmsConfig?.plugins ?? EMPTY_PLUGINS,
         collections: collectionsBuilder,
         views: devViews,
+        navigationGroupMappings: registry.cmsConfig?.navigationGroupMappings,
         authController: context.authController!,
         data: context.data,
         collectionRegistryController,

package/src/components/ReferenceTable/EntitySelectionTable.tsx

@@ -72,7 +72,7 @@ export interface EntitySelectionProps<M extends Record<string, unknown>> {
     /**
      * Allow selection of entities that pass the given filter only.
      */
-    forceFilter?: FilterValues<string>;
+    fixedFilter?: FilterValues<string>;
 
     /**
      * Use this description to indicate the user what to do in this dialog.
@@ -100,7 +100,7 @@ export function EntitySelectionTable<M extends Record<string, unknown>>(
         path: pathInput,
         selectedEntityIds: selectedEntityIdsProp,
         description,
-        forceFilter,
+        fixedFilter,
         maxSelection
     }: EntitySelectionProps<M>) {
 
@@ -259,7 +259,7 @@ export function EntitySelectionTable<M extends Record<string, unknown>>(
         path,
         collection,
         entitiesDisplayedFirst,
-        forceFilter,
+        fixedFilter,
         updateUrl: false
     });
 
@@ -288,7 +288,7 @@ export function EntitySelectionTable<M extends Record<string, unknown>>(
                         </Typography>}
                         defaultSize={collection.defaultSize}
                         properties={collection.properties}
-                        forceFilter={forceFilter}
+                        fixedFilter={fixedFilter}
                         inlineEditing={false}
                         selectionController={selectionController}
                         actions={<EntitySelectionDialogActions

package/src/components/ReferenceWidget.tsx

@@ -27,7 +27,7 @@ export type ReferenceWidgetProps<M extends Record<string, unknown>> = {
     /**
      * Allow selection of entities that pass the given filter only.
      */
-    forceFilter?: FilterValues<string>;
+    fixedFilter?: FilterValues<string>;
     size: PreviewSize;
     className?: string;
     includeId?: boolean;
@@ -46,7 +46,7 @@ export function ReferenceWidget<M extends Record<string, unknown>>({
     onReferenceSelected,
     onMultipleReferenceSelected,
     previewProperties,
-    forceFilter,
+    fixedFilter,
     size,
     className,
     includeId,
@@ -89,7 +89,7 @@ export function ReferenceWidget<M extends Record<string, unknown>>({
         collection,
         onSingleEntitySelected,
         onMultipleEntitiesSelected,
-        forceFilter
+        fixedFilter
     }
     );
 

package/src/components/RelationSelector.tsx

@@ -37,7 +37,7 @@ export interface RelationSelectorProps {
     invisible?: boolean;
 
     relation: Relation;
-    forceFilter?: FilterValues<string>;
+    fixedFilter?: FilterValues<string>;
     pageSize?: number;
     emptyPlaceholder?: string;
     searchPlaceholder?: string;
@@ -60,7 +60,7 @@ export const RelationSelector = React.forwardRef<
             useChips = true,
             className,
             relation,
-            forceFilter,
+            fixedFilter,
             pageSize,
             emptyPlaceholder,
             searchPlaceholder = "Search...",
@@ -83,6 +83,10 @@ export const RelationSelector = React.forwardRef<
         // Track IDs that were set via local user interaction (onItemClick / handleClear / handleRemoveItem).
         // When an incoming value change matches these IDs exactly, we skip async re-resolution.
         const localSelectionIdsRef = useRef<string | null>(null);
+        // Snapshot of selected IDs captured when the popover opens.
+        // Used to sort the dropdown list so selected items appear at the top.
+        // Stays stable for the entire popover session so items don't jump around.
+        const pinnedIdsRef = useRef<Set<string> | null>(null);
 
         const {
             items: availableItems,
@@ -94,7 +98,7 @@ export const RelationSelector = React.forwardRef<
         } = useRelationSelector({
             path: collection.slug,
             collection,
-            forceFilter,
+            fixedFilter,
             pageSize
         });
 
@@ -323,6 +327,7 @@ relation } as RelationItem;
                 newSelected = [item];
                 setIsPopoverOpen(false);
                 isPopoverOpenRef.current = false;
+                pinnedIdsRef.current = null;
             }
             setSelectedItems(newSelected);
             // Mark this fingerprint so the resolution effect skips async work
@@ -348,11 +353,13 @@ relation } as RelationItem;
             if (disabled) return;
             // We control open manually; only allow opening attempts from Radix (e.g. trigger press)
             if (next) {
+                // Capture current selection so we can pin those items to the top of the list
+                pinnedIdsRef.current = new Set(selectedItems.map(i => String(i.id)));
                 setIsPopoverOpen(true);
                 isPopoverOpenRef.current = true;
             }
             // Ignore close attempts here; outside click/Escape handled manually; single select closes explicitly on selection.
-        }, [disabled]);
+        }, [disabled, selectedItems]);
 
         // Outside click + Escape handling (simple and reliable)
         useEffect(() => {
@@ -367,12 +374,14 @@ relation } as RelationItem;
                 // Outside
                 setIsPopoverOpen(false);
                 isPopoverOpenRef.current = false;
+                pinnedIdsRef.current = null;
             }
 
             function handleKey(ev: KeyboardEvent) {
                 if (ev.key === "Escape") {
                     setIsPopoverOpen(false);
                     isPopoverOpenRef.current = false;
+                    pinnedIdsRef.current = null;
                 }
             }
 
@@ -389,6 +398,7 @@ relation } as RelationItem;
         const closePopover = useCallback(() => {
             setIsPopoverOpen(false);
             isPopoverOpenRef.current = false;
+            pinnedIdsRef.current = null;
         }, []);
 
         const resolvedPlaceholder = placeholder || emptyPlaceholder || <EmptyValue className={"ml-2"}/>;
@@ -412,6 +422,11 @@ relation } as RelationItem;
                                 setIsPopoverOpen(o => {
                                     const next = !o;
                                     isPopoverOpenRef.current = next;
+                                    if (next) {
+                                        pinnedIdsRef.current = new Set(selectedItems.map(i => String(i.id)));
+                                    } else {
+                                        pinnedIdsRef.current = null;
+                                    }
                                     return next;
                                 });
                             }}
@@ -589,7 +604,20 @@ relation } as RelationItem;
                                         </CommandPrimitive.Empty>
                                     )}
                                     <CommandPrimitive.Group>
-                                        {availableItems.map((item) => {
+                                        {(() => {
+                                            // Sort items so that initially-selected (pinned) items appear first.
+                                            // We use the snapshot taken when the popover opened so items don't
+                                            // jump around as the user checks/unchecks.
+                                            const pinned = pinnedIdsRef.current;
+                                            const sortedItems = pinned && pinned.size > 0
+                                                ? [...availableItems].sort((a, b) => {
+                                                    const aP = pinned.has(String(a.id)) ? 0 : 1;
+                                                    const bP = pinned.has(String(b.id)) ? 0 : 1;
+                                                    return aP - bP;
+                                                })
+                                                : availableItems;
+                                            return sortedItems;
+                                        })().map((item) => {
                                             const isSelected = selectedItems.some(v => String(v.id) === String(item.id));
                                             return (
                                                 <CommandPrimitive.Item

package/src/components/SelectableTable/SelectableTable.tsx

@@ -66,7 +66,7 @@ export type SelectableTableProps<M extends Record<string, unknown>> = {
 
     inlineEditing?: boolean;
 
-    forceFilter?: FilterValues<keyof M extends string ? keyof M : never>;
+    fixedFilter?: FilterValues<keyof M extends string ? keyof M : never>;
 
     highlightedRow?: (data: Entity<M>) => boolean;
 
@@ -158,7 +158,7 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
         initialScroll,
         emptyComponent,
         columns,
-        forceFilter,
+        fixedFilter,
         highlightedRow,
         endAdornment,
         AddColumnComponent,
@@ -225,8 +225,8 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
 
     const onFilterUpdate = useCallback((updatedFilterValues?: FilterValues<any>) => {
         setFilterValues?.({ ...updatedFilterValues,
-...forceFilter } as FilterValues<any>);
-    }, [forceFilter]);
+...fixedFilter } as FilterValues<any>);
+    }, [fixedFilter]);
 
     const contextValue = useMemo(() => ({
         setPopupCell: setPopupCell as ((cell?: SelectedCellProps<M>) => void),
@@ -264,7 +264,7 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
                     checkFilterCombination={checkFilterCombination}
                     createFilterField={filterable ? createFilterField : undefined}
                     rowClassName={useCallback((entity: Entity<M>) => {
-                        return highlightedRow?.(entity) ? "bg-surface-50/75 bg-surface-100/75 dark:!bg-surface-800/60" : "";
+                        return highlightedRow?.(entity) ? "bg-surface-accent-50 dark:!bg-surface-accent-950" : "";
                     }, [highlightedRow])}
                     className="grow"
                     emptyComponent={emptyComponent}
@@ -312,7 +312,7 @@ function createFilterField({
             path={baseProperty.path}
             title={resolvedProperty?.name}
             includeId={baseProperty.includeId}
-            previewProperties={baseProperty?.previewProperties}
+            previewProperties={baseProperty?.ui?.previewProperties}
             hidden={hidden}
             setHidden={setHidden}/>;
     } else if (baseProperty.type === "relation" && baseProperty.relation) {

package/src/components/UserSelector.tsx

@@ -42,7 +42,7 @@ export const UserSelector = React.forwardRef<
             clearable = true,
             className,
             pageSize,
-            searchPlaceholder = "SearchIcon users...",
+            searchPlaceholder = "Search users...",
             noResultsText = "No users found.",
             loadingText = "Loading..."
         },

package/src/components/admin/RolesView.tsx

@@ -13,7 +13,7 @@ import { ConfirmationDialog } from "@rebasepro/core";
 // RolesView Component
 // ============================================
 export function RolesView({ userManagement }: { userManagement: UserManagementDelegate }) {
-    const { roles, saveRole, deleteRole, loading, allowDefaultRolesCreation } = userManagement;
+    const { roles, saveRole, deleteRole, loading, allowDefaultRolesCreation, rolesError } = userManagement;
     const snackbarController = useSnackbarController();
     const { t } = useTranslation();
     const breadcrumbs = useBreadcrumbsController();
@@ -139,9 +139,16 @@ isAdmin: false }
                                 <TableCell colspan={3}>
                                     <CenteredView className="flex flex-col gap-4 my-8 items-center">
                                          <Typography variant="label">
-                                            {t("no_roles_yet")}
+                                            {rolesError
+                                                ? t("no_permission_to_view_roles")
+                                                : t("no_roles_yet")}
                                         </Typography>
-                                        {allowDefaultRolesCreation && saveRole && (
+                                        {rolesError && (
+                                            <Typography variant="caption" color="secondary">
+                                                {t("no_permission_description")}
+                                            </Typography>
+                                        )}
+                                        {!rolesError && allowDefaultRolesCreation && saveRole && (
                                             <Button onClick={createDefaultRoles}>
                                                 {t("create_default_roles")}
                                             </Button>

package/src/components/admin/UsersView.tsx

@@ -7,7 +7,7 @@ import { Button, Container, Dialog, DialogActions, DialogContent, DialogTitle, I
 import { MailIcon, KeyRoundIcon, PlusIcon, Trash2Icon, CopyIcon, CheckCircleIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { RoleChip } from "./RoleChip";
 import { UserManagementDelegate, Role, UserCreationResult } from "@rebasepro/types";
-import { ConfirmationDialog } from "@rebasepro/core";
+import { ConfirmationDialog, BootstrapAdminBanner } from "@rebasepro/core";
 
 const PAGE_SIZE = 25;
 
@@ -17,7 +17,7 @@ const PAGE_SIZE = 25;
 export function UsersView({ userManagement }: {
     userManagement: UserManagementDelegate;
 }) {
-    const { roles, saveUser, createUser, deleteUser, resetPassword, loading: delegateLoading, bootstrapAdmin } = userManagement;
+    const { roles, saveUser, createUser, deleteUser, resetPassword, loading: delegateLoading, bootstrapAdmin, usersError } = userManagement;
     const snackbarController = useSnackbarController();
     const { user: loggedInUser } = useAuthController();
     const { t } = useTranslation();
@@ -247,28 +247,9 @@ message: error instanceof Error ? error.message : t("error_resetting_password")
         }
     };
 
-    if (delegateLoading) {
-        return <CenteredView><CircularProgress/></CenteredView>;
-    }
-
     return (
         <Container className="w-full flex flex-col py-4 gap-4" maxWidth={"6xl"}>
-            {/* Bootstrap warning when no admins */}
-            {!hasAdmin && loggedInUser && bootstrapAdmin && (
-                <div className="bg-yellow-100 dark:bg-yellow-900 border border-yellow-400 dark:border-yellow-700 rounded p-4 flex items-center justify-between">
-                    <div>
-                        <Typography variant="label" className="text-yellow-800 dark:text-yellow-200">
-                            {t("no_users_or_roles_defined")}
-                        </Typography>
-                    </div>
-                    <Button
-                        onClick={handleBootstrap}
-                        disabled={bootstrapping}
-                    >
-                        {bootstrapping ? <CircularProgress size="small"/> : t("add_logged_user_as_admin")}
-                    </Button>
-                </div>
-            )}
+            <BootstrapAdminBanner className="mb-4" />
 
             <div className="flex items-center mt-12 mb-4 gap-4">
                 <Typography gutterBottom variant="h4" className="grow mb-0" component="h4">
@@ -310,7 +291,7 @@ message: error instanceof Error ? error.message : t("error_resetting_password")
                         <TableCell header className="w-24 text-right">{t("actions")}</TableCell>
                     </TableHeader>
                     <TableBody>
-                        {tableLoading ? (
+                        {(tableLoading || delegateLoading) ? (
                             [
                                 { email: "w-48",
 name: "w-32",
@@ -394,13 +375,20 @@ roles: ["w-16", "w-16"] }
                             </TableRow>
                         )))}
 
-                        {displayUsers.length === 0 && !tableLoading && (
+                        {displayUsers.length === 0 && !tableLoading && !delegateLoading && (
                             <TableRow>
                                 <TableCell colspan={5}>
                                     <CenteredView className="flex flex-col gap-4 my-8 items-center">
                                         <Typography variant="label">
-                                            {searchQuery ? t("no_users_found") : t("no_users_yet")}
+                                            {usersError
+                                                ? t("no_permission_to_view_users")
+                                                : searchQuery ? t("no_users_found") : t("no_users_yet")}
                                         </Typography>
+                                        {usersError && (
+                                            <Typography variant="caption" color="secondary">
+                                                {t("no_permission_description")}
+                                            </Typography>
+                                        )}
                                     </CenteredView>
                                 </TableCell>
                             </TableRow>

package/src/components/app/Scaffold.tsx

@@ -137,7 +137,7 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
                         {hasAppBar && <DrawerHeader/>}
 
                         <div
-                            className={cls(defaultBorderMixin, "bg-white dark:bg-surface-800", "grow overflow-auto m-0", {
+                            className={cls(defaultBorderMixin, "bg-surface-50 dark:bg-surface-800", "grow overflow-auto m-0", {
                                 "lg:mt-4": !hasAppBar,
                                 "mt-1 lg:m-0 lg:mx-2 lg:mb-2 lg:rounded-lg lg:border-t lg:border-x lg:border-solid": padding,
                                 "border-t": hasAppBar && !padding
@@ -158,7 +158,7 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
 
 const DrawerHeader = () => {
     return (
-        <div className="flex flex-col min-h-16"></div>
+        <div className="flex flex-col min-h-14"></div>
     );
 };
 
@@ -184,8 +184,8 @@ function DrawerWrapper(props: {
     const { t } = useTranslation();
 
     const innerDrawer = <div
-        className={cls("h-full no-scrollbar overflow-y-auto overflow-x-clip", defaultBorderMixin,
-            isFloating ? `absolute top-0 left-0 bottom-0 z-50 bg-surface-50 ${darkBgFloating} shadow-2xl border-r` : `relative bg-surface-50 ${darkBg}`)}
+        className={cls("h-full overflow-hidden", defaultBorderMixin,
+            isFloating ? `absolute top-0 left-0 bottom-0 z-50 bg-surface-50 ${darkBgFloating} shadow-lg border-r` : `relative bg-surface-50 ${darkBg}`)}
         style={{
             width: visualWidth,
             transition: "left 75ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 75ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 75ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"