@nextclaw/ui 0.26.2 → 0.26.3

package/src/app/configs/__tests__/app-navigation.config.test.ts

@@ -29,6 +29,16 @@ describe("panel app main navigation", () => {
 describe("project home navigation", () => {
   const translate = (key: string) => key;
 
+  it("returns project details to the project picker", () => {
+    expect(resolveMobileRouteMeta("/projects/example/overview", translate).backTarget).toBe("/projects");
+  });
+
+  it("labels scheduled tasks and returns to chat", () => {
+    expect(resolveMobileRouteMeta("/cron", translate)).toEqual({
+      title: "cron", backTarget: "/chat", backLabel: "chat",
+    });
+  });
+
   it("keeps projects in the main workspace without a parallel global nav item", () => {
     expect(isMainWorkspaceRoute("/projects")).toBe(true);
     expect(getMainSidebarNavItems(translate).map((item) => item.target)).not.toContain("/projects");

package/src/app/configs/app-navigation.config.ts

@@ -259,8 +259,8 @@ export function resolveMobileRouteMeta(
   if (normalized === "/projects" || normalized.startsWith("/projects/")) {
     return {
       title: translate("projectsTitle"),
-      backTarget: "/chat",
-      backLabel: translate("chat"),
+      backTarget: normalized === "/projects" ? "/chat" : "/projects",
+      backLabel: translate(normalized === "/projects" ? "chat" : "projectsTitle"),
     };
   }
 
@@ -280,6 +280,10 @@ export function resolveMobileRouteMeta(
     };
   }
 
+  if (normalized === "/cron" || normalized.startsWith("/cron/")) {
+    return { title: translate("cron"), backTarget: "/chat", backLabel: translate("chat") };
+  }
+
   for (const item of settingsItems) {
     if (matchesRouteTarget(normalized, item.target)) {
       return {

package/src/app/styles/charcoal-theme.css

@@ -42,7 +42,7 @@
     --secondary-foreground: var(--gray-800);
     --accent: 0 0% 19%;
     --accent-foreground: var(--gray-900);
-    --interaction-hover: hsl(var(--gray-200));
+    --interaction-hover: hsl(var(--muted));
     --interaction-selection: hsl(202 38% 27%);
     --interaction-selection-border: hsl(202 48% 40%);
     --muted: var(--gray-100);

package/src/app/styles/design-system.css

@@ -14,6 +14,12 @@
    :root {
       color-scheme: light;
 
+      /* Mobile density: hit target, visual feedback, and chrome are separate. */
+      --control-touch-size: 2.75rem;
+      --icon-control-size: 2.5rem;
+      --icon-feedback-size: 2rem;
+      --mobile-header-height: 3rem;
+
       /* ========================================
        BRAND COLORS (Natural Olive)
        ======================================== */
@@ -80,7 +86,7 @@
       /* Accent */
       --accent: var(--brand-50);
       --accent-foreground: var(--brand-700);
-      --interaction-hover: hsl(0 0% 96%);
+      --interaction-hover: hsl(var(--muted));
       --interaction-selection: hsl(211 100% 92%);
       --interaction-selection-border: hsl(211 75% 84%);
 
@@ -717,7 +723,7 @@
       --secondary-foreground: var(--gray-800);
       --accent: 151 32% 18%;
       --accent-foreground: 148 34% 84%;
-      --interaction-hover: hsl(var(--gray-200));
+      --interaction-hover: hsl(var(--muted));
       --interaction-selection: hsl(211 48% 30%);
       --interaction-selection-border: hsl(211 48% 42%);
       --muted: var(--gray-100);

package/src/app/styles/island-theme.css

@@ -44,7 +44,7 @@
     --secondary-foreground: var(--gray-800);
     --accent: 151 28% 88%;
     --accent-foreground: var(--brand-800);
-    --interaction-hover: hsl(151 25% 86% / 0.72);
+    --interaction-hover: hsl(var(--muted));
     --interaction-selection: hsl(153 35% 80% / 0.82);
     --interaction-selection-border: hsl(157 37% 58% / 0.88);
     --muted: var(--gray-100);

package/src/features/agents/components/agent-details-dialog.tsx

@@ -350,7 +350,7 @@ function DetailItem(props: {
   return (
     <div
       className={cn(
-        "grid min-w-0 grid-cols-[10rem_minmax(0,1fr)] items-baseline gap-x-2",
+        "grid min-w-0 grid-cols-1 sm:grid-cols-[10rem_minmax(0,1fr)] items-baseline gap-x-2 gap-y-1",
         (wide || isStructuredValue) && "sm:col-span-2",
       )}
     >

package/src/features/agents/components/agents-page.tsx

@@ -1,4 +1,5 @@
 import { PageResourceActionItems } from '@/features/right-panel-resources';
+import { ACTION_FEEDBACK, ACTION_MENU_ITEM_CLASS } from '@/shared/components/ui/actions/action-feedback';
 import { pageResourceFromSystemObject } from '@/features/right-panel-resources';
 import { useMemo, useState } from "react";
 import {
@@ -97,10 +98,10 @@ function AgentActionMenuItem(props: {
     <button
       type="button"
       className={cn(
-        "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+        ACTION_MENU_ITEM_CLASS,
         destructive
-          ? "text-destructive hover:bg-destructive/10"
-          : "text-foreground hover:bg-muted",
+          ? ACTION_FEEDBACK.destructive
+          : `text-foreground ${ACTION_FEEDBACK.item}`,
       )}
       onClick={onClick}
       disabled={disabled}
@@ -342,6 +343,7 @@ export function AgentsPage() {
   return (
     <PageLayout className="space-y-6">
       <PageHeader
+        mobileTitleInShell
         headingLevel={1}
         title={t("agentsHeroEyebrow")}
         description={t("agentsHeroDescription")}

package/src/features/apps/components/app-package-card.tsx

@@ -1,4 +1,5 @@
 import { useRef, useState } from "react";
+import { ACTION_FEEDBACK, ACTION_MENU_ITEM_CLASS } from '@/shared/components/ui/actions/action-feedback';
 import type { AppDataEntry, AppPackageOperationView, AppPackageView } from "@nextclaw/client-sdk";
 import {
   AlertCircle,
@@ -80,11 +81,11 @@ export function AppPackageCard({
 
   return (
     <Card surface="flat" hover={false} className="overflow-hidden border-border/60 shadow-[0_1px_2px_rgba(0,0,0,0.025)]">
-      <div className="flex items-start gap-3.5 px-4 pb-3.5 pt-4">
+      <div className="flex max-md:grid max-md:grid-cols-[auto_minmax(0,1fr)] items-start gap-3.5 px-4 pb-3.5 pt-4">
         <AppArtwork icon={appPackage.icon} name={displayName} />
         <div className="min-w-0 flex-1">
           <div className="flex min-w-0 items-center gap-2">
-            <h2 className="truncate text-sm font-semibold text-foreground">{displayName}</h2>
+            <h2 className="truncate max-md:whitespace-normal max-md:break-words text-sm font-semibold text-foreground">{displayName}</h2>
             <span className={cn("shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium", availability.className)}>{availability.label}</span>
           </div>
           {availability.message ? (
@@ -125,7 +126,7 @@ export function AppPackageCard({
             <code className="min-w-0 truncate font-mono text-[10px]">{appPackage.storage.dataDirectory}</code>
           </div>
         </div>
-        <div className="flex shrink-0 items-center gap-1">
+        <div className="flex shrink-0 items-center gap-1 max-md:col-start-2 max-md:justify-end">
           <Button
             type="button"
             size="sm"
@@ -148,7 +149,7 @@ export function AppPackageCard({
                 aria-label={t("appPackagesMoreActions")}
                 title={t("appPackagesMoreActions")}
                 disabled={pending}
-                className="rounded-full p-2 text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:opacity-50"
+                className="max-md:min-h-11 max-md:min-w-11 inline-flex items-center justify-center rounded-full p-2 text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:opacity-50"
               >
                 <MoreVertical className="h-4 w-4" />
               </button>
@@ -314,8 +315,8 @@ function AppPackageMenuItem({ destructive = false, icon: Icon, label, onClick }:
       type="button"
       onClick={onClick}
       className={cn(
-        "flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm transition-colors",
-        destructive ? "text-destructive hover:bg-destructive/10" : "text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground",
+        ACTION_MENU_ITEM_CLASS,
+        destructive ? ACTION_FEEDBACK.destructive : `text-foreground ${ACTION_FEEDBACK.item}`,
       )}
     >
       <Icon className="h-4 w-4 shrink-0" />

package/src/features/chat/components/conversation/chat-conversation-header-section.tsx

@@ -19,7 +19,7 @@ import { useChatSessionListStore } from "@/features/chat/stores/chat-session-lis
 import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
 import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
 import { AgentIdentityAvatar } from "@/shared/components/common/agent-identity";
-import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
+import { IconActionButton, IconActionGroup } from "@/shared/components/ui/actions/icon-action-button";
 import {
   getSessionProjectName,
   normalizeSessionProjectRootValue,
@@ -150,7 +150,7 @@ export function ChatConversationHeaderSection({
         ) : null
       }
       actions={
-        <div className="flex shrink-0 items-center gap-1.5">
+        <IconActionGroup>
           {layoutMode === "mobile" && sessionKey ? (
             <IconActionButton
               icon={<SquarePen className="h-4 w-4" />}
@@ -180,7 +180,7 @@ export function ChatConversationHeaderSection({
             onToggleWorkspace={toggleWorkspace}
             onDeleteSession={presenter.chatThreadManager.deleteSession}
           />
-        </div>
+        </IconActionGroup>
       }
     />
   );

package/src/features/chat/components/conversation/chat-conversation-header.tsx

@@ -66,21 +66,21 @@ export function ChatConversationHeader({
         "bg-background/80 backdrop-blur-sm flex items-center justify-between shrink-0 overflow-hidden transition-colors duration-200",
         isMobileLayout ? "px-3 sm:px-3" : "px-4 sm:px-5",
         shouldShow ? "opacity-100" : "h-0 py-0 opacity-0",
-        shouldShow && (isMobileLayout ? "min-h-12 pb-2 pt-2" : "h-[52px]"),
+        shouldShow && (isMobileLayout ? "min-h-[var(--mobile-header-height)] pb-0.5 pt-0.5" : "h-[52px]"),
       )}
       style={
         isMobileLayout && shouldShow
-          ? { paddingTop: "calc(env(safe-area-inset-top, 0px) + 0.5rem)" }
+          ? { paddingTop: "calc(env(safe-area-inset-top, 0px) + 0.125rem)" }
           : undefined
       }
     >
-      <div className="min-w-0 flex-1 flex items-center gap-2">
+      <div className="min-w-0 flex-1 flex items-center gap-2 max-md:gap-0">
         {isMobileLayout && onBackToList ? (
           <IconActionButton
             icon={<ArrowLeft className="h-4 w-4" />}
             label={t("chat")}
             onClick={onBackToList}
-            className="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground"
+            size="lg"
           />
         ) : null}
         {leading}

package/src/features/chat/components/layout/chat-page-shell.tsx

@@ -55,7 +55,7 @@ function ManagementPageContent({ view }: ChatPageProps) {
     case 'resource': return <ResourcePage />;
     case 'projects': return <Suspense fallback={<div className="h-full animate-pulse bg-card/30" />}><ProjectsPage /></Suspense>;
     case 'panel-app': return <PanelAppMainPage />;
-    case 'inbox': return <div className={`mx-auto flex h-full min-h-0 w-full flex-col py-4 sm:px-6 sm:py-5 ${MANAGEMENT_PAGE_CANVAS_WIDTH_CLASS}`}><InboxPage /></div>;
+    case 'inbox': return <div className={`mx-auto flex h-full min-h-0 w-full flex-col md:px-6 md:py-5 ${MANAGEMENT_PAGE_CANVAS_WIDTH_CLASS}`}><InboxPage /></div>;
     case 'cron':
     case 'agents': return <div ref={scrollRef} onScroll={onScroll} className="h-full overflow-auto custom-scrollbar">
       <div className={`mx-auto w-full px-4 py-4 sm:px-6 sm:py-5 ${MANAGEMENT_PAGE_CANVAS_WIDTH_CLASS}`}>

package/src/features/chat/components/layout/chat-sidebar-toolbar.tsx

@@ -1,7 +1,9 @@
 import { useState } from 'react';
-import { ChevronDown, Clock3, Folder, FolderPlus, Plus, Search, X } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { AlarmClock, ChevronDown, Clock3, Folder, FolderPlus, Plus, Search, X } from 'lucide-react';
 import { Button } from '@/shared/components/ui/button';
-import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
+import { IconActionButton, IconActionGroup } from '@/shared/components/ui/actions/icon-action-button';
+import { ACTION_FEEDBACK, ACTION_MENU_ITEM_CLASS } from '@/shared/components/ui/actions/action-feedback';
 import { Input } from '@/shared/components/ui/input';
 import { Popover, PopoverTrigger } from '@/shared/components/ui/popover';
 import { ChatPopoverContent } from '@/features/chat/components/chat-popover-content';
@@ -50,7 +52,7 @@ export function ChatSidebarMobileToolbar(props: ChatSidebarToolbarProps & {
   const [viewMenuOpen, setViewMenuOpen] = useState(false);
   return (
     <div className="shrink-0 border-b border-border/50 bg-background px-3 text-foreground" style={{ paddingTop: 'env(safe-area-inset-top, 0px)' }}>
-      <div className="flex h-14 items-center gap-1">
+      <div className="flex h-[var(--mobile-header-height)] items-center gap-1">
         <Popover open={viewMenuOpen} onOpenChange={setViewMenuOpen}>
           <h1>
             <PopoverTrigger asChild>
@@ -65,14 +67,19 @@ export function ChatSidebarMobileToolbar(props: ChatSidebarToolbarProps & {
               <ChatSessionHeaderMenuItem icon={Clock3} label={t('chatSidebarViewTime')} onClick={() => onSelectMode('time-first')} />
               <ChatSessionHeaderMenuItem icon={Folder} label={t('chatSidebarViewProject')} onClick={() => onSelectMode('project-first')} />
               <ChatSessionHeaderMenuItem icon={FolderPlus} label={t('chatProjectAdd')} onClick={onAddProject} />
+              <Link to="/cron" className={`${ACTION_MENU_ITEM_CLASS} text-foreground ${ACTION_FEEDBACK.item}`}>
+                <AlarmClock className="h-4 w-4 text-muted-foreground" />{t('cron')}
+              </Link>
             </div>
           </ChatPopoverContent>
         </Popover>
         <div className="flex-1" />
+        <IconActionGroup>
         <IconActionButton icon={searchOpen ? <X className="h-5 w-5" /> : <Search className="h-5 w-5" />}
-          label={t(searchOpen ? 'chatSidebarCloseSearch' : 'chatSidebarSearchPlaceholder')} className="h-11 w-11" tooltip={false}
+          label={t(searchOpen ? 'chatSidebarCloseSearch' : 'chatSidebarSearchPlaceholder')} tooltip={false}
           onClick={() => { setSearchOpen(!searchOpen); if (searchOpen) onQueryChange(''); }} />
-        <IconActionButton icon={<Plus className="h-5 w-5" />} label={t('chatSidebarNewTask')} className="h-11 w-11" tooltip={false} onClick={onCreateSession} />
+        <IconActionButton icon={<Plus className="h-5 w-5" />} label={t('chatSidebarNewTask')} tooltip={false} onClick={onCreateSession} />
+        </IconActionGroup>
       </div>
       {searchOpen ? <div className="pb-2">
         <Input autoFocus value={query} onChange={event => onQueryChange(event.target.value)} placeholder={t('chatSidebarSearchPlaceholder')}

package/src/features/chat/features/session/components/chat-mobile-session-row.tsx

@@ -51,7 +51,7 @@ export function ChatMobileSessionRow(props: ChatSidebarSessionItemProps) {
           </span>
         </span>
       </button>
-      <ChatSessionMoreActionsMenu sessionKey={sessionKey} sessionTitle={title} className="h-11 w-9 shrink-0 rounded-none text-muted-foreground">
+      <ChatSessionMoreActionsMenu sessionKey={sessionKey} sessionTitle={title}>
         <ChatSessionHeaderMenuItem icon={Pin} label={t(isPinned ? 'chatSidebarUnpinSession' : 'chatSidebarPinSession')} onClick={onTogglePinned} />
         <ChatSessionHeaderMenuItem icon={Pencil} label={t('edit')} onClick={onStartEditing} />
         <ChatSessionHeaderMenuItem icon={Trash2} label={t('delete')} onClick={onDelete} destructive />

package/src/features/chat/features/session/components/session-header/__tests__/chat-session-header-actions.test.tsx

@@ -187,7 +187,7 @@ describe('ChatSessionHeaderActions', () => {
 
     const actionGroup = screen.getByRole('button', { name: 'More actions' }).parentElement;
 
-    expect(actionGroup?.className).toContain('gap-1.5');
+    expect(actionGroup?.className).toContain('max-md:gap-0');
     expect(screen.getByRole('button', { name: 'Open session workspace' }).className).toContain('h-7');
     expect(screen.getByRole('button', { name: 'Open session workspace' }).className).toContain('w-7');
   });

package/src/features/chat/features/session/components/session-header/chat-session-header-actions.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Braces, FolderOpen, PanelRightClose, PanelRightOpen, Trash2 } from 'lucide-react';
-import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
+import { IconActionButton, IconActionGroup } from '@/shared/components/ui/actions/icon-action-button';
 import { useChatSessionProject } from '@/features/chat/features/session/hooks/use-chat-session-project';
 import { ChatSessionHeaderMenuItem } from './chat-session-header-menu-item';
 import { ChatSessionMoreActionsMenu } from './chat-session-more-actions-menu';
@@ -8,8 +8,6 @@ import { ChatSessionMetadataDialog } from './chat-session-metadata-dialog';
 import { ChatSessionProjectDialog } from './chat-session-project-dialog';
 import { t } from '@/shared/lib/i18n';
 
-const SESSION_HEADER_ACTION_GROUP_CLASS = 'flex shrink-0 items-center gap-1.5';
-
 type ChatSessionHeaderActionsProps = {
   sessionKey: string | null;
   sessionTitle?: string;
@@ -60,7 +58,7 @@ export function ChatSessionHeaderActions({
   };
 
   return (
-    <div className={SESSION_HEADER_ACTION_GROUP_CLASS}>
+    <IconActionGroup>
       <IconActionButton
         icon={
           isWorkspaceOpen ? (
@@ -123,6 +121,6 @@ export function ChatSessionHeaderActions({
           />
         </>
       ) : null}
-    </div>
+    </IconActionGroup>
   );
 }

package/src/features/chat/features/session/components/session-header/chat-session-header-menu-item.tsx

@@ -1,5 +1,6 @@
 import type { LucideIcon } from 'lucide-react';
 import { cn } from '@/shared/lib/utils';
+import { ACTION_FEEDBACK, ACTION_MENU_ITEM_CLASS } from '@/shared/components/ui/actions/action-feedback';
 
 type ChatSessionHeaderMenuItemProps = {
   icon: LucideIcon;
@@ -20,10 +21,10 @@ export function ChatSessionHeaderMenuItem({
     <button
       type="button"
       className={cn(
-        'flex h-8 w-full items-center gap-2 rounded-lg px-2.5 text-left text-[13px] font-medium outline-none transition-colors disabled:cursor-not-allowed disabled:opacity-50',
+        ACTION_MENU_ITEM_CLASS,
         destructive
-          ? 'text-destructive hover:bg-destructive/10 focus-visible:bg-destructive/10'
-          : 'text-foreground hover:bg-muted focus-visible:bg-muted'
+          ? ACTION_FEEDBACK.destructive
+          : `text-foreground ${ACTION_FEEDBACK.item}`
       )}
       onClick={onClick}
       disabled={disabled}

package/src/features/chat/features/session/components/session-header/chat-session-title-switcher.tsx

@@ -29,7 +29,7 @@ import { cn } from "@/shared/lib/utils";
 import { useProjects } from "@/shared/hooks/use-projects";
 
 const SWITCHER_TRIGGER_CLASS =
-  "group inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-md px-1.5 py-1 text-sm font-medium text-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border";
+  "group inline-flex min-w-0 max-w-full items-center gap-1.5 max-md:gap-1 rounded-md px-2 py-1 text-sm font-medium text-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border";
 
 function ChatSessionTitle({ title }: { title: string }) {
   return (

package/src/features/chat/features/workspace/components/project-files/workspace-project-files-toolbar.tsx

@@ -1,5 +1,5 @@
 import { ChevronsUp, FilePlus2, FolderPlus, MoreVertical, RefreshCw } from 'lucide-react';
-import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
+import { IconActionButton, IconActionGroup } from '@/shared/components/ui/actions/icon-action-button';
 import { ContextMenuTrigger } from '@/shared/components/ui/context-menu/context-menu';
 import { t } from '@/shared/lib/i18n';
 
@@ -26,6 +26,7 @@ export function WorkspaceProjectFilesToolbar({
       >
         {rootLabel}
       </span>
+      <IconActionGroup>
       <IconActionButton
         icon={<FilePlus2 className="h-4 w-4" />}
         label={t('chatWorkspaceNewFile')}
@@ -59,6 +60,7 @@ export function WorkspaceProjectFilesToolbar({
           size="sm"
         />
       </ContextMenuTrigger>
+      </IconActionGroup>
     </div>
   );
 }

package/src/features/cron/components/cron-config.tsx

@@ -220,6 +220,7 @@ export function CronConfig() {
   return (
     <PageLayout className="space-y-6">
       <PageHeader
+        mobileTitleInShell
         headingLevel={1}
         title={t("cronPageTitle")}
         description={t("cronPageDescription")}

package/src/features/cron/components/cron-job-row.tsx

@@ -109,10 +109,10 @@ export function CronJobRow({
         expanded && "bg-muted/35",
       )}
     >
-      <div className="flex items-center gap-3 px-1 py-3.5">
+      <div className="flex flex-wrap items-center gap-3 px-1 py-3.5">
         <button
           type="button"
-          className="grid min-w-0 flex-1 grid-cols-[36px_minmax(0,1fr)] items-center gap-3 rounded-lg pr-16 text-left focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+          className="grid min-w-0 flex-1 max-md:basis-full grid-cols-[36px_minmax(0,1fr)] items-center gap-3 rounded-lg md:pr-16 text-left focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
           aria-controls={previewId}
           aria-expanded={expanded}
           aria-label={`${t(expanded ? "cronCollapseTask" : "cronExpandTask")} ${jobLabel}`}
@@ -159,14 +159,14 @@ export function CronJobRow({
         </button>
 
         <TooltipProvider delayDuration={250}>
-          <div className="relative flex shrink-0 items-center gap-1">
+          <div className="relative flex shrink-0 items-center gap-1 max-md:ml-auto">
             <Switch
               checked={job.enabled}
               onCheckedChange={(checked) => onToggle(job, checked)}
               aria-label={job.enabled ? t("cronDisable") : t("cronEnable")}
             />
 
-            <div className="flex items-center gap-0.5 opacity-100 transition-opacity duration-150 [@media(hover:hover)]:pointer-events-none [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-focus-within:pointer-events-auto [@media(hover:hover)]:group-focus-within:opacity-100 [@media(hover:hover)]:group-hover:pointer-events-auto [@media(hover:hover)]:group-hover:opacity-100">
+            <div className="flex items-center gap-0.5 opacity-100 transition-opacity duration-150 md:[@media(hover:hover)]:pointer-events-none md:[@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-focus-within:pointer-events-auto [@media(hover:hover)]:group-focus-within:opacity-100 [@media(hover:hover)]:group-hover:pointer-events-auto [@media(hover:hover)]:group-hover:opacity-100">
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button

package/src/features/inbox/components/inbox-delivery-content.tsx

@@ -74,7 +74,7 @@ function InboxHtmlContent({
   return (
     <iframe
       className={cn(
-        "w-full rounded-xl bg-background",
+        "w-full md:rounded-xl bg-background",
         fillHeight
           ? "h-full min-h-0 border-0"
           : "h-[min(60vh,680px)] min-h-[360px] border border-border/70",

package/src/features/inbox/pages/inbox-page.tsx

@@ -2,7 +2,9 @@ import { PageResourceActionsMenu } from '@/features/right-panel-resources';
 import { pageResourceFromSystemObject } from '@/features/right-panel-resources';
 import { useEffect, useMemo, useState } from "react";
 import type { InboxDelivery } from "@nextclaw/shared";
-import { Archive, ArrowLeft, Inbox, MessageCircle, RotateCcw, Trash2 } from "lucide-react";
+import { Archive, Inbox, MessageCircle, MoreVertical, RotateCcw, Trash2 } from "lucide-react";
+import { ContextMenu, ContextMenuTrigger } from '@/shared/components/ui/context-menu/context-menu';
+import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { useAppPresenter } from "@/app/components/app-presenter-provider";
 import { PageHeader } from "@/app/components/layout/page-layout";
@@ -93,8 +95,9 @@ function InboxListPane({
             key={item.id}
             type="button"
             onClick={() => onFilterChange(item.id)}
+            aria-pressed={filter === item.id}
             className={cn(
-              "inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
+              "inline-flex min-h-11 items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border md:min-h-0 md:px-2.5 md:text-xs",
               filter === item.id
                 ? "bg-[var(--interaction-selection)] text-foreground"
                 : "text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-foreground",
@@ -122,7 +125,7 @@ function InboxListPane({
                 <Link
                   to={`/inbox/${encodeURIComponent(delivery.id)}`}
                   className={cn(
-                    "block rounded-lg px-2.5 py-2 pr-10 text-[13px] transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
+                    "block rounded-lg px-2.5 py-3 pr-12 text-sm md:py-2 md:pr-10 md:text-[13px] transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
                     activeDeliveryId === delivery.id
                       ? "text-foreground"
                       : "text-foreground/80 hover:text-foreground",
@@ -165,20 +168,16 @@ function InboxListPane({
 function InboxDetailPane({
   delivery,
   error,
-  isMobile,
   pending,
   onArchiveToggle,
-  onBack,
   onContinue,
   onDelete,
   onReadToggle,
 }: {
   delivery: InboxDelivery | null;
   error: string | null;
-  isMobile: boolean;
   pending: boolean;
   onArchiveToggle: () => void;
-  onBack: () => void;
   onContinue: () => void;
   onDelete: () => void;
   onReadToggle: () => void;
@@ -193,17 +192,7 @@ function InboxDetailPane({
   const isHtml = delivery.contentType === "html";
   return (
     <main className="flex min-h-0 flex-col">
-      <div className="shrink-0 border-b border-border/50 px-5 py-3 sm:px-6">
-        {isMobile ? (
-          <button
-            type="button"
-            onClick={onBack}
-            className="mb-3 inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
-          >
-            <ArrowLeft className="h-4 w-4" />
-            {t("inboxTitle")}
-          </button>
-        ) : null}
+      <div className="shrink-0 px-4 py-2 md:border-b md:border-border/50 md:px-6 md:py-3">
         <div className="flex min-h-7 min-w-0 items-center gap-2">
           <h2
             title={delivery.title}
@@ -223,7 +212,7 @@ function InboxDetailPane({
       <div className={cn(
         "min-h-0 flex-1",
         isHtml
-          ? "p-3 sm:p-4"
+          ? "p-0 md:p-4"
           : "custom-scrollbar overflow-y-auto px-5 py-5 sm:px-6 sm:py-6",
       )}
       ref={scrollRef}
@@ -239,10 +228,10 @@ function InboxDetailPane({
           />
         </div>
       </div>
-      <div className="shrink-0 border-t border-border/50 px-5 py-3 sm:px-6">
+      <div className="shrink-0 border-t border-border/50 px-4 py-2 md:px-6 md:py-3">
         {error ? <p role="alert" className="mb-2 text-sm text-destructive">{error}</p> : null}
-        <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-          <div className="flex flex-wrap items-center gap-1">
+        <div className="flex items-center justify-between gap-2">
+          <div className="hidden md:flex flex-wrap items-center gap-1">
             <Button size="sm" variant="outline" disabled={pending} onClick={onReadToggle}>
               {delivery.readAt ? t("inboxMarkUnread") : t("inboxMarkRead")}
             </Button>
@@ -257,6 +246,15 @@ function InboxDetailPane({
               {t("inboxDelete")}
             </Button>
           </div>
+          <div className="md:hidden">
+            <ContextMenu label={t('inboxTitle')} groups={[{ key: 'delivery', items: [
+              { key: 'read', label: delivery.readAt ? t('inboxMarkUnread') : t('inboxMarkRead'), disabled: pending, onSelect: onReadToggle },
+              { key: 'archive', label: delivery.archivedAt ? t('inboxRestore') : t('inboxArchive'), icon: <Archive className="h-4 w-4" />, disabled: pending, onSelect: onArchiveToggle },
+              { key: 'delete', label: t('inboxDelete'), icon: <Trash2 className="h-4 w-4" />, destructive: true, disabled: pending, onSelect: onDelete },
+            ] }]}>
+              <div><ContextMenuTrigger><IconActionButton icon={<MoreVertical className="h-4 w-4" />} label={t('more')} /></ContextMenuTrigger></div>
+            </ContextMenu>
+          </div>
           <Button size="sm" disabled={pending} onClick={onContinue}>
             <MessageCircle className="mr-2 h-4 w-4" />
             {t("inboxContinueChat")}
@@ -365,14 +363,14 @@ export function InboxPage() {
   const showDetail = !isMobile || Boolean(activeDelivery);
 
   return (
-    <div className="flex h-full min-h-0 flex-col gap-6">
-      <PageHeader
+    <div className="flex h-full min-h-0 flex-col md:gap-6">
+      {!isMobile ? <PageHeader
         headingLevel={1}
         title={t("inboxTitle")}
         className="px-4 sm:px-0"
-      />
+      /> : null}
 
-      <div className="min-h-0 flex-1 overflow-hidden border-y border-border/60 bg-background sm:rounded-2xl sm:border">
+      <div className="min-h-0 flex-1 overflow-hidden bg-background md:rounded-2xl md:border md:border-border/60">
         {deliveriesQuery.isError ? (
           <div role="alert" className="p-6 text-sm text-destructive">{t("inboxLoadError")}</div>
         ) : (
@@ -386,10 +384,8 @@ export function InboxPage() {
             {showDetail ? <InboxDetailPane
               delivery={activeDelivery}
               error={error}
-              isMobile={isMobile}
               pending={pendingAction !== null}
               onArchiveToggle={toggleArchive}
-              onBack={() => navigate("/inbox")}
               onContinue={continueInChat}
               onDelete={() => void deleteDelivery()}
               onReadToggle={toggleRead}

package/src/features/marketplace/components/marketplace-page-parts.tsx

@@ -7,6 +7,7 @@ import {
   SelectValue,
 } from "@/shared/components/ui/select";
 import { Skeleton } from "@/shared/components/ui/skeleton";
+import { Input } from "@/shared/components/ui/input";
 import { t } from "@/shared/lib/i18n";
 import { Loader2, PackageSearch } from "lucide-react";
 import type { Ref } from "react";
@@ -30,10 +31,10 @@ export function FilterPanel({
 }) {
   return (
     <div className="mb-4">
-      <div className="flex items-center gap-3">
+      <div className="flex flex-wrap items-center gap-3">
         <div className="relative min-w-0 flex-1">
           <PackageSearch className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
-          <input
+          <Input
             value={searchText}
             onChange={(event) => onSearchTextChange(event.target.value)}
             placeholder={searchPlaceholder}
@@ -52,7 +53,7 @@ export function FilterPanel({
             value={sort}
             onValueChange={(value) => onSortChange(value as MarketplaceSort)}
           >
-            <SelectTrigger className="h-9 w-[150px] shrink-0 rounded-lg">
+            <SelectTrigger className="h-9 w-[110px] sm:w-[150px] shrink-0 rounded-lg">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>

package/src/features/marketplace/components/marketplace-page.tsx

@@ -142,12 +142,12 @@ export function MarketplacePage({
     <PageLayout className="flex h-full min-h-0 flex-col pb-0">
       {!curatedSceneRoute.isSceneRoute && (
         <>
-          <div className="mb-3 flex items-start justify-between gap-3 border-b border-gray-200/60">
+          <div className="mb-3 flex flex-wrap items-start justify-between gap-3 border-b border-border/60">
             <Tabs
               value={scope}
               onValueChange={(value) => setScope(value as ScopeType)}
             >
-              <TabsList className="mb-0 h-auto flex-1 justify-start gap-6 rounded-none border-b-0 bg-transparent p-0 text-gray-500">
+              <TabsList className="mb-0 h-auto flex-1 justify-start gap-4 sm:gap-6 rounded-none border-b-0 bg-transparent p-0 text-muted-foreground">
                 <TabsTrigger
                   value="all"
                   className="rounded-none border-b-2 border-transparent bg-transparent px-0 pb-3 pt-0 shadow-none hover:bg-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-gray-950 data-[state=active]:shadow-none"