diff --git a/components/settings/AccountSettings.tsx b/components/settings/AccountSettings.tsx
index a55cdfe..4d7592e 100644
--- a/components/settings/AccountSettings.tsx
+++ b/components/settings/AccountSettings.tsx
@@ -51,7 +51,7 @@ export function AccountSettings() {
     fetch('/api/auth')
       .then(res => res.json())
       .then(data => setHasAuth(data.hasAuth))
-      .catch(() => {});
+      .catch(() => { });
 
     // Fetch account list for admins
     fetch('/api/auth/accounts')
@@ -60,7 +60,7 @@ export function AccountSettings() {
         if (data.accounts) setAccounts(data.accounts);
         if (data.hasAdminPassword) setHasAdminPassword(data.hasAdminPassword);
       })
-      .catch(() => {});
+      .catch(() => { });
   }, []);
 
   const handleLogout = () => {
@@ -173,7 +173,7 @@ export function AccountSettings() {
               </div>
             </div>
 
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-2 flex-wrap">
               <button
                 onClick={handleLogout}
                 className="flex items-center gap-2 px-3 py-1.5 text-sm bg-[var(--glass-bg)] border border-[var(--glass-border)] rounded-[var(--radius-full)] text-[var(--text-color-secondary)] hover:text-red-500 hover:border-red-500/30 transition-all duration-200 cursor-pointer"
@@ -206,12 +206,11 @@ export function AccountSettings() {
                       </div>
                       <span className="text-sm text-[var(--text-color)]">{account.name}</span>
                     </div>
-                    <div className="flex items-center gap-2">
-                      <span className={`text-xs px-2 py-0.5 rounded-[var(--radius-full)] ${
-                        account.role === 'super_admin' || account.role === 'admin'
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <span className={`text-xs px-2 py-0.5 rounded-[var(--radius-full)] ${account.role === 'super_admin' || account.role === 'admin'
                           ? 'bg-[var(--accent-color)]/10 text-[var(--accent-color)]'
                           : 'bg-[var(--glass-bg)] text-[var(--text-color-secondary)] border border-[var(--glass-border)]'
-                      }`}>
+                        }`}>
                         {account.role === 'super_admin' ? '超级管理员' : account.role === 'admin' ? '管理员' : '观众'}
                       </span>
                       <button
@@ -233,7 +232,7 @@ export function AccountSettings() {
                 <p className="text-xs text-amber-400">
                   已标记移除 {removedAccounts.size} 个账户。请使用下方配置生成器生成新的 <code className="px-1 py-0.5 bg-black/20 rounded text-[10px]">ACCOUNTS</code> 环境变量值并更新部署配置。
                 </p>
-                <div className="flex gap-2 mt-2">
+                <div className="flex gap-2 mt-2 flex-wrap">
                   <button
                     onClick={loadExistingAccounts}
                     className="text-xs px-3 py-1 bg-amber-500/20 hover:bg-amber-500/30 text-amber-400 rounded-[var(--radius-2xl)] transition-colors cursor-pointer"
@@ -293,15 +292,14 @@ export function AccountSettings() {
                 {configEntries.map((entry, index) => (
                   <div key={index} className="flex gap-2 items-start">
                     <div className="flex-1 space-y-2">
-                      <div className="flex gap-2">
+                      <div className="flex gap-2 flex-wrap">
                         <input
                           type="text"
                           placeholder="密码"
                           value={entry.password}
                           onChange={(e) => updateConfigEntry(index, 'password', e.target.value)}
-                          className={`flex-1 px-3 py-1.5 bg-[var(--glass-bg)] border rounded-[var(--radius-2xl)] text-sm text-[var(--text-color)] placeholder:text-[var(--text-color-secondary)]/50 focus:outline-none focus:border-[var(--accent-color)] ${
-                            !entry.password && entry.name ? 'border-amber-500/50' : 'border-[var(--glass-border)]'
-                          }`}
+                          className={`flex-1 px-3 py-1.5 bg-[var(--glass-bg)] border rounded-[var(--radius-2xl)] text-sm text-[var(--text-color)] placeholder:text-[var(--text-color-secondary)]/50 focus:outline-none focus:border-[var(--accent-color)] ${!entry.password && entry.name ? 'border-amber-500/50' : 'border-[var(--glass-border)]'
+                            }`}
                         />
                         <input
                           type="text"
@@ -368,7 +366,7 @@ export function AccountSettings() {
                     <label className="text-xs font-medium text-[var(--text-color)]">
                       生成的 ACCOUNTS 值：
                     </label>
-                    <div className="flex gap-2">
+                    <div className="flex gap-2 flex-wrap">
                       <code className="flex-1 px-3 py-2 bg-black/20 border border-[var(--glass-border)] rounded-[var(--radius-2xl)] text-xs text-[var(--text-color)] break-all select-all">
                         {generateAccountsString()}
                       </code>
diff --git a/components/settings/ExportModal.tsx b/components/settings/ExportModal.tsx
index cf04338..045413d 100644
--- a/components/settings/ExportModal.tsx
+++ b/components/settings/ExportModal.tsx
@@ -30,19 +30,17 @@ export function ExportModal({ isOpen, onClose, onExport }: ExportModalProps) {
     <>
       {/* Backdrop */}
       <div
-        className={`fixed inset-0 z-[9998] bg-black/30 backdrop-blur-md transition-opacity duration-300 ${
-          isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
-        }`}
+        className={`fixed inset-0 z-[9998] bg-black/30 backdrop-blur-md transition-opacity duration-300 ${isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
+          }`}
         onClick={onClose}
       />
 
       {/* Modal */}
       <div
-        className={`fixed top-1/2 left-1/2 z-[9999] w-[90%] max-w-md -translate-x-1/2 transition-all duration-300 ${
-          isOpen 
-            ? 'opacity-100 -translate-y-1/2 scale-100' 
+        className={`fixed top-1/2 left-1/2 z-[9999] w-[90%] max-w-md -translate-x-1/2 transition-all duration-300 ${isOpen
+            ? 'opacity-100 -translate-y-1/2 scale-100'
             : 'opacity-0 -translate-y-[40%] scale-95 pointer-events-none'
-        }`}
+          }`}
       >
         <div className="bg-[var(--glass-bg)] backdrop-blur-xl border border-[var(--glass-border)] rounded-[var(--radius-2xl)] shadow-[var(--shadow-md)] p-6">
           <div className="flex items-center justify-between mb-6">
@@ -55,7 +53,7 @@ export function ExportModal({ isOpen, onClose, onExport }: ExportModalProps) {
               aria-label="关闭"
             >
               <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <path d="M18 6L6 18M6 6l12 12"/>
+                <path d="M18 6L6 18M6 6l12 12" />
               </svg>
             </button>
           </div>
@@ -73,14 +71,13 @@ export function ExportModal({ isOpen, onClose, onExport }: ExportModalProps) {
                 onChange={(e) => setIncludeSearchHistory(e.target.checked)}
                 className="hidden"
               />
-              <div className={`w-6 h-6 rounded-[0.6rem] border-2 flex items-center justify-center transition-all duration-200 ${
-                includeSearchHistory 
-                  ? 'bg-[var(--accent-color)] border-[var(--accent-color)]' 
+              <div className={`w-6 h-6 rounded-[0.6rem] border-2 flex items-center justify-center transition-all duration-200 ${includeSearchHistory
+                  ? 'bg-[var(--accent-color)] border-[var(--accent-color)]'
                   : 'border-[var(--text-color-secondary)]'
-              }`}>
+                }`}>
                 {includeSearchHistory && (
                   <svg className="w-4 h-4 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
-                    <path d="M20 6L9 17l-5-5"/>
+                    <path d="M20 6L9 17l-5-5" />
                   </svg>
                 )}
               </div>
@@ -95,14 +92,13 @@ export function ExportModal({ isOpen, onClose, onExport }: ExportModalProps) {
                 onChange={(e) => setIncludeWatchHistory(e.target.checked)}
                 className="hidden"
               />
-              <div className={`w-6 h-6 rounded-[0.6rem] border-2 flex items-center justify-center transition-all duration-200 ${
-                includeWatchHistory 
-                  ? 'bg-[var(--accent-color)] border-[var(--accent-color)]' 
+              <div className={`w-6 h-6 rounded-[0.6rem] border-2 flex items-center justify-center transition-all duration-200 ${includeWatchHistory
+                  ? 'bg-[var(--accent-color)] border-[var(--accent-color)]'
                   : 'border-[var(--text-color-secondary)]'
-              }`}>
+                }`}>
                 {includeWatchHistory && (
                   <svg className="w-4 h-4 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
-                    <path d="M20 6L9 17l-5-5"/>
+                    <path d="M20 6L9 17l-5-5" />
                   </svg>
                 )}
               </div>
@@ -114,7 +110,7 @@ export function ExportModal({ isOpen, onClose, onExport }: ExportModalProps) {
             </div>
           </div>
 
-          <div className="flex gap-3">
+          <div className="flex gap-3 flex-wrap">
             <button
               onClick={onClose}
               className="flex-1 px-6 py-3 rounded-[var(--radius-2xl)] bg-[var(--glass-bg)] border border-[var(--glass-border)] text-[var(--text-color)] font-semibold hover:bg-[color-mix(in_srgb,var(--text-color)_10%,transparent)] transition-all duration-200"
diff --git a/components/settings/PremiumSourceSettings.tsx b/components/settings/PremiumSourceSettings.tsx
index 2e3bfe4..3a237c0 100644
--- a/components/settings/PremiumSourceSettings.tsx
+++ b/components/settings/PremiumSourceSettings.tsx
@@ -61,7 +61,7 @@ export function PremiumSourceSettings({
         <div className="bg-[var(--glass-bg)] border border-[var(--glass-border)] rounded-[var(--radius-2xl)] shadow-[var(--shadow-sm)] p-6 mb-6">
             <div className="flex items-center justify-between mb-4">
                 <h2 className="text-xl font-semibold text-[var(--text-color)]">高级源管理</h2>
-                <div className="flex gap-2">
+                <div className="flex gap-2 flex-wrap">
                     <button
                         onClick={onRestoreDefaults}
                         className="px-4 py-2 rounded-[var(--radius-2xl)] bg-[var(--glass-bg)] border border-[var(--glass-border)] text-[var(--text-color)] text-sm font-medium hover:bg-[color-mix(in_srgb,var(--accent-color)_10%,transparent)] transition-all duration-200 cursor-pointer"
diff --git a/components/settings/UserSourceSettings.tsx b/components/settings/UserSourceSettings.tsx
index 431b9d9..983355b 100644
--- a/components/settings/UserSourceSettings.tsx
+++ b/components/settings/UserSourceSettings.tsx
@@ -53,7 +53,7 @@ export function UserSourceSettings() {
       <div className="space-y-4">
         {/* Add form */}
         <form onSubmit={handleAdd} className="space-y-3">
-          <div className="flex gap-2">
+          <div className="flex gap-2 flex-wrap">
             <input
               type="text"
               placeholder="源名称"
@@ -92,13 +92,11 @@ export function UserSourceSettings() {
                 <div className="flex items-center gap-3 min-w-0">
                   <button
                     onClick={() => userSourcesStore.toggleSource(source.id)}
-                    className={`w-8 h-5 rounded-full transition-colors cursor-pointer relative flex-shrink-0 ${
-                      source.enabled !== false ? 'bg-[var(--accent-color)]' : 'bg-[var(--glass-border)]'
-                    }`}
+                    className={`w-8 h-5 rounded-full transition-colors cursor-pointer relative flex-shrink-0 ${source.enabled !== false ? 'bg-[var(--accent-color)]' : 'bg-[var(--glass-border)]'
+                      }`}
                   >
-                    <span className={`absolute top-0.5 w-4 h-4 bg-white rounded-full transition-transform shadow-sm ${
-                      source.enabled !== false ? 'left-3.5' : 'left-0.5'
-                    }`} />
+                    <span className={`absolute top-0.5 w-4 h-4 bg-white rounded-full transition-transform shadow-sm ${source.enabled !== false ? 'left-3.5' : 'left-0.5'
+                      }`} />
                   </button>
                   <div className="min-w-0">
                     <p className="text-sm font-medium text-[var(--text-color)] truncate">{source.name}</p>
diff --git a/components/settings/import/JsonImportTab.tsx b/components/settings/import/JsonImportTab.tsx
index 5c032a9..763d3d8 100644
--- a/components/settings/import/JsonImportTab.tsx
+++ b/components/settings/import/JsonImportTab.tsx
@@ -116,7 +116,7 @@ export function JsonImportTab() {
               ))}
             </div>
           </div>
-          <div className="flex gap-2">
+          <div className="flex gap-2 flex-wrap">
             <button
               onClick={() => { setPreview(null); }}
               className="flex-1 px-4 py-2 bg-[var(--glass-bg)] border border-[var(--glass-border)] text-[var(--text-color)] rounded-[var(--radius-2xl)] text-sm hover:bg-[var(--glass-hover)] transition-all cursor-pointer"
diff --git a/components/settings/import/LinkImportTab.tsx b/components/settings/import/LinkImportTab.tsx
index 16e7933..1118c36 100644
--- a/components/settings/import/LinkImportTab.tsx
+++ b/components/settings/import/LinkImportTab.tsx
@@ -58,7 +58,7 @@ export function LinkImportTab({ onImport }: LinkImportTabProps) {
                 <label className="block text-sm font-medium text-[var(--text-color)] mb-2">
                     源配置链接
                 </label>
-                <div className="flex gap-2">
+                <div className="flex gap-2 flex-wrap">
                     <input
                         type="url"
                         value={url}
diff --git a/components/settings/import/SubscriptionImportTab.tsx b/components/settings/import/SubscriptionImportTab.tsx
index 161e2be..1f117d2 100644
--- a/components/settings/import/SubscriptionImportTab.tsx
+++ b/components/settings/import/SubscriptionImportTab.tsx
@@ -79,7 +79,7 @@ export function SubscriptionImportTab({
                             onKeyDown={handleAddKeydown}
                             className="w-full bg-[color-mix(in_srgb,var(--bg-color)_50%,transparent)] border border-[var(--glass-border)] rounded-[var(--radius-2xl)] px-4 py-2 text-[var(--text-color)] placeholder:text-[var(--text-color-secondary)] focus:outline-none focus:border-[var(--accent-color)]"
                         />
-                        <div className="flex gap-2">
+                        <div className="flex gap-2 flex-wrap">
                             <input
                                 type="url"
                                 value={url}
diff --git a/package-lock.json b/package-lock.json
index 8bc28c0..ed35ca3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "kvideo",
-  "version": "4.4.6",
+  "version": "4.4.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "kvideo",
-      "version": "4.4.6",
+      "version": "4.4.7",
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",
diff --git a/package.json b/package.json
index ca40275..e35a4df 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kvideo",
-  "version": "4.4.6",
+  "version": "4.4.7",
   "private": true,
   "scripts": {
     "dev": "next dev",