quaik8/sbd2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: remove noPadding prop from AppLayout and simplify class names in SequencerCanvas

Browse Source
This commit is contained in:
JSC
2025-09-03 16:45:34 +02:00
parent 2ec58ea268
commit 9603daa5ce
2 changed files with 7 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/AppLayout.tsx
View File

@@ -24,10 +24,9 @@ interface AppLayoutProps {
href?: string href?: string
}> }>
} }
noPadding?: boolean
} }
export function AppLayout({ children, breadcrumb, noPadding = false }: AppLayoutProps) { export function AppLayout({ children, breadcrumb }: AppLayoutProps) {
const [playerDisplayMode, setPlayerDisplayMode] = useState<PlayerDisplayMode>( const [playerDisplayMode, setPlayerDisplayMode] = useState<PlayerDisplayMode>(
() => { () => {
// Initialize from localStorage or default to 'normal' // Initialize from localStorage or default to 'normal'
@@ -78,7 +77,7 @@ export function AppLayout({ children, breadcrumb, noPadding = false }: AppLayout
)} )}
</div> </div>
</header> </header>
<div className={`flex flex-1 flex-col ${noPadding ? '' : 'gap-4 p-4 pt-0'}`}>{children}</div> <div className="flex flex-1 flex-col gap-4 p-4 pt-0">{children}</div>
</SidebarInset> </SidebarInset>
<Player onPlayerModeChange={setPlayerDisplayMode} /> <Player onPlayerModeChange={setPlayerDisplayMode} />
</SidebarProvider> </SidebarProvider>

10
src/components/sequencer/SequencerCanvas.tsx
View File

@@ -235,18 +235,18 @@ export const SequencerCanvas = forwardRef<HTMLDivElement, SequencerCanvasProps>(
} }
return ( return (
<div ref={setCanvasDropRef} className="h-full w-full flex flex-col overflow-hidden"> <div ref={setCanvasDropRef} className="h-full flex flex-col overflow-hidden">
{/* Time ruler */} {/* Time ruler */}
<div className="h-8 bg-muted/50 border-b border-border/50 flex-shrink-0 overflow-hidden"> <div className="h-8 bg-muted/50 border-b border-border/50 flex-shrink-0 overflow-hidden">
<div <div
ref={timelineRef} ref={timelineRef}
className="h-full w-full overflow-x-auto [&::-webkit-scrollbar]:hidden" className="h-full overflow-x-auto [&::-webkit-scrollbar]:hidden"
style={{ style={{
scrollbarWidth: 'none', scrollbarWidth: 'none',
msOverflowStyle: 'none' msOverflowStyle: 'none'
}} }}
> >
<div className="relative h-full w-full" style={{ minWidth: `${totalWidth}px` }}> <div className="relative h-full" style={{ width: `${totalWidth}px` }}>
{Array.from({ length: Math.ceil(duration) + 1 }).map((_, i) => ( {Array.from({ length: Math.ceil(duration) + 1 }).map((_, i) => (
<div key={i} className="absolute top-0 bottom-0" style={{ left: `${i * zoom}px` }}> <div key={i} className="absolute top-0 bottom-0" style={{ left: `${i * zoom}px` }}>
{/* Time markers */} {/* Time markers */}
@@ -278,10 +278,10 @@ export const SequencerCanvas = forwardRef<HTMLDivElement, SequencerCanvasProps>(
{/* Tracks */} {/* Tracks */}
<div <div
ref={ref} ref={ref}
className="flex-1 w-full overflow-auto" className="flex-1 overflow-auto"
onScroll={handleTracksScroll} onScroll={handleTracksScroll}
> >
<div style={{ minWidth: `${totalWidth}px`, paddingBottom: '52px' }}> <div style={{ width: `${totalWidth}px`, paddingBottom: '52px' }}>
{tracks.map((track) => ( {tracks.map((track) => (
<TrackRow <TrackRow
key={track.id} key={track.id}