betterstart-cli 0.0.110 → 0.0.111

package/dist/assets/adapters/next/templates/init/components/shared/dev-mode-integrate.tsx

@@ -49,9 +49,9 @@ export function DevModeIntegrateButton({
     <Drawer swipeDirection="right" onOpenChange={handleOpenChange}>
       <DrawerTrigger render={<Button type="button" variant="outline" />}>
         <Code2 />
-        <span className="hidden sm:inline">Dev Mode</span>
+        <span className="inline">Dev Mode</span>
       </DrawerTrigger>
-      <DrawerContent className="w-full overflow-hidden data-[swipe-direction=right]:sm:max-w-2xl data-[swipe-direction=right]:lg:max-w-4xl">
+      <DrawerContent className="w-full overflow-hidden data-[swipe-direction=right]:max-w-4xl">
         <DrawerHeader className="pb-4">
           <DrawerTitle>{integration.schemaLabel}</DrawerTitle>
           <DrawerDescription>

package/dist/assets/adapters/next/templates/init/components/shared/entity-filters-bar.tsx

@@ -64,7 +64,7 @@ export function EntityFiltersBar({
   return (
     <div
       className={cn(
-        'sticky top-14 z-10 flex h-16 gap-1 overflow-x-clip bg-background px-4 transition-shadow xl:flex-row xl:items-center xl:justify-between',
+        'sticky top-14 z-10 flex h-16 flex-row items-center justify-between gap-1 overflow-x-clip bg-background px-4 transition-shadow',
         {
           'shadow-modal/3': hasScrolled
         }

package/dist/assets/adapters/next/templates/init/components/shared/entity-versions/entity-versions-drawer.tsx

@@ -43,7 +43,7 @@ export function EntityVersionsDrawer({
 }: EntityVersionsDrawerProps) {
   return (
     <Drawer swipeDirection="right" open={open} onOpenChange={onOpenChange} modal>
-      <DrawerContent className="h-full sm:max-w-lg">
+      <DrawerContent className="h-full max-w-lg">
         <DrawerHeader>
           <DrawerTitle>Versions</DrawerTitle>
           <DrawerDescription>

package/dist/assets/adapters/next/templates/init/components/shared/media/media-filters-bar.tsx

@@ -48,7 +48,7 @@ export function MediaFiltersBar({
   return (
     <div
       className={cn(
-        'sticky top-14 z-9 flex h-16 flex-col gap-1 overflow-clip bg-background px-4 transition-shadow xl:flex-row xl:items-center xl:justify-between',
+        'sticky top-14 z-9 flex h-16 flex-row items-center justify-between gap-1 overflow-clip bg-background px-4 transition-shadow',
         {
           'shadow-modal/3': hasScrolled
         }
@@ -81,7 +81,7 @@ export function MediaFiltersBar({
         </ButtonGroup>
       </div>
 
-      <div className="flex items-center gap-1 self-end xl:self-auto">
+      <div className="flex items-center gap-1 self-auto">
         {actions}
 
         {selection.isSelectMode ? (

package/dist/assets/adapters/next/templates/init/components/shared/media/media-gallery-dialog.tsx

@@ -99,7 +99,7 @@ export function MediaGalleryDialog({
         onOpenChange(next)
       }}
     >
-      <DialogContent className="flex h-[80svh] max-h-[700px] min-h-0 flex-col gap-0 overflow-hidden sm:max-w-3xl">
+      <DialogContent className="flex h-[80svh] max-h-[700px] min-h-0 max-w-3xl flex-col gap-0 overflow-hidden">
         <DialogHeader>
           <DialogTitle>Select file</DialogTitle>
           <DialogDescription>

package/dist/assets/adapters/next/templates/init/components/shared/media/media-preview.tsx

@@ -26,7 +26,7 @@ export function MediaPreview({ media, isFilled = false, showMetadata = false }:
             'object-contain': !isFilled
           })}
           fill
-          sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 200px"
+          sizes="200px"
           unoptimized
           loading="lazy"
           decoding="async"

package/dist/assets/adapters/next/templates/init/hooks/content-editor/use-color-highlight.ts

@@ -2,7 +2,6 @@
 
 import type { ContentEditorHighlightColorOption } from '@admin/utils/editor/content-editor-highlight-color-option'
 import type { Editor } from '@tiptap/react'
-import { useIsBreakpoint } from '@admin/hooks/content-editor/use-is-breakpoint'
 import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
 import { CONTENT_EDITOR_HIGHLIGHT_COLOR_OPTIONS } from '@admin/utils/editor/content-editor-highlight-color-options'
 import { CONTENT_EDITOR_HIGHLIGHT_COLORS } from '@admin/utils/editor/content-editor-highlight-colors'
@@ -152,7 +151,6 @@ export function useColorHighlight(config: UseColorHighlightConfig) {
   } = config
 
   const { editor } = useTiptapEditor(providedEditor)
-  const isMobile = useIsBreakpoint()
   const [isVisible, setIsVisible] = useState<boolean>(true)
   const canColorHighlightState = canColorHighlight(editor, mode)
   const actualColor = highlightColor
@@ -222,7 +220,7 @@ export function useColorHighlight(config: UseColorHighlightConfig) {
     },
     {
       enabled: isVisible && canColorHighlightState,
-      enableOnContentEditable: !isMobile,
+      enableOnContentEditable: true,
       enableOnFormTags: true
     }
   )

package/dist/assets/adapters/next/templates/init/hooks/content-editor/use-content-editor-media-insertion.ts

@@ -2,7 +2,6 @@
 
 import * as React from 'react'
 import type { Editor } from '@tiptap/react'
-import { useIsBreakpoint } from '@admin/hooks/content-editor/use-is-breakpoint'
 import { useTiptapEditor } from '@admin/hooks/content-editor/use-tiptap-editor'
 import { canInsertContentEditorMediaPlaceholder } from '@admin/utils/editor/can-insert-content-editor-media-placeholder'
 import { CONTENT_EDITOR_MEDIA_SHORTCUT_KEY } from '@admin/utils/editor/content-editor-media-shortcut-key'
@@ -20,7 +19,6 @@ export function useContentEditorMediaInsertion({
   onInserted
 }: UseContentEditorMediaInsertionOptions = {}) {
   const { editor } = useTiptapEditor(providedEditor)
-  const isMobile = useIsBreakpoint()
   const canInsert = canInsertContentEditorMediaPlaceholder(editor)
   const isActive = isContentEditorMediaPlaceholderActive(editor)
   const isVisible = Boolean(editor?.isEditable)
@@ -41,7 +39,7 @@ export function useContentEditorMediaInsertion({
     },
     {
       enabled: isVisible && canInsert,
-      enableOnContentEditable: !isMobile,
+      enableOnContentEditable: true,
       enableOnFormTags: true
     }
   )

package/dist/assets/adapters/next/templates/init/hooks/content-editor/use-content-editor.ts

@@ -42,7 +42,6 @@ export interface UseContentEditorOptions {
   placeholder?: string
   disabled: boolean
   defaultMode: ContentEditorMode
-  onModeToggle?: () => void
 }
 
 export function useContentEditor({
@@ -50,8 +49,7 @@ export function useContentEditor({
   onChange,
   placeholder,
   disabled,
-  defaultMode,
-  onModeToggle
+  defaultMode
 }: UseContentEditorOptions) {
   const [mode, setMode] = React.useState<ContentEditorMode>(defaultMode)
   const [sourceSelectionRequest, setSourceSelectionRequest] =
@@ -257,8 +255,6 @@ export function useContentEditor({
   )
 
   const handleModeChange = React.useCallback(() => {
-    onModeToggle?.()
-
     if (mode === 'source') {
       pendingRichSelectionOffsetRef.current = sourceSelectionRef.current
       setMode('rich')
@@ -282,7 +278,7 @@ export function useContentEditor({
     }
 
     setMode('source')
-  }, [editor, mode, onModeToggle])
+  }, [editor, mode])
 
   return {
     activeSlashIndex,

package/dist/assets/adapters/next/templates/init/pages/account-shell.tsx

@@ -22,7 +22,7 @@ export async function AccountShell({ children }: { children: React.ReactNode })
   return (
     <SidebarProvider className="min-h-svh">
       <AdminSidebar />
-      <div className="relative flex min-w-0 flex-1 flex-col [--admin-shell-content-left:0px] md:[--admin-shell-content-left:var(--sidebar-width)] md:peer-data-[state=collapsed]:[--admin-shell-content-left:var(--sidebar-width-icon)]">
+      <div className="relative flex min-w-0 flex-1 flex-col [--admin-shell-content-left:var(--sidebar-width)] peer-data-[state=collapsed]:[--admin-shell-content-left:var(--sidebar-width-icon)]">
         {children}
       </div>
     </SidebarProvider>

package/dist/assets/adapters/next/templates/init/pages/auth-gate.tsx

@@ -8,7 +8,7 @@ export async function AuthGate({ children }: { children: React.ReactNode }) {
   return (
     <SidebarProvider className="min-h-svh">
       <AdminSidebar />
-      <div className="relative flex min-w-0 flex-1 flex-col pb-14 [--admin-shell-content-left:0px] md:[--admin-shell-content-left:var(--sidebar-width)] md:peer-data-[state=collapsed]:[--admin-shell-content-left:var(--sidebar-width-icon)]">
+      <div className="relative flex min-w-0 flex-1 flex-col pb-14 [--admin-shell-content-left:var(--sidebar-width)] peer-data-[state=collapsed]:[--admin-shell-content-left:var(--sidebar-width-icon)]">
         {children}
       </div>
     </SidebarProvider>

package/dist/assets/adapters/next/templates/init/pages/forgot-password-form.tsx

@@ -66,17 +66,17 @@ export function ForgotPasswordForm({ className, ...props }: React.ComponentProps
   return (
     <div className={cn('flex flex-col gap-6', className)} {...props}>
       <Card className="overflow-hidden p-0">
-        <CardContent className="grid p-0 md:grid-cols-[5fr_7fr]">
-          <div className="relative hidden bg-muted md:block">
+        <CardContent className="grid grid-cols-[5fr_7fr] p-0">
+          <div className="relative block bg-muted">
             <Image
               src="https://assets.betterstart.dev/assets/placeholder.png"
               alt=""
               fill
-              sizes="(min-width: 768px) 42vw, 0px"
+              sizes="42vw"
               className="object-cover"
             />
           </div>
-          <div className="p-6 md:p-20">
+          <div className="p-20">
             <Form {...form}>
               <form
                 autoComplete="off"

package/dist/assets/adapters/next/templates/init/pages/forgot-password-page-skeleton.tsx

@@ -1,9 +1,9 @@
 export function ForgotPasswordPageSkeleton() {
   return (
     <div className="overflow-hidden rounded-sm border bg-card">
-      <div className="grid md:grid-cols-[5fr_7fr]">
-        <div className="hidden min-h-[460px] bg-muted md:block" />
-        <div className="flex min-h-[460px] flex-col gap-10 p-6 md:p-20">
+      <div className="grid grid-cols-[5fr_7fr]">
+        <div className="block min-h-[460px] bg-muted" />
+        <div className="flex min-h-[460px] flex-col gap-10 p-20">
           <div className="space-y-3">
             <div className="h-6 w-40 animate-pulse rounded-md bg-muted" />
             <div className="h-4 w-full max-w-72 animate-pulse rounded-md bg-muted" />

package/dist/assets/adapters/next/templates/init/pages/forgot-password-page.tsx

@@ -10,8 +10,8 @@ export const metadata: Metadata = {
 
 export default function ForgotPasswordPage() {
   return (
-    <div className="flex min-h-svh flex-col items-center justify-center bg-background p-6 md:p-10">
-      <div className="w-full max-w-sm md:max-w-4xl">
+    <div className="flex min-h-svh flex-col items-center justify-center bg-background p-10">
+      <div className="w-full max-w-4xl">
         <Suspense fallback={<ForgotPasswordPageSkeleton />}>
           <ForgotPasswordForm />
         </Suspense>

package/dist/assets/adapters/next/templates/init/pages/login-form.tsx

@@ -81,13 +81,13 @@ export function LoginForm({ className, ...props }: React.ComponentProps<'div'>)
   return (
     <div className={cn('flex flex-col gap-6', className)} {...props}>
       <Card className="overflow-hidden p-0">
-        <CardContent className="grid p-0 md:grid-cols-[5fr_7fr]">
-          <div className="relative hidden bg-muted md:block">
+        <CardContent className="grid grid-cols-[5fr_7fr] p-0">
+          <div className="relative block bg-muted">
             <Image
               src="https://assets.betterstart.dev/assets/placeholder.png"
               alt=""
               fill
-              sizes="(min-width: 768px) 42vw, 0px"
+              sizes="42vw"
               className="object-cover"
             />
           </div>
@@ -96,7 +96,7 @@ export function LoginForm({ className, ...props }: React.ComponentProps<'div'>)
               autoComplete="off"
               noValidate
               onSubmit={form.handleSubmit(handleSubmit, handleInvalid)}
-              className="p-6 md:p-20"
+              className="p-20"
             >
               <FieldGroup className="gap-10 pb-12">
                 <div className="flex flex-col items-start">

package/dist/assets/adapters/next/templates/init/pages/login-page-skeleton.tsx

@@ -1,9 +1,9 @@
 export function LoginPageSkeleton() {
   return (
     <div className="overflow-hidden rounded-sm border bg-card">
-      <div className="grid md:grid-cols-[5fr_7fr]">
-        <div className="hidden min-h-[540px] bg-muted md:block" />
-        <div className="flex min-h-[540px] flex-col gap-10 p-6 md:p-20">
+      <div className="grid grid-cols-[5fr_7fr]">
+        <div className="block min-h-[540px] bg-muted" />
+        <div className="flex min-h-[540px] flex-col gap-10 p-20">
           <div className="space-y-3">
             <div className="h-6 w-32 animate-pulse rounded-md bg-muted" />
             <div className="h-4 w-40 animate-pulse rounded-md bg-muted" />

package/dist/assets/adapters/next/templates/init/pages/login-page.tsx

@@ -10,8 +10,8 @@ export const metadata: Metadata = {
 
 export default function LoginPage() {
   return (
-    <div className="flex min-h-svh flex-col items-center justify-center bg-background p-6 md:p-10">
-      <div className="w-full max-w-sm md:max-w-4xl">
+    <div className="flex min-h-svh flex-col items-center justify-center bg-background p-10">
+      <div className="w-full max-w-4xl">
         <Suspense fallback={<LoginPageSkeleton />}>
           <LoginPageContent />
         </Suspense>

package/dist/assets/adapters/next/templates/init/pages/media/media-page-content.tsx

@@ -238,7 +238,7 @@ export function MediaPageContent() {
               selectedIds={selected}
               isSelectMode={isSelectMode}
               onItemClick={handleItemClick}
-              className="px-px pt-px pb-12 lg:grid-cols-12"
+              className="grid-cols-12 px-px pt-px pb-12"
             />
             {total > DEFAULT_MEDIA_PAGE_SIZE ? (
               <MediaGridPagination

package/dist/assets/adapters/next/templates/init/pages/reset-password-form.tsx

@@ -53,17 +53,17 @@ export function ResetPasswordForm({ className, ...props }: React.ComponentProps<
     return (
       <div className={cn('flex flex-col gap-6', className)} {...props}>
         <Card className="overflow-hidden p-0">
-          <CardContent className="grid p-0 md:grid-cols-[5fr_7fr]">
-            <div className="relative hidden bg-muted md:block">
+          <CardContent className="grid grid-cols-[5fr_7fr] p-0">
+            <div className="relative block bg-muted">
               <Image
                 src="https://assets.betterstart.dev/assets/placeholder.png"
                 alt=""
                 fill
-                sizes="(min-width: 768px) 42vw, 0px"
+                sizes="42vw"
                 className="object-cover"
               />
             </div>
-            <div className="p-6 md:p-20">
+            <div className="p-20">
               <FieldGroup className="gap-10 pb-12">
                 <div className="flex flex-col items-start">
                   <h1 className="text-xl font-medium">Invalid reset link</h1>
@@ -112,13 +112,13 @@ export function ResetPasswordForm({ className, ...props }: React.ComponentProps<
   return (
     <div className={cn('flex flex-col gap-6', className)} {...props}>
       <Card className="overflow-hidden p-0">
-        <CardContent className="grid p-0 md:grid-cols-[5fr_7fr]">
-          <div className="relative hidden bg-muted md:block">
+        <CardContent className="grid grid-cols-[5fr_7fr] p-0">
+          <div className="relative block bg-muted">
             <Image
               src="https://assets.betterstart.dev/assets/placeholder.png"
               alt=""
               fill
-              sizes="(min-width: 768px) 42vw, 0px"
+              sizes="42vw"
               className="object-cover"
             />
           </div>
@@ -127,7 +127,7 @@ export function ResetPasswordForm({ className, ...props }: React.ComponentProps<
               autoComplete="off"
               noValidate
               onSubmit={form.handleSubmit(handleSubmit, handleInvalid)}
-              className="p-6 md:p-20"
+              className="p-20"
             >
               <FieldGroup className="gap-10 pb-12">
                 <div className="flex flex-col items-start">

package/dist/assets/adapters/next/templates/init/pages/reset-password-page-skeleton.tsx

@@ -1,9 +1,9 @@
 export function ResetPasswordPageSkeleton() {
   return (
     <div className="overflow-hidden rounded-sm border bg-card">
-      <div className="grid md:grid-cols-[5fr_7fr]">
-        <div className="hidden min-h-[520px] bg-muted md:block" />
-        <div className="flex min-h-[520px] flex-col gap-10 p-6 md:p-20">
+      <div className="grid grid-cols-[5fr_7fr]">
+        <div className="block min-h-[520px] bg-muted" />
+        <div className="flex min-h-[520px] flex-col gap-10 p-20">
           <div className="space-y-3">
             <div className="h-6 w-36 animate-pulse rounded-md bg-muted" />
             <div className="h-4 w-56 animate-pulse rounded-md bg-muted" />

package/dist/assets/adapters/next/templates/init/pages/reset-password-page.tsx

@@ -10,8 +10,8 @@ export const metadata: Metadata = {
 
 export default function ResetPasswordPage() {
   return (
-    <div className="flex min-h-svh flex-col items-center justify-center bg-background p-6 md:p-10">
-      <div className="w-full max-w-sm md:max-w-4xl">
+    <div className="flex min-h-svh flex-col items-center justify-center bg-background p-10">
+      <div className="w-full max-w-4xl">
         <Suspense fallback={<ResetPasswordPageSkeleton />}>
           <ResetPasswordForm />
         </Suspense>

package/dist/assets/adapters/next/templates/init/pages/settings/audit-log/audit-log-detail-drawer.tsx

@@ -37,7 +37,7 @@ function formatMetadata(metadata: Record<string, unknown> | null): string {
 export function AuditLogDetailDrawer({ auditLog, open, onOpenChange }: AuditLogDetailDrawerProps) {
   return (
     <Drawer swipeDirection="right" open={open} onOpenChange={onOpenChange} modal>
-      <DrawerContent className="h-full sm:max-w-xl">
+      <DrawerContent className="h-full max-w-xl">
         <DrawerHeader>
           <DrawerTitle>Audit Event</DrawerTitle>
           <DrawerDescription>

package/dist/assets/adapters/next/templates/init/pages/settings/audit-log/audit-log-page.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { UserRole } from '@admin/auth/middleware'
 import { RoleGate } from '@admin/components/layouts/role-gate'
+import { UserRole } from '@admin/types/auth'
 import { AuditLogPageContent } from './audit-log-page-content'
 import { AuditLogPageSkeleton } from './audit-log-page-skeleton'
 

package/dist/assets/adapters/next/templates/init/pages/settings/forms/form-notifications-drawer.tsx

@@ -83,7 +83,7 @@ export function FormNotificationsDrawer({
 
   return (
     <Drawer swipeDirection="right" open={open} onOpenChange={onOpenChange} modal>
-      <DrawerContent className="h-full sm:max-w-xl">
+      <DrawerContent className="h-full max-w-xl">
         <Form {...form}>
           <form
             autoComplete="off"

package/dist/assets/adapters/next/templates/init/pages/settings/forms/forms-settings-page.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { UserRole } from '@admin/auth/middleware'
 import { RoleGate } from '@admin/components/layouts/role-gate'
+import { UserRole } from '@admin/types/auth'
 import { FormsSettingsPageContent } from './forms-settings-page-content'
 import { FormsSettingsPageSkeleton } from './forms-settings-page-skeleton'
 

package/dist/assets/adapters/next/templates/init/pages/settings/webhooks/delete-webhook-dialog.tsx

@@ -53,7 +53,7 @@ export function DeleteWebhookDialog({ webhook, open, onOpenChange }: DeleteWebho
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-105">
+      <DialogContent className="max-w-105">
         <DialogHeader>
           <DialogTitle>Delete webhook?</DialogTitle>
           <DialogDescription>

package/dist/assets/adapters/next/templates/init/pages/settings/webhooks/webhook-endpoint-dialog.tsx

@@ -194,7 +194,7 @@ export function WebhookEndpointDialog({ webhook, open, onOpenChange }: WebhookEn
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-135">
+      <DialogContent className="max-w-135">
         <Form {...form}>
           <form
             autoComplete="off"

package/dist/assets/adapters/next/templates/init/pages/settings/webhooks/webhooks-logs-page.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { UserRole } from '@admin/auth/middleware'
 import { RoleGate } from '@admin/components/layouts/role-gate'
+import { UserRole } from '@admin/types/auth'
 import { WebhooksLogsPageContent } from '../webhooks-logs-page-content'
 import { WebhooksPageSkeleton } from '../webhooks-page-skeleton'
 

package/dist/assets/adapters/next/templates/init/pages/settings/webhooks/webhooks-page.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { UserRole } from '@admin/auth/middleware'
 import { RoleGate } from '@admin/components/layouts/role-gate'
+import { UserRole } from '@admin/types/auth'
 import { WebhooksPageContent } from './webhooks-page-content'
 import { WebhooksPageSkeleton } from './webhooks-page-skeleton'
 

package/dist/assets/adapters/next/templates/init/pages/users/change-password-dialog.tsx

@@ -142,7 +142,7 @@ export function ChangePasswordDialog({
         <KeySquare className="size-4" />
         Change password
       </DialogTrigger>
-      <DialogContent className="sm:max-w-135">
+      <DialogContent className="max-w-135">
         <Form {...form}>
           <form
             autoComplete="off"

package/dist/assets/adapters/next/templates/init/pages/users/create-user-dialog.tsx

@@ -109,7 +109,7 @@ export function CreateUserDialog() {
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger render={<Button />}>Create User</DialogTrigger>
-      <DialogContent className="sm:max-w-135">
+      <DialogContent className="max-w-135">
         <Form {...form}>
           <form
             autoComplete="off"

package/dist/assets/adapters/next/templates/init/pages/users/edit-role-dialog.tsx

@@ -80,7 +80,7 @@ export function EditRoleDialog({ userId, currentRole, userName, children }: Edit
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger render={children as React.ReactElement} />
-      <DialogContent className="sm:max-w-87.5">
+      <DialogContent className="max-w-87.5">
         <Form {...form}>
           <form autoComplete="off" onSubmit={form.handleSubmit(handleSave)}>
             <DialogHeader>

package/dist/assets/shared-assets/react-admin/custom/content-editor/index.tsx

@@ -3,14 +3,12 @@
 import type { ContentEditorMode } from '@admin/utils/editor/content-editor-mode'
 import { Card, CardContent } from '@admin/components/ui/card'
 import { useContentEditor } from '@admin/hooks/content-editor/use-content-editor'
-import { useContentEditorMobileToolbar } from '@admin/hooks/content-editor/use-content-editor-mobile-toolbar'
 import { useContentEditorTableAddControls } from '@admin/hooks/content-editor/use-content-editor-table-add-controls'
 import { cn } from '@admin/utils/shared/cn'
 import { EditorContent, EditorContext } from '@tiptap/react'
 import { EditorToolbar } from './editor-toolbar'
 import { MainToolbarContent } from './main-toolbar-content'
 import { MathBubbleMenu } from './math-popover'
-import { MobileToolbarContent } from './mobile-toolbar-content'
 import { ModeToggleButton } from './mode-toggle-button'
 import { SelectionBubbleMenu } from './selection-bubble-menu'
 import { SlashCommandMenu } from './slash-command-menu'
@@ -35,8 +33,6 @@ export function ContentEditor({
   className,
   defaultMode
 }: ContentEditorProps) {
-  const { isMobile, mobileView, setMobileView } = useContentEditorMobileToolbar()
-
   const {
     activeSlashIndex,
     closeSlashMenu,
@@ -58,8 +54,7 @@ export function ContentEditor({
     onChange,
     placeholder,
     disabled,
-    defaultMode,
-    onModeToggle: () => setMobileView('main')
+    defaultMode
   })
 
   const isSourceMode = mode === 'source'
@@ -93,33 +88,13 @@ export function ContentEditor({
           ) : (
             <>
               <EditorToolbar ariaLabel="Content editor toolbar" className="shrink-0">
-                {mobileView === 'main' ? (
-                  <MainToolbarContent
-                    onHighlighterClick={() => setMobileView('highlighter')}
-                    onLinkClick={() => setMobileView('link')}
-                    onMathClick={() => setMobileView('math')}
-                    onModeChange={handleModeChange}
-                    isMobile={isMobile}
-                    editor={editor}
-                  />
-                ) : (
-                  <MobileToolbarContent
-                    type={
-                      mobileView === 'highlighter'
-                        ? 'highlighter'
-                        : mobileView === 'math'
-                          ? 'math'
-                          : 'link'
-                    }
-                    onBack={() => setMobileView('main')}
-                  />
-                )}
+                <MainToolbarContent onModeChange={handleModeChange} editor={editor} />
               </EditorToolbar>
 
               <div className="relative flex min-h-0 flex-1 flex-col overflow-hidden">
-                {!isMobile && <SelectionBubbleMenu editor={editor} />}
-                {!isMobile && <MathBubbleMenu editor={editor} />}
-                {!isMobile && <TableBubbleMenu editor={editor} />}
+                <SelectionBubbleMenu editor={editor} />
+                <MathBubbleMenu editor={editor} />
+                <TableBubbleMenu editor={editor} />
                 <TableAddControls controls={tableAddControls} />
 
                 <SlashCommandMenu

package/dist/assets/shared-assets/react-admin/custom/content-editor/main-toolbar-content.tsx

@@ -3,15 +3,9 @@
 import type { Editor } from '@tiptap/core'
 import { BlockquoteButton } from '@admin/components/custom/content-editor/tiptap-ui/blockquote-button'
 import { CodeBlockButton } from '@admin/components/custom/content-editor/tiptap-ui/code-block-button'
-import {
-  ColorHighlightPopover,
-  ColorHighlightPopoverButton
-} from '@admin/components/custom/content-editor/tiptap-ui/color-highlight-popover'
+import { ColorHighlightPopover } from '@admin/components/custom/content-editor/tiptap-ui/color-highlight-popover'
 import { HeadingDropdownMenu } from '@admin/components/custom/content-editor/tiptap-ui/heading-dropdown-menu'
-import {
-  LinkButton,
-  LinkPopover
-} from '@admin/components/custom/content-editor/tiptap-ui/link-popover'
+import { LinkPopover } from '@admin/components/custom/content-editor/tiptap-ui/link-popover'
 import { ListDropdownMenu } from '@admin/components/custom/content-editor/tiptap-ui/list-dropdown-menu'
 import { MarkButton } from '@admin/components/custom/content-editor/tiptap-ui/mark-button'
 import { UndoRedoButton } from '@admin/components/custom/content-editor/tiptap-ui/undo-redo-button'
@@ -20,23 +14,15 @@ import { Separator } from '@admin/components/ui/separator'
 import { useContentEditorMediaInsertion } from '@admin/hooks/content-editor/use-content-editor-media-insertion'
 import { ImagePlusIcon } from 'lucide-react'
 import { HorizontalRuleButton } from './horizontal-rule-button'
-import { MathButton, MathPopoverButton } from './math-popover'
+import { MathPopoverButton } from './math-popover'
 import { ModeToggleButton } from './mode-toggle-button'
 import { TableButton } from './table-button'
 
 export function MainToolbarContent({
-  onHighlighterClick,
-  onLinkClick,
-  onMathClick,
   onModeChange,
-  isMobile,
   editor
 }: {
-  onHighlighterClick: () => void
-  onLinkClick: () => void
-  onMathClick: () => void
   onModeChange: () => void
-  isMobile: boolean
   editor: Editor | null
 }) {
   const mediaInsertion = useContentEditorMediaInsertion({ editor })
@@ -67,12 +53,8 @@ export function MainToolbarContent({
           <MarkButton type="strike" />
           <MarkButton type="code" />
           <MarkButton type="underline" />
-          {!isMobile ? (
-            <ColorHighlightPopover />
-          ) : (
-            <ColorHighlightPopoverButton onClick={onHighlighterClick} />
-          )}
-          {!isMobile ? <LinkPopover /> : <LinkButton onClick={onLinkClick} />}
+          <ColorHighlightPopover />
+          <LinkPopover />
         </div>
 
         <Separator orientation="vertical" className="mx-1 my-auto h-[65%] self-center" />
@@ -80,11 +62,7 @@ export function MainToolbarContent({
         <div className="flex items-center">
           <TableButton editor={editor} />
 
-          {!isMobile ? (
-            <MathPopoverButton editor={editor} />
-          ) : (
-            <MathButton text="Math" aria-label="Insert math" title="Math" onClick={onMathClick} />
-          )}
+          <MathPopoverButton editor={editor} />
 
           {mediaInsertion.isVisible ? (
             <Button

package/dist/assets/shared-assets/react-admin/custom/content-editor/tiptap-node/removable-image-node/removable-image-node.tsx

@@ -118,7 +118,7 @@ export const RemovableImageNode: React.FC<NodeViewProps> = (props) => {
             alt={alt}
             title={title || undefined}
             fill
-            sizes="(min-width: 1024px) 768px, 100vw"
+            sizes="768px"
             unoptimized
             className="!m-0 !h-full !w-full !max-w-full object-contain"
             onLoad={handleImageLoad}