Enhance styling and structure of ChatInputBox and PcTemplateModal components; add custom scrollbar styles and improve layout responsiveness.

app/globals.css

@@ -307,6 +307,39 @@ body {
   }
 }
 
-.mobile-textarea, .mobile-input {
+.mobile-textarea,
+.mobile-input {
   font-size: 16px !important;
 }
+
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+.custom-scrollbar:hover {
+  scrollbar-color: rgba(156, 163, 175, 0.2) rgba(0, 0, 0, 0);
+}
+
+/* Webkit browsers (Chrome, Safari) */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 3px;
+}
+
+.custom-scrollbar:hover::-webkit-scrollbar-thumb {
+  background: rgba(156, 163, 175, 0.5);
+}
+
+.custom-scrollbar:hover::-webkit-scrollbar-thumb:hover {
+  background: rgba(156, 163, 175, 0.7);
+}

components/ChatInputBox/H5TemplateDrawer.tsx

@@ -570,7 +570,7 @@ export const H5TemplateDrawer = ({
               data-alt="items-section-title"
               className="text-base font-semibold text-white mb-3"
             >
-              input Configuration
+              Input Configuration
             </h3>
             <textarea
               data-alt="h5-template-free-input-top"

components/ChatInputBox/PcTemplateModal.tsx

@@ -284,9 +284,9 @@ export const PcTemplateModal = ({
   // 故事编辑器渲染
   const storyEditorRender = () => {
     return selectedTemplate ? (
-      <div className="relative h-full">
+      <div className="h-full flex flex-col overflow-hidden">
         {/* 模板信息头部 - 增加顶部空间 */}
-        <div className="flex gap-3 py-4 border-b border-white/[0.1] h-[300px]">
+        <div className="flex gap-3 py-4 border-b border-white/[0.1] max-h-[300px]">
           {/* 左侧图片 */}
           <div className="w-1/4">
             <Image
@@ -321,13 +321,14 @@ export const PcTemplateModal = ({
           </div>
         </div>
 
+        <div className="flex-1 overflow-y-auto custom-scrollbar">
           {/* 角色配置区域 */}
           {selectedTemplate?.storyRole &&
             selectedTemplate.storyRole.length > 0 && (
               <div className="pt-2 border-t border-white/10">
                 <h3
                   data-alt="roles-section-title"
-                className="text-lg font-semibold text-white mb-4"
+                  className="text-lg font-semibold text-white mb-2"
                 >
                   Character Configuration
                 </h3>
@@ -702,20 +703,18 @@ export const PcTemplateModal = ({
 
           {/** 自由输入文字 */}
           {freeInputLayout === 'top' && selectedTemplate?.freeInput && selectedTemplate.freeInput.length > 0 && (
-          <div className="py-2 flex-1 flex flex-col" style={{
-            height: 'calc(70vh - 300px - 8rem)'
-          }}>
+            <div className="pt-2 pb-6 h-full flex flex-col">
               <h3
                 data-alt="items-section-title"
-              className="text-lg font-semibold text-white mb-4"
+                className="text-lg font-semibold text-white mb-2"
               >
-              input Configuration
+                Input Configuration
               </h3>
               <textarea
                 data-alt="pc-template-free-input-top"
                 value={selectedTemplate?.freeInput[0].free_input_text || ""}
                 placeholder={selectedTemplate?.freeInput[0].user_tips || ""}
-              className="w-full flex-1 px-3 py-2 pr-16 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm"
+                className="w-full min-h-[50px] max-h-[150px] flex-1 px-3 py-2 pr-16 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm"
                 onChange={(e) => {
                   // 更新自由输入文字字段
                   const updatedTemplate = {
@@ -730,6 +729,7 @@ export const PcTemplateModal = ({
               />
             </div>
           )}
+        </div>
 
         <div className=" absolute -bottom-8 right-0 w-full flex items-center justify-end gap-2">
           {/** 自由输入文字 */}
@@ -813,7 +813,7 @@ export const PcTemplateModal = ({
 
             <div className="flex gap-4 pb-8  flex-1 overflow-y-hidden">
               {templateListRender()}
-              <div className="flex-1">{storyEditorRender()}</div>
+              <div className="flex-1 relative">{storyEditorRender()}</div>
             </div>
           </div>
         </GlobalLoad>

components/script-renderer/ScriptRenderer.tsx

@@ -177,13 +177,13 @@ export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPause
             {addThemeTag.map((item, index) => (
               <div key={index} className={`flex items-center gap-1 px-2 rounded-full ${Object.values(ThemeTagBgColor)[index]}`}>
                 <span className={`text-sm px-2 py-1 rounded-md`}>{item}</span>
-                <X className="w-4 h-4 cursor-pointer text-blue-500/80" onClick={() =>
+                {/* <X className="w-4 h-4 cursor-pointer text-blue-500/80" onClick={() =>
                   handleThemeTagChange(addThemeTag.filter(v => v !== item))
-                } />
+                } /> */}
               </div>
             ))}
             {/* 主题标签更改 */}
-            <div className='flex items-center gap-1'>
+            {/* <div className='flex items-center gap-1'>
               <div className='w-[10rem]'>
                 <SelectDropdown
                   dropdownId="theme-type"
@@ -197,7 +197,7 @@ export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPause
                   }}
                 />
               </div>
-            </div>
+            </div> */}
           </div>
         )
       default:
@@ -212,7 +212,7 @@ export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPause
                   animate={{ opacity: 1, y: 0 }}
                   exit={{ opacity: 0, y: -10 }}
                 >
-                  <SquarePen
+                  {/* <SquarePen
                     className="w-6 h-6 p-1 cursor-pointer text-gray-600 hover:text-blue-500 transition-colors"
                     onClick={() => {
                       // 提示权限不够
@@ -220,7 +220,7 @@ export const ScriptRenderer: React.FC<ScriptRendererProps> = ({ data, setIsPause
                       return;
                       handleEditBlock(block);
                     }}
-                  />
+                  /> */}
                   <Copy
                     className="w-6 h-6 p-1 cursor-pointer text-gray-600 hover:text-blue-500 transition-colors"
                     onClick={() => {