Style sidebar scrollbar and adjust focus

Author: JavaZeroo

src/App.jsx

@@ -188,7 +188,7 @@ function App() {
   }, [handleGlobalDragEnter, handleGlobalDragOver, handleGlobalDragLeave, handleGlobalDrop]);
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 relative page-fade-in">
+    <div className="h-screen overflow-hidden bg-gradient-to-br from-blue-50 to-indigo-100 relative page-fade-in">
       {/* 全页面拖拽覆盖层 */}
       {globalDragOver && (
         <div
@@ -243,16 +243,16 @@ function App() {
         </button>
       )}
 
-      <div className="w-full px-3 py-3">
+      <div className="w-full px-3 py-3 h-full">
 
         <main
           id="main-content"
-          className="grid grid-cols-1 xl:grid-cols-5 gap-3"
+          className="grid grid-cols-1 xl:grid-cols-5 gap-3 h-full"
           role="main"
         >
           {sidebarVisible && (
             <aside
-              className="xl:col-span-1 space-y-3 overflow-y-auto max-h-screen"
+              className="xl:col-span-1 space-y-3 overflow-y-auto max-h-screen sidebar-scroll"
               role="complementary"
               aria-label="控制面板"
             >

src/components/CollapsibleSection.jsx

@@ -9,7 +9,7 @@ export function CollapsibleSection({ title, defaultOpen = true, action = null, c
       <button
         type="button"
         onClick={() => setOpen(!open)}
-        className="w-full flex items-center justify-between p-3 focus:outline-none"
+        className="w-full flex items-center justify-between p-3"
         aria-expanded={open}
       >
         <h3 id={id} className="text-base font-semibold text-gray-800">

src/index.css

@@ -18,7 +18,7 @@
   }
 
   /* Focus styles for better keyboard navigation */
-  :focus {
+  :focus-visible {
     outline: 2px solid #3b82f6;
     outline-offset: 2px;
   }
@@ -130,11 +130,29 @@
   background-color: #dbeafe;
 }
 
+/* Sidebar scrollbar styling */
+.sidebar-scroll {
+  scrollbar-width: thin;
+}
+.sidebar-scroll::-webkit-scrollbar {
+  width: 6px;
+}
+.sidebar-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+.sidebar-scroll::-webkit-scrollbar-thumb {
+  background-color: #cbd5e1;
+  border-radius: 3px;
+}
+.sidebar-scroll::-webkit-scrollbar-thumb:hover {
+  background-color: #94a3b8;
+}
+
 /* Enhanced focus indicators for interactive elements */
-button:focus,
-input:focus,
-select:focus,
-textarea:focus {
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
   outline: 2px solid #3b82f6;
   outline-offset: 2px;
   box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
@@ -162,8 +180,8 @@ button:disabled {
 }
 
 /* Form improvements */
-input[type="radio"]:focus,
-input[type="checkbox"]:focus {
+input[type="radio"]:focus-visible,
+input[type="checkbox"]:focus-visible {
   outline: 2px solid #3b82f6;
   outline-offset: 2px;
 }