修复侧边栏滚动容器结构:防止状态栏被挤掉并显示滚动条
- 采用与主文件网格相同的滚动容器模式:外层relative overflow-hidden + 内层absolute inset-0 - 修复侧边栏内容过多时挤压底部状态栏的问题 - 确保thin-scrollbar样式正确应用并显示滚动条 - 保持UI布局一致性,侧边栏现在有固定的滚动区域限制 结构改进: - 外层:flex-1 relative overflow-hidden(定义滚动区域边界) - 内层:absolute inset-0 overflow-y-auto thin-scrollbar(实际滚动容器) - 这样可以确保侧边栏内容不会超出分配的空间,底部状态栏始终可见
This commit is contained in:
@@ -291,7 +291,8 @@ export function FileManagerSidebar({
|
||||
|
||||
return (
|
||||
<div className="h-full flex flex-col bg-dark-bg border-r border-dark-border">
|
||||
<div className="flex-1 overflow-y-auto thin-scrollbar p-2 space-y-4">
|
||||
<div className="flex-1 relative overflow-hidden">
|
||||
<div className="absolute inset-0 overflow-y-auto thin-scrollbar p-2 space-y-4">
|
||||
{/* 快捷功能区域 */}
|
||||
{renderSection(t("fileManager.recent"), <Clock className="w-3 h-3" />, recentItems)}
|
||||
{renderSection(t("fileManager.pinned"), <Star className="w-3 h-3" />, pinnedItems)}
|
||||
@@ -307,6 +308,7 @@ export function FileManagerSidebar({
|
||||
{directoryTree.map((item) => renderSidebarItem(item))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user