From 4ee5d5acdd193a54078dfc0bcd078733aedd96bc Mon Sep 17 00:00:00 2001
From: Qi Yijiazhen <80535058+KiwiGaze@users.noreply.github.com>
Date: Fri, 22 May 2026 09:19:41 +0800
Subject: [PATCH] fix(skills): improve mobile skill readability (#2973)

---
 .../views/skills/components/file-viewer.tsx   |  4 +-
 .../skills/components/skill-detail-page.tsx   | 17 ++---
 .../views/skills/components/skills-page.tsx   | 62 ++++++++++---------
 3 files changed, 44 insertions(+), 39 deletions(-)

diff --git a/packages/views/skills/components/file-viewer.tsx b/packages/views/skills/components/file-viewer.tsx
index 8eaf9b8ee..26fcc17e1 100644
--- a/packages/views/skills/components/file-viewer.tsx
+++ b/packages/views/skills/components/file-viewer.tsx
@@ -100,7 +100,7 @@ export function FileViewer({
   return (
     <div className="flex h-full flex-col">
       {/* File header */}
-      <div className="flex h-10 items-center justify-between border-b px-4">
+      <div className="flex h-10 items-center justify-between gap-3 border-b px-4">
         <span className="text-xs font-mono text-muted-foreground truncate">
           {path}
         </span>
@@ -136,7 +136,7 @@ export function FileViewer({
       {/* File content */}
       <div className="flex-1 min-h-0 overflow-y-auto">
         {isMd && !editing ? (
-          <div className="p-6">
+          <div className="p-4 sm:p-6">
             {frontmatter && <FrontmatterCard data={frontmatter} />}
             <Markdown mode="full">
               {body || t(($) => $.file_viewer.no_content)}
diff --git a/packages/views/skills/components/skill-detail-page.tsx b/packages/views/skills/components/skill-detail-page.tsx
index ba10eba7c..e67b365d2 100644
--- a/packages/views/skills/components/skill-detail-page.tsx
+++ b/packages/views/skills/components/skill-detail-page.tsx
@@ -510,6 +510,7 @@ export function SkillDetailPage({ skillId }: { skillId: string }) {
             variant="ghost"
             size="xs"
             render={<AppLink href={paths.skills()} />}
+            nativeButton={false}
           >
             <ArrowLeft className="h-3 w-3" />
             {t(($) => $.detail.all_skills)}
@@ -556,11 +557,13 @@ export function SkillDetailPage({ skillId }: { skillId: string }) {
           variant="ghost"
           size="xs"
           render={<AppLink href={paths.skills()} />}
+          nativeButton={false}
+          className="shrink-0"
         >
           <ArrowLeft className="h-3 w-3" />
           {t(($) => $.detail.all_skills)}
         </Button>
-        <ChevronRight className="h-3 w-3 text-muted-foreground" />
+        <ChevronRight className="h-3 w-3 shrink-0 text-muted-foreground" />
         <span className="truncate font-mono text-xs text-foreground">
           {skill.name}
         </span>
@@ -613,9 +616,9 @@ export function SkillDetailPage({ skillId }: { skillId: string }) {
       )}
 
       {/* Body: file tree | editor | sidebar */}
-      <div className="flex flex-1 min-h-0">
+      <div className="flex flex-1 min-h-0 flex-col overflow-y-auto md:flex-row md:overflow-hidden">
         {/* File tree */}
-        <aside className="flex w-56 shrink-0 flex-col border-r">
+        <aside className="flex max-h-44 w-full shrink-0 flex-col border-b md:max-h-none md:w-56 md:border-b-0 md:border-r">
           <div className="flex h-10 shrink-0 items-center justify-between border-b px-3">
             <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
               {t(($) => $.detail.files_label, { count: totalFileCount(skill) })}
@@ -671,9 +674,9 @@ export function SkillDetailPage({ skillId }: { skillId: string }) {
         </aside>
 
         {/* Editor */}
-        <section className="flex min-w-0 flex-1 flex-col">
+        <section className="flex min-h-[32rem] min-w-0 shrink-0 flex-col md:min-h-0 md:flex-1 md:shrink">
           {/* Name + description + subline */}
-          <div className="space-y-2 border-b px-5 py-4">
+          <div className="space-y-2 border-b px-4 py-4 sm:px-5">
             <Input
               value={name}
               readOnly={!canEdit}
@@ -770,7 +773,7 @@ export function SkillDetailPage({ skillId }: { skillId: string }) {
             <div
               role="status"
               aria-live="polite"
-              className="flex items-center gap-2 border-t bg-muted/30 px-4 py-2"
+              className="flex flex-wrap items-center gap-2 border-t bg-muted/30 px-4 py-2"
             >
               <span className="h-1.5 w-1.5 rounded-full bg-brand" />
               <span className="text-xs text-muted-foreground">
@@ -809,7 +812,7 @@ export function SkillDetailPage({ skillId }: { skillId: string }) {
         </section>
 
         {/* Sidebar */}
-        <aside className="flex w-72 shrink-0 flex-col gap-4 overflow-y-auto border-l bg-muted/20 px-4 py-4">
+        <aside className="flex w-full shrink-0 flex-col gap-4 border-t bg-muted/20 px-4 py-4 md:w-72 md:overflow-y-auto md:border-l md:border-t-0">
           <div>
             <h3 className="mb-2 text-xs font-medium uppercase tracking-wider text-muted-foreground">
               {t(($) => $.detail.sidebar.metadata)}
diff --git a/packages/views/skills/components/skills-page.tsx b/packages/views/skills/components/skills-page.tsx
index e7c615f0e..9ce9763ff 100644
--- a/packages/views/skills/components/skills-page.tsx
+++ b/packages/views/skills/components/skills-page.tsx
@@ -107,39 +107,41 @@ function CardToolbar({
 }) {
   const { t } = useT("skills");
   return (
-    <div className="flex h-12 shrink-0 items-center gap-2 border-b px-4">
-      <div className="relative">
+    <div className="flex h-auto shrink-0 flex-col gap-2 border-b px-3 py-3 sm:h-12 sm:flex-row sm:items-center sm:px-4 sm:py-0">
+      <div className="relative w-full sm:w-auto">
         <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
         <Input
           value={search}
           onChange={(e) => setSearch(e.target.value)}
           placeholder={t(($) => $.page.search_placeholder)}
-          className="h-8 w-64 pl-8 text-sm"
+          className="h-8 w-full pl-8 text-sm sm:w-64"
         />
       </div>
-      {SCOPE_KEYS.map((scope) => (
-        <Tooltip key={scope}>
-          <TooltipTrigger
-            render={
-              <Button
-                variant="outline"
-                size="sm"
-                className={
-                  filter === scope
-                    ? "bg-accent text-accent-foreground hover:bg-accent/80"
-                    : "text-muted-foreground"
-                }
-                onClick={() => setFilter(scope)}
-              >
-                {t(($) => $.page.scopes[scope].label)}
-              </Button>
-            }
-          />
-          <TooltipContent side="bottom">
-            {t(($) => $.page.scopes[scope].description)}
-          </TooltipContent>
-        </Tooltip>
-      ))}
+      <div className="-mx-1 flex gap-2 overflow-x-auto px-1 pb-1 sm:mx-0 sm:overflow-visible sm:px-0 sm:pb-0">
+        {SCOPE_KEYS.map((scope) => (
+          <Tooltip key={scope}>
+            <TooltipTrigger
+              render={
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className={
+                    filter === scope
+                      ? "shrink-0 bg-accent text-accent-foreground hover:bg-accent/80"
+                      : "shrink-0 text-muted-foreground"
+                  }
+                  onClick={() => setFilter(scope)}
+                >
+                  {t(($) => $.page.scopes[scope].label)}
+                </Button>
+              }
+            />
+            <TooltipContent side="bottom">
+              {t(($) => $.page.scopes[scope].description)}
+            </TooltipContent>
+          </Tooltip>
+        ))}
+      </div>
     </div>
   );
 }
@@ -285,14 +287,14 @@ export default function SkillsPage() {
     return (
       <div className="flex flex-1 min-h-0 flex-col">
         <PageHeaderBar totalCount={0} onCreate={() => setCreateOpen(true)} />
-        <div className="flex flex-1 min-h-0 flex-col gap-4 p-6">
+        <div className="flex flex-1 min-h-0 flex-col gap-4 p-3 sm:p-6">
           <div className="space-y-3 pl-4">
             <Skeleton className="h-5 w-full max-w-2xl rounded-md" />
             <Skeleton className="h-14 w-full max-w-3xl rounded-md" />
           </div>
           <div className="flex flex-1 min-h-0 flex-col overflow-hidden rounded-lg border">
-            <div className="flex h-12 shrink-0 items-center gap-2 border-b px-4">
-              <Skeleton className="h-8 w-64 rounded-md" />
+            <div className="flex h-auto shrink-0 flex-col gap-2 border-b px-3 py-3 sm:h-12 sm:flex-row sm:items-center sm:px-4 sm:py-0">
+              <Skeleton className="h-8 w-full rounded-md sm:w-64" />
               <Skeleton className="h-7 w-12 rounded-md" />
               <Skeleton className="h-7 w-14 rounded-md" />
               <Skeleton className="h-7 w-16 rounded-md" />
@@ -360,7 +362,7 @@ export default function SkillsPage() {
         </div>
       )}
 
-      <div className="flex flex-1 min-h-0 flex-col gap-4 p-6">
+      <div className="flex flex-1 min-h-0 flex-col gap-4 p-3 sm:p-6">
         {!showEmpty && (
           <div className="max-w-3xl rounded-r-md border-l-2 border-l-brand bg-brand/5 px-4 py-3 text-xs leading-relaxed text-muted-foreground">
             <span className="font-medium text-foreground">