feat: streamline track and master controls layout consistency
- Streamlined track controls and master controls to same width (240px) - Fixed track controls container to use full width of parent column - Matched TrackControls card structure with MasterControls (gap-3, no w-full/h-full) - Updated outer container padding from p-2 to p-4 with gap-4 - Adjusted track controls wrapper to center content instead of stretching - Added max-width constraint to PlaybackControls to prevent width changes - Centered transport control buttons in footer 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1569,7 +1569,7 @@ export function AudioEditor() {
|
||||
</main>
|
||||
|
||||
{/* Right Sidebar - Master Controls & Analyzers */}
|
||||
<aside className="flex-shrink-0 border-l border-border bg-card flex flex-col p-4 gap-4 w-[280px]">
|
||||
<aside className="flex-shrink-0 border-l border-border bg-card flex flex-col pt-5 px-4 pb-4 gap-4 w-60">
|
||||
{/* Master Controls */}
|
||||
<div className="flex items-center justify-center">
|
||||
<MasterControls
|
||||
@@ -1655,7 +1655,7 @@ export function AudioEditor() {
|
||||
|
||||
{/* Analyzer Display */}
|
||||
<div className="flex-1 min-h-[360px] flex items-start justify-center">
|
||||
<div className="w-[192px]">
|
||||
<div className="w-[178px]">
|
||||
{analyzerView === 'frequency' && <FrequencyAnalyzer analyserNode={masterAnalyser} />}
|
||||
{analyzerView === 'spectrogram' && <Spectrogram analyserNode={masterAnalyser} />}
|
||||
{analyzerView === 'phase' && <PhaseCorrelationMeter analyserNode={masterAnalyser} />}
|
||||
|
||||
@@ -71,7 +71,7 @@ export function PlaybackControls({
|
||||
const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
|
||||
|
||||
return (
|
||||
<div className={cn('space-y-4', className)}>
|
||||
<div className={cn('space-y-4 w-full max-w-2xl', className)}>
|
||||
{/* Timeline Slider */}
|
||||
<div className="space-y-2">
|
||||
<input
|
||||
@@ -161,7 +161,7 @@ export function PlaybackControls({
|
||||
)}
|
||||
|
||||
{/* Transport Controls */}
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
|
||||
Reference in New Issue
Block a user