fix(ui): refactor layout with fixed header and prevent layout shift
- Convert layout to flexbox with fixed header and scrollable content area - Use overflow-y-scroll to always show scrollbar track - Prevents content width changes when switching between apps - Ensures consistent 12px spacing between header and content
This commit is contained in:
16
src/App.tsx
16
src/App.tsx
@@ -206,9 +206,9 @@ function App() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex flex-col bg-gray-50 dark:bg-gray-950">
|
<div className="h-screen flex flex-col bg-gray-50 dark:bg-gray-950">
|
||||||
{/* Linear 风格的顶部导航 */}
|
{/* 顶部导航区域 - 固定高度 */}
|
||||||
<header className="bg-white border-b border-gray-200 dark:bg-gray-900 dark:border-gray-800 px-6 py-4">
|
<header className="flex-shrink-0 bg-white border-b border-gray-200 dark:bg-gray-900 dark:border-gray-800 px-6 py-4">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<h1 className="text-xl font-semibold text-blue-500 dark:text-blue-400">
|
<h1 className="text-xl font-semibold text-blue-500 dark:text-blue-400">
|
||||||
@@ -247,13 +247,14 @@ function App() {
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
{/* 主内容区域 */}
|
{/* 主内容区域 - 独立滚动 */}
|
||||||
<main className="flex-1 p-6">
|
<main className="flex-1 overflow-y-scroll">
|
||||||
|
<div className="pt-3 px-6 pb-6">
|
||||||
<div className="max-w-4xl mx-auto">
|
<div className="max-w-4xl mx-auto">
|
||||||
{/* 通知组件 */}
|
{/* 通知组件 - 相对于视窗定位 */}
|
||||||
{notification && (
|
{notification && (
|
||||||
<div
|
<div
|
||||||
className={`fixed top-6 left-1/2 transform -translate-x-1/2 z-50 px-4 py-3 rounded-lg shadow-lg transition-all duration-300 ${
|
className={`fixed top-20 left-1/2 transform -translate-x-1/2 z-50 px-4 py-3 rounded-lg shadow-lg transition-all duration-300 ${
|
||||||
notification.type === "error"
|
notification.type === "error"
|
||||||
? "bg-red-500 text-white"
|
? "bg-red-500 text-white"
|
||||||
: "bg-green-500 text-white"
|
: "bg-green-500 text-white"
|
||||||
@@ -271,6 +272,7 @@ function App() {
|
|||||||
onEdit={setEditingProviderId}
|
onEdit={setEditingProviderId}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
{isAddModalOpen && (
|
{isAddModalOpen && (
|
||||||
|
|||||||
Reference in New Issue
Block a user