From d59b5af38c8be21910b96fd6e00e1a816e8886b4 Mon Sep 17 00:00:00 2001
From: kuekhaoyang <kuekhaoyang@Gmail.com>
Date: Thu, 19 Feb 2026 21:57:22 +0800
Subject: [PATCH] refactor: improve UI responsiveness in settings components
 and refactor scrollbar hiding class.

---
 app/styles/base.css                           |  6 +++--
 components/settings/SourceSettings.tsx        |  2 +-
 components/settings/UserDanmakuSettings.tsx   | 22 ++++++++-----------
 .../settings/import/ImportModalTabs.tsx       |  2 +-
 package-lock.json                             |  4 ++--
 package.json                                  |  2 +-
 6 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index 1ea013b..027aa69 100644
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -94,12 +94,14 @@ select:focus-visible {
     border-width: 0;
 }
 
-.scrollbar-hide {
+.scrollbar-hide,
+.no-scrollbar {
     -ms-overflow-style: none;
     scrollbar-width: none;
 }
 
-.scrollbar-hide::-webkit-scrollbar {
+.scrollbar-hide::-webkit-scrollbar,
+.no-scrollbar::-webkit-scrollbar {
     display: none;
 }
 
diff --git a/components/settings/SourceSettings.tsx b/components/settings/SourceSettings.tsx
index e0e32f6..573dbeb 100644
--- a/components/settings/SourceSettings.tsx
+++ b/components/settings/SourceSettings.tsx
@@ -61,7 +61,7 @@ export function SourceSettings({
         <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/UserDanmakuSettings.tsx b/components/settings/UserDanmakuSettings.tsx
index 392a99f..3b73bd0 100644
--- a/components/settings/UserDanmakuSettings.tsx
+++ b/components/settings/UserDanmakuSettings.tsx
@@ -56,7 +56,7 @@ export function UserDanmakuSettings() {
       <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="API 名称"
@@ -89,13 +89,11 @@ export function UserDanmakuSettings() {
           {/* System default option */}
           <button
             onClick={() => userSourcesStore.setActiveDanmakuApi(null)}
-            className={`w-full flex items-center gap-3 px-4 py-2.5 bg-[var(--glass-bg)] border rounded-[var(--radius-2xl)] text-left transition-all cursor-pointer ${
-              activeId === null ? 'border-[var(--accent-color)] bg-[color-mix(in_srgb,var(--accent-color)_5%,transparent)]' : 'border-[var(--glass-border)]'
-            }`}
+            className={`w-full flex items-center gap-3 px-4 py-2.5 bg-[var(--glass-bg)] border rounded-[var(--radius-2xl)] text-left transition-all cursor-pointer ${activeId === null ? 'border-[var(--accent-color)] bg-[color-mix(in_srgb,var(--accent-color)_5%,transparent)]' : 'border-[var(--glass-border)]'
+              }`}
           >
-            <span className={`w-4 h-4 rounded-full border-2 flex items-center justify-center flex-shrink-0 ${
-              activeId === null ? 'border-[var(--accent-color)]' : 'border-[var(--glass-border)]'
-            }`}>
+            <span className={`w-4 h-4 rounded-full border-2 flex items-center justify-center flex-shrink-0 ${activeId === null ? 'border-[var(--accent-color)]' : 'border-[var(--glass-border)]'
+              }`}>
               {activeId === null && <span className="w-2 h-2 rounded-full bg-[var(--accent-color)]" />}
             </span>
             <div className="min-w-0">
@@ -112,16 +110,14 @@ export function UserDanmakuSettings() {
           </button>
 
           {apis.map(api => (
-            <div key={api.id} className={`flex items-center gap-3 px-4 py-2.5 bg-[var(--glass-bg)] border rounded-[var(--radius-2xl)] ${
-              activeId === api.id ? 'border-[var(--accent-color)] bg-[color-mix(in_srgb,var(--accent-color)_5%,transparent)]' : 'border-[var(--glass-border)]'
-            }`}>
+            <div key={api.id} className={`flex items-center gap-3 px-4 py-2.5 bg-[var(--glass-bg)] border rounded-[var(--radius-2xl)] ${activeId === api.id ? 'border-[var(--accent-color)] bg-[color-mix(in_srgb,var(--accent-color)_5%,transparent)]' : 'border-[var(--glass-border)]'
+              }`}>
               <button
                 onClick={() => userSourcesStore.setActiveDanmakuApi(api.id)}
                 className="flex items-center gap-3 flex-1 min-w-0 text-left cursor-pointer"
               >
-                <span className={`w-4 h-4 rounded-full border-2 flex items-center justify-center flex-shrink-0 ${
-                  activeId === api.id ? 'border-[var(--accent-color)]' : 'border-[var(--glass-border)]'
-                }`}>
+                <span className={`w-4 h-4 rounded-full border-2 flex items-center justify-center flex-shrink-0 ${activeId === api.id ? 'border-[var(--accent-color)]' : 'border-[var(--glass-border)]'
+                  }`}>
                   {activeId === api.id && <span className="w-2 h-2 rounded-full bg-[var(--accent-color)]" />}
                 </span>
                 <div className="min-w-0">
diff --git a/components/settings/import/ImportModalTabs.tsx b/components/settings/import/ImportModalTabs.tsx
index 65b29d0..e14f5ff 100644
--- a/components/settings/import/ImportModalTabs.tsx
+++ b/components/settings/import/ImportModalTabs.tsx
@@ -15,7 +15,7 @@ export function ImportModalTabs({ activeTab, onTabChange }: ImportModalTabsProps
 
     return (
         <div className="relative mb-6">
-            <div className="flex border-b border-[var(--glass-border)] relative overflow-x-auto whitespace-nowrap scrollbar-hide w-full">
+            <div className="flex border-b border-[var(--glass-border)] relative overflow-x-auto whitespace-nowrap no-scrollbar w-full">
                 {tabs.map((tab) => (
                     <button
                         key={tab.id}
diff --git a/package-lock.json b/package-lock.json
index f2ae524..8bc28c0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "kvideo",
-  "version": "4.4.5",
+  "version": "4.4.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "kvideo",
-      "version": "4.4.5",
+      "version": "4.4.6",
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",
diff --git a/package.json b/package.json
index 29030d7..ca40275 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kvideo",
-  "version": "4.4.5",
+  "version": "4.4.6",
   "private": true,
   "scripts": {
     "dev": "next dev",