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

feat: enhance AppLayout and SequencerPage for improved layout and responsiveness

Browse Source
This commit is contained in:
JSC
2025-09-03 16:32:05 +02:00
parent 80a18575a1
commit df60b5ce93
3 changed files with 23 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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