huanld/openscreen
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases 2 Wiki Activity

Adjust layout and sizing of SettingsPanel tabs

Browse Source 
Updated the Tabs and TabsList components in SettingsPanel to use fixed min and max heights and improved flex properties for better layout consistency and scrolling behavior.
This commit is contained in:
Nikhil Solanki
2025-12-25 15:09:26 +05:30
parent f00d381f94
commit f3e12629c2
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/video-editor/SettingsPanel.tsx
+3 -3
View File
@@ -444,14 +444,14 @@ export function SettingsPanel({
</>
)}
<Tabs defaultValue="image" className="flex-1 flex flex-col min-h-0">
<TabsList className="mb-4 bg-white/5 border border-white/5 p-1 w-full grid grid-cols-3 h-auto rounded-xl">
<Tabs defaultValue="image" className="flex flex-col min-h-[280px]">
<TabsList className="mb-4 bg-white/5 border border-white/5 p-1 w-full grid grid-cols-3 h-auto rounded-xl flex-shrink-0">
<TabsTrigger value="image" className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-slate-400 py-2 rounded-lg transition-all">Image</TabsTrigger>
<TabsTrigger value="color" className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-slate-400 py-2 rounded-lg transition-all">Color</TabsTrigger>
<TabsTrigger value="gradient" className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-slate-400 py-2 rounded-lg transition-all">Gradient</TabsTrigger>
</TabsList>
<div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar pr-2">
<div className="min-h-[220px] max-h-[300px] overflow-y-auto custom-scrollbar pr-2">
<TabsContent value="image" className="mt-0 space-y-3 px-2">
{/* Upload Button */}
<input