@kyro-cms/admin 0.9.3 → 0.9.5

package/src/components/DetailView.tsx

@@ -292,8 +292,30 @@ export function DetailView({
         ]}
       />
 
-      {!isSingleLayout && (
-
+      {isSingleLayout ? (
+        <div className="md:hidden">
+          <ActionBar
+            status={status}
+            saveStatus={saveStatus}
+            hasChanges={hasChanges}
+            onSave={() => handleSave(false)}
+            onPublish={handlePublish}
+            onUnpublish={status === "published" ? handleUnpublish : undefined}
+            onDuplicate={handleDuplicate}
+            onViewHistory={() => {
+              window.dispatchEvent(new CustomEvent('kyro:show-version-history'));
+            }}
+            onPreview={() =>
+              window.open(`/preview/${slug}/${documentId}`, "_blank")
+            }
+            onDelete={handleDeleteTrigger}
+            onBack={onBack}
+            onToggleSidebar={() => window.dispatchEvent(new CustomEvent("toggle-sidebar"))}
+            publishedAt={publishedAt}
+            updatedAt={updatedAt}
+          />
+        </div>
+      ) : (
         <ActionBar
           status={status}
           saveStatus={saveStatus}
@@ -309,6 +331,8 @@ export function DetailView({
             window.open(`/preview/${slug}/${documentId}`, "_blank")
           }
           onDelete={handleDeleteTrigger}
+          onBack={onBack}
+          onToggleSidebar={() => window.dispatchEvent(new CustomEvent("toggle-sidebar"))}
           publishedAt={publishedAt}
           updatedAt={updatedAt}
         />
@@ -317,12 +341,12 @@ export function DetailView({
       <div
         className={
           isSingleLayout
-            ? "w-full pb-32 pt-8"
-            : "w-full mx-auto grid grid-cols-1 lg:grid-cols-[1fr_360px] gap-8 pb-32"
+            ? "w-full pb-32 pt-4 md:pt-8"
+            : "w-full mx-auto grid grid-cols-1 lg:grid-cols-[1fr_360px] gap-4 md:gap-8 pt-4 md:pt-0 pb-32"
         }
       >
-        <div className="space-y-8 min-w-0">
-          <div className="surface-tile p-8">
+        <div className="space-y-4 md:space-y-8 min-w-0">
+          <div className="surface-tile p-4 md:p-8">
             <div className="flex items-center justify-between mb-8 px-1">
               <h2 className="text-[10px] font-bold  tracking-[0.2em] opacity-40">
                 Core Configuration
@@ -369,12 +393,12 @@ export function DetailView({
         </div>
 
         {!isSingleLayout && (
-          <div className="space-y-6 animate-in fade-in slide-in-from-right-4 duration-500">
-            <div className="surface-tile p-8">
-              <h3 className="text-[10px] font-bold  tracking-[0.2em] opacity-40 mb-6">
+          <div className="space-y-4 md:space-y-6 animate-in fade-in slide-in-from-right-4 duration-500">
+            <div className="surface-tile p-4 md:p-8">
+              <h3 className="text-[10px] font-bold  tracking-[0.2em] opacity-40 mb-4 md:mb-6">
                 Metadata
               </h3>
-              <div className="space-y-6">
+              <div className="space-y-4 md:space-y-6">
                 <div className="flex flex-col gap-2">
                   <span className="text-[10px] font-bold  tracking-widest opacity-40">
                     Dynamic Status
@@ -429,11 +453,11 @@ export function DetailView({
               </div>
             </div>
 
-            <div className="surface-tile p-8 bg-[var(--kyro-bg-secondary)]">
-              <h3 className="text-[10px] font-bold  tracking-[0.2em] opacity-40 mb-4">
+            <div className="surface-tile p-4 md:p-8 bg-[var(--kyro-bg-secondary)]">
+              <h3 className="text-[10px] font-bold  tracking-[0.2em] opacity-40 mb-3 md:mb-4">
                 Quick Links
               </h3>
-              <div className="space-y-3">
+              <div className="space-y-2 md:space-y-3">
                 <button
                   type="button"
                   onClick={handleDuplicate}

package/src/components/ListView.tsx

@@ -359,7 +359,7 @@ export function ListView({
       {/* Toolbar */}
       <div className="surface-tile p-4 flex flex-col lg:flex-row gap-4 items-start lg:items-center">
         {/* Search */}
-        <div className="relative flex-1 max-w-md">
+        <div className="relative flex-1 w-full lg:max-w-md">
           <Search className="w-4 h-4" />
           <input
             type="text"
@@ -582,7 +582,7 @@ export function ListView({
           <div className="overflow-x-auto">
             <table className="w-full text-left">
               <thead>
-                <tr className="text-[var(--kyro-text-secondary)] font-bold text-[10px]  tracking-[0.3em] border-b border-[var(--kyro-border)]">
+                <tr className="text-[var(--kyro-text-secondary)] font-bold text-[10px]  tracking-[0.3em] border-b border-[var(--kyro-border)] whitespace-nowrap">
                   <th className="px-4 py-4 w-10">
                     <input
                       type="checkbox"

package/src/components/LoginPage.tsx

@@ -1,13 +1,8 @@
 import { useState, useEffect } from "react";
 import { apiGet, apiPost } from "../lib/api";
 import { ThemeProvider, type ThemeMode } from "./ThemeProvider";
-import { Toast, ToastProvider } from "./ui/Toast";
-
-interface LocalToast {
-  id: string;
-  type: "success" | "error" | "info" | "warning";
-  message: string;
-}
+import { Toaster } from "./ui/Toaster";
+import { useToastStore } from "../lib/stores";
 
 interface LoginPageProps {
   onAuth: (token: string, user: Record<string, unknown>) => void;
@@ -22,8 +17,8 @@ export function LoginPage({ onAuth, theme = "light" }: LoginPageProps) {
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
   const [loading, setLoading] = useState(false);
-  const [toasts, setToasts] = useState<LocalToast[]>([]);
   const [isFirstUser, setIsFirstUser] = useState(false);
+  const addToast = useToastStore((state) => state.addToast);
 
   useEffect(() => {
     checkIfFirstUser();
@@ -38,14 +33,6 @@ export function LoginPage({ onAuth, theme = "light" }: LoginPageProps) {
     }
   };
 
-  const addToast = (type: LocalToast["type"], message: string) => {
-    const id = Math.random().toString(36).substring(7);
-    setToasts((prev) => [...prev, { id, type, message }]);
-    setTimeout(() => {
-      setToasts((prev) => prev.filter((t) => t.id !== id));
-    }, 5000);
-  };
-
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setLoading(true);
@@ -79,7 +66,6 @@ export function LoginPage({ onAuth, theme = "light" }: LoginPageProps) {
 
   return (
     <ThemeProvider defaultMode={theme}>
-      <ToastProvider>
         <div className="kyro-login-page">
           <div className="kyro-login-container">
             <div className="kyro-login-header">
@@ -190,19 +176,8 @@ export function LoginPage({ onAuth, theme = "light" }: LoginPageProps) {
               </div>
             )}
           </div>
-
-          {toasts.map((toast) => (
-            <Toast
-              key={toast.id}
-              type={toast.type}
-              message={toast.message}
-              onClose={() =>
-                setToasts((prev) => prev.filter((t) => t.id !== toast.id))
-              }
-            />
-          ))}
+          <Toaster />
         </div>
-      </ToastProvider>
-    </ThemeProvider>
+      </ThemeProvider>
   );
 }

package/src/components/MediaGallery.tsx

@@ -1,4 +1,4 @@
-import { Search, Check, Server } from "./ui/icons";
+import { Search, Check, Server, Filter } from "./ui/icons";
 import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import { createPortal } from "react-dom";
 import { Spinner } from "./ui/Spinner";
@@ -146,6 +146,7 @@ export function MediaGallery({
     {},
   );
   const [showNewFolderModal, setShowNewFolderModal] = useState(false);
+  const [showMobileFilters, setShowMobileFilters] = useState(false);
   const [storageConfigured, setStorageConfigured] = useState<boolean | null>(null);
   const [storageChecked, setStorageChecked] = useState(false);
   const [showStorageConfigModal, setShowStorageConfigModal] = useState(false);
@@ -318,6 +319,7 @@ export function MediaGallery({
       await apiPost("/api/media/folders", { name });
       loadFolders();
       setShowNewFolderModal(false);
+      toast.success(`Folder "${name}" created`);
     } catch (error) {
       console.error("Failed to create folder:", error);
       toast.error("Failed to create folder");
@@ -336,6 +338,7 @@ export function MediaGallery({
           if (currentFolder === folder) setCurrentFolder("");
           loadFolders();
           loadMedia();
+          toast.success(`Folder "${folder}" deleted`);
         } catch (error) {
           console.error("Failed to delete folder:", error);
           toast.error("Failed to delete folder");
@@ -351,8 +354,10 @@ export function MediaGallery({
       if (panelItem?.id === id) {
         setPanelItem(result.doc);
       }
+      toast.success("Metadata updated");
     } catch (error) {
       console.error("Failed to update metadata:", error);
+      toast.error("Failed to update metadata");
     }
   };
 
@@ -410,6 +415,7 @@ export function MediaGallery({
           await apiUpload("/api/media", formData);
           loadMedia();
           setShowCrop(false);
+          toast.success("Cropped image saved");
         }
       }
     } catch (err) {
@@ -440,7 +446,7 @@ export function MediaGallery({
       })}
     >
       {/* Top Bar */}
-      <div className={`flex flex-col lg:flex-row lg:items-center justify-between gap-6 border-b border-[var(--kyro-border)] backdrop-blur-md sticky top-0 z-40 ${pickerMode ? "p-2" : "p-6 rounded-xl surface-tile"}`}>
+      <div className={`flex flex-col lg:flex-row lg:items-center justify-between gap-6 border-b border-[var(--kyro-border)] backdrop-blur-md sticky top-0 ${pickerMode ? "p-2" : "p-6 rounded-xl surface-tile"}`}>
         {!pickerMode && (
           <div className="flex items-center gap-4">
             <div>
@@ -458,7 +464,7 @@ export function MediaGallery({
 
         <div className={`flex items-center gap-3 flex-wrap lg:flex-nowrap ${pickerMode ? "w-full" : ""}`}>
           <div className="relative group flex-1 min-w-[200px]">
-            <Search className="w-4 h-4" />
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-muted)]" />
             <input
               type="text"
               placeholder="Search assets..."
@@ -470,18 +476,27 @@ export function MediaGallery({
 
           {!pickerMode && (
             <>
-              <div className="flex bg-[var(--kyro-surface-accent)] p-1 rounded-xl border border-[var(--kyro-border)]">
-                <button
-                  onClick={() => setView("grid")}
-                  className={`p-2 rounded-lg transition-all ${view === "grid" ? "bg-[var(--kyro-surface)] shadow-sm text-[var(--kyro-text-primary)]" : "text-[var(--kyro-text-secondary)] opacity-50 hover:opacity-100"}`}
-                >
-                  <Grid className="w-4 h-4" />
-                </button>
+              <div className="flex items-center gap-2">
+                <div className="flex bg-[var(--kyro-surface-accent)] p-1 rounded-xl border border-[var(--kyro-border)]">
+                  <button
+                    onClick={() => setView("grid")}
+                    className={`p-2 rounded-lg transition-all ${view === "grid" ? "bg-[var(--kyro-surface)] shadow-sm text-[var(--kyro-text-primary)]" : "text-[var(--kyro-text-secondary)] opacity-50 hover:opacity-100"}`}
+                  >
+                    <Grid className="w-4 h-4" />
+                  </button>
+                  <button
+                    onClick={() => setView("list")}
+                    className={`p-2 rounded-lg transition-all ${view === "list" ? "bg-[var(--kyro-surface)] shadow-sm text-[var(--kyro-text-primary)]" : "text-[var(--kyro-text-secondary)] opacity-50 hover:opacity-100"}`}
+                  >
+                    <FileIcon className="w-4 h-4" />
+                  </button>
+                </div>
+
                 <button
-                  onClick={() => setView("list")}
-                  className={`p-2 rounded-lg transition-all ${view === "list" ? "bg-[var(--kyro-surface)] shadow-sm text-[var(--kyro-text-primary)]" : "text-[var(--kyro-text-secondary)] opacity-50 hover:opacity-100"}`}
+                  onClick={() => setShowMobileFilters(true)}
+                  className="md:hidden p-2 rounded-xl bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-colors"
                 >
-                  <FileIcon className="w-4 h-4" />
+                  <Filter className="w-4 h-4" />
                 </button>
               </div>
 
@@ -861,6 +876,96 @@ export function MediaGallery({
         </div>
       )}
 
+      {/* Mobile Filters Bottom Sheet */}
+      {showMobileFilters && !pickerMode && (
+        <div className="fixed inset-0 z-[70] md:hidden">
+          <div
+            className="fixed inset-0 bg-black/50 backdrop-blur-sm"
+            onClick={() => setShowMobileFilters(false)}
+          />
+          <div className="fixed bottom-0 left-0 right-0 bg-[var(--kyro-surface)] rounded-t-3xl shadow-2xl max-h-[70vh] overflow-y-auto animate-in slide-in-from-bottom-12 duration-300">
+            <div className="sticky top-0 bg-[var(--kyro-surface)] z-10 flex items-center justify-between p-6 pb-4 border-b border-[var(--kyro-border)]">
+              <h3 className="text-sm font-bold tracking-tight text-[var(--kyro-text-primary)]">
+                Filters
+              </h3>
+              <button
+                onClick={() => setShowMobileFilters(false)}
+                className="p-2 rounded-xl hover:bg-[var(--kyro-surface-accent)] transition-colors text-[var(--kyro-text-muted)]"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+
+            <div className="p-6 space-y-8">
+              {/* Quick Filters */}
+              <div>
+                <span className="text-[10px] font-bold tracking-[0.2em] text-[var(--kyro-text-secondary)] opacity-40 block mb-4">
+                  Quick Filters
+                </span>
+                <div className="flex flex-wrap gap-2">
+                  {(["all", "image", "video", "audio", "document", "archive"] as const).map((t) => (
+                    <button
+                      key={t}
+                      onClick={() => { setFilter(t); setShowMobileFilters(false); }}
+                      className={`px-4 py-2 rounded-xl text-[11px] font-bold capitalize transition-all border ${filter === t ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] border-transparent" : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] border-[var(--kyro-border)] hover:border-[var(--kyro-text-muted)]"}`}
+                    >
+                      {t}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* Folders */}
+              <div>
+                <div className="flex items-center justify-between mb-4">
+                  <span className="text-[10px] font-bold tracking-[0.2em] text-[var(--kyro-text-secondary)] opacity-40">
+                    Folders
+                  </span>
+                  <button
+                    onClick={() => { setShowNewFolderModal(true); setShowMobileFilters(false); }}
+                    className="p-1.5 hover:bg-[var(--kyro-surface-accent)] rounded-lg transition-colors text-[var(--kyro-text-primary)]"
+                  >
+                    <FolderPlus className="w-4 h-4" />
+                  </button>
+                </div>
+                <nav className="space-y-1">
+                  <button
+                    onClick={() => { setCurrentFolder(""); setShowMobileFilters(false); }}
+                    className={`w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-xs font-bold transition-all ${currentFolder === "" ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] shadow-md" : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] hover:text-[var(--kyro-text-primary)]"}`}
+                  >
+                    <FolderInput className="w-4 h-4 opacity-70" />
+                    All Assets
+                  </button>
+                  {folders.map((folder) => (
+                    <div key={folder} className="group relative">
+                      <button
+                        onClick={() => { setCurrentFolder(folder); setShowMobileFilters(false); }}
+                        className={`w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-xs font-bold transition-all ${currentFolder === folder ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] shadow-md" : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] hover:text-[var(--kyro-text-primary)]"}`}
+                      >
+                        <div className="w-4 h-4 flex items-center justify-center opacity-70">
+                          <Folder fill={currentFolder === folder ? "currentColor" : "none"} />
+                        </div>
+                        {folder}
+                      </button>
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleDeleteFolder(folder);
+                          setShowMobileFilters(false);
+                        }}
+                        className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-red-500 opacity-0 group-hover:opacity-100 transition-all hover:bg-red-50 rounded-lg"
+                      >
+                        <Trash2 className="w-3.5 h-3.5" />
+                      </button>
+                    </div>
+                  ))}
+                </nav>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Asset Panel */}
       <SlidePanel
         open={!!panelItem}
@@ -1178,6 +1283,8 @@ export function MediaGallery({
                     setShowStorageConfigModal(false);
                     setStorageConfigured(true);
                     window.location.reload();
+                  }).catch(() => {
+                    toast.error("Failed to configure storage");
                   });
                 }}
                 className="flex-1 px-4 py-3 border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] rounded-xl font-bold hover:bg-[var(--kyro-surface-accent)] transition-colors"

package/src/components/Sidebar.astro

@@ -92,9 +92,10 @@ function isActive(item: NavItem): boolean {
 ---
 
 <aside
-  class="surface-tile w-[320px] flex flex-col flex-shrink-0 overflow-hidden"
+  id="kyro-sidebar"
+  class="surface-tile w-[280px] md:w-[320px] flex flex-col flex-shrink-0 overflow-hidden fixed md:static inset-y-0 left-0 z-50 md:z-auto transition-transform duration-300 -translate-x-full md:translate-x-0 h-[100dvh] md:h-auto border-r md:border-r-0 border-[var(--kyro-border)] rounded-r-2xl md:rounded-3xl rounded-l-none md:rounded-l-3xl shadow-2xl md:shadow-none"
 >
-  <div class="px-8 py-8 flex items-center gap-3">
+  <div class="px-6 md:px-8 py-6 md:py-8 flex items-center justify-between gap-3">
     {
       siteLogo ? (
         <img
@@ -113,6 +114,9 @@ function isActive(item: NavItem): boolean {
         </span>
       )
     }
+    <button id="mobile-close-btn" class="md:hidden p-2 -mr-2 rounded-lg text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] transition-colors">
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+    </button>
   </div>
 
   <nav class="flex-1 px-4 overflow-y-auto" id="sidebar-nav">

package/src/components/UserManagement.tsx

@@ -132,7 +132,7 @@ export function UserManagement() {
   );
 
   return (
-    <div className="w-full space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-700 px-8 pb-12">
+    <div className="w-full space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-700 px-4 md:px-8 pb-12">
       {/* Header */}
       <PageHeader
         title="Identity & Access"
@@ -169,10 +169,10 @@ export function UserManagement() {
       </div>
 
       {/* User Table */}
-      <div className="surface-tile overflow-hidden">
-        <table className="w-full text-left table-fixed">
+      <div className="surface-tile overflow-x-auto">
+        <table className="w-full text-left">
           <thead>
-            <tr className="text-[var(--kyro-text-secondary)] font-bold text-[9px]  tracking-[0.2em] uppercase border-b border-[var(--kyro-border)]">
+            <tr className="text-[var(--kyro-text-secondary)] font-bold text-[9px]  tracking-[0.2em] uppercase border-b border-[var(--kyro-border)] whitespace-nowrap">
               <th className="px-6 py-4 w-64">Member Identity</th>
               <th className="px-6 py-4">Administrative Role</th>
               <th className="px-6 py-4">Security Status</th>

package/src/components/WebhookManager.tsx

@@ -246,14 +246,14 @@ export function WebhookManager() {
                       </div>
                     </div>
 
-                    <div className="grid sm:grid-cols-3 gap-6 pt-2">
+                    <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 pt-2">
                       <div className="space-y-1">
                         <span className="text-[9px] font-bold uppercase tracking-widest opacity-30">Destination</span>
                         <div className="font-mono text-xs opacity-60 truncate max-w-[200px]" title={webhook.url}>
                           {webhook.url}
                         </div>
                       </div>
-                      <div className="space-y-1 border-l border-[var(--kyro-border)] pl-6">
+                      <div className="space-y-1 sm:border-l border-t sm:border-t-0 border-[var(--kyro-border)] pt-4 sm:pt-0 sm:pl-6 mt-4 sm:mt-0">
                         <span className="text-[9px] font-bold uppercase tracking-widest opacity-30">Events</span>
                         <div className="flex flex-wrap gap-1">
                           {webhook.events.slice(0, 2).map((event) => (
@@ -266,7 +266,7 @@ export function WebhookManager() {
                           )}
                         </div>
                       </div>
-                      <div className="space-y-1 border-l border-[var(--kyro-border)] pl-6">
+                      <div className="space-y-1 sm:border-l border-t sm:border-t-0 border-[var(--kyro-border)] pt-4 sm:pt-0 sm:pl-6 mt-4 sm:mt-0">
                         <span className="text-[9px] font-bold uppercase tracking-widest opacity-30">Activity</span>
                         <div className="text-[10px] font-bold opacity-60 flex items-center gap-1.5">
                           <Clock className="w-3 h-3" />
@@ -367,7 +367,7 @@ export function WebhookManager() {
 
               <div className="space-y-4">
                 <label className="block text-xs font-bold mb-1.5 text-[var(--kyro-text-secondary)] uppercase tracking-wider">Subscribed Events</label>
-                <div className="grid grid-cols-2 gap-4">
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                   {eventOptions.map((opt) => (
                     <button
                       type="button"

package/src/components/fields/BlocksField.tsx

@@ -106,11 +106,10 @@ const SortableBlockComponent = ({
       <div ref={setNodeRef} style={style} className="relative group">
         <div
           onClick={() => setEditingBlockId(block.id as string)}
-          className={`flex items-center gap-1 pl-5 pr-1.5 py-1 bg-[var(--kyro-bg-secondary)] rounded-md border transition-colors cursor-pointer text-xs whitespace-nowrap ${
-            isEditing
+          className={`flex items-center gap-1 pl-5 pr-1.5 py-1 bg-[var(--kyro-bg-secondary)] rounded-md border transition-colors cursor-pointer text-xs whitespace-nowrap ${isEditing
               ? `${(blockTheme[block.type as string] || blockTheme.default).border} bg-[var(--kyro-primary)]/5`
               : "border-[var(--kyro-border)] hover:border-[var(--kyro-primary)]/50 hover:bg-[var(--kyro-primary)]/5"
-          }`}
+            }`}
         >
           <div
             className="absolute left-0.5 top-1/2 -translate-y-1/2 p-0.5 cursor-grab active:cursor-grabbing text-[var(--kyro-text-muted)] opacity-0 group-hover:opacity-100 transition-opacity hover:bg-[var(--kyro-surface-accent)] rounded"
@@ -191,9 +190,9 @@ const SortableBlockComponent = ({
   }
 
   return (
-    <div ref={setNodeRef} style={style} className="relative group pl-8 mb-2">
+    <div ref={setNodeRef} style={style} className="relative group md:pl-8 mb-2">
       <div
-        className="absolute left-0 top-1/2 -translate-y-1/2 p-1.5 cursor-grab active:cursor-grabbing text-[var(--kyro-text-muted)] opacity-0 group-hover:opacity-100 transition-opacity hover:bg-[var(--kyro-surface-accent)] rounded"
+        className="hidden md:absolute left-0 top-1/2 -translate-y-1/2 p-1.5 cursor-grab active:cursor-grabbing text-[var(--kyro-text-muted)] opacity-0 group-hover:opacity-100 transition-opacity hover:bg-[var(--kyro-surface-accent)] rounded"
         {...attributes}
         {...listeners}
       >
@@ -202,11 +201,10 @@ const SortableBlockComponent = ({
 
       <div
         onClick={() => setEditingBlockId(block.id as string)}
-        className={`flex items-center gap-3 p-3 bg-[var(--kyro-bg-secondary)] rounded-lg border transition-colors cursor-pointer ${
-          isEditing
+        className={`flex items-center gap-3 p-3 bg-[var(--kyro-bg-secondary)] rounded-lg border transition-colors cursor-pointer ${isEditing
             ? `${(blockTheme[block.type as string] || blockTheme.default).border} bg-[var(--kyro-primary)]/5`
             : "border-[var(--kyro-border)] hover:border-[var(--kyro-primary)]/50 hover:bg-[var(--kyro-primary)]/5"
-        }`}
+          }`}
       >
         {blockIcons[block.type as string] && (
           <span className="text-[var(--kyro-text-secondary)]">
@@ -394,7 +392,7 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
   useEffect(() => {
     const valueArray = Array.isArray(value) ? value : [];
     const lastValueArray = lastValueRef.current || [];
-    
+
     // Deep compare to catch external data changes (e.g. discard draft / auto-save restore)
     if (JSON.stringify(valueArray) !== JSON.stringify(lastValueArray)) {
       const valueArrayCopy = [...valueArray];
@@ -534,11 +532,11 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
     blocks.find((b) => b.id === activeDrag.id)
     : null;
 
-const activeBlockLabel = activeBlock
-     ? "label" in activeBlock
-       ? (activeBlock as Record<string, unknown>).label
-       : activeBlock.type
-     : "Block";
+  const activeBlockLabel = activeBlock
+    ? "label" in activeBlock
+      ? (activeBlock as Record<string, unknown>).label
+      : activeBlock.type
+    : "Block";
 
   const borderClass = getBorderClass();