From 23c35f68f30340ba83d7c62ac2f934849d614b8c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8C=97=E6=9E=B3?=
 <7854742+wang_rumeng@user.noreply.gitee.com>
Date: Tue, 21 Oct 2025 23:13:54 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=BC=E5=AE=B9H5=E7=83=AD=E9=97=A8=E6=A8=A1?=
 =?UTF-8?q?=E6=9D=BF=E6=A0=87=E9=A2=98=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/FamousTemplate.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/FamousTemplate.tsx b/components/FamousTemplate.tsx
index 961e69a..8ec7c73 100644
--- a/components/FamousTemplate.tsx
+++ b/components/FamousTemplate.tsx
@@ -8,6 +8,7 @@ import { PcTemplateModal } from "@/components/ChatInputBox/PcTemplateModal"
 import { useTemplateStoryServiceHook } from "@/app/service/Interaction/templateStoryService"
 import { useAppDispatch } from "@/lib/store/hooks"
 import { selectTemplateById } from "@/lib/store/creationTemplateSlice"
+import { useDeviceType } from "@/hooks/useDeviceType"
 
 /**
  * A compact template showcase with a header and link to all templates.
@@ -17,6 +18,7 @@ import { selectTemplateById } from "@/lib/store/creationTemplateSlice"
 const FamousTemplate: React.FC = () => {
   const { templateStoryList, getTemplateStoryList, isLoading } = useTemplateStoryServiceHook()
   const dispatch = useAppDispatch()
+  const { isDesktop } = useDeviceType()
 
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [initialTemplateId, setInitialTemplateId] = useState<string | undefined>(undefined)
@@ -41,11 +43,11 @@ const FamousTemplate: React.FC = () => {
 
   return (
     <section data-alt="famous-template" className="w-full">
-      <div data-alt="famous-template-header" className="mb-4 flex items-center">
+      <div data-alt="famous-template-header" className={`mb-4 items-center ${isDesktop ? 'flex' : 'block'}`}>
         <h2 data-alt="famous-template-title" className="text-xl py-4 font-semibold text-white">
           Hot Templates
         </h2>
-        <div data-alt="template-tabs" className="flex flex-wrap items-center gap-2 ml-4">
+        <div data-alt="template-tabs" className={`flex flex-wrap items-center gap-2 ${isDesktop ? 'ml-4' : 'ml-0'}`}>
           {(["all", "music", "animation", "fantasy"] as const).map((tab) => (
             <button
               key={tab}