fix: adjust playhead z-index to 45 for better layering #508
Conversation
👷 Deploy request for appcut pending review.Visit the deploys page to approve it
|
|
@karansingh21202 is attempting to deploy a commit to the OpenCut OSS Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe z-index value of the playhead container in the timeline editor component was changed from 150 to 45. This adjustment affects the stacking order of the playhead relative to other UI elements. No other logic or styling changes were made. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Possibly related PRs
Poem
Note 🔌 MCP (Model Context Protocol) integration is now available in Early Access!Pro users can now connect to remote MCP servers under the Integrations page to get reviews and chat conversations that understand additional development context. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/web/src/components/editor/timeline/timeline-playhead.tsx (1)
107-124: Remove or guard verbose console loggingThe unconditional
console.loginside the hot render path will leak into production bundles and spam the browser console whenever the playhead leaves bounds. Either drop it or wrap it behind a non-production guard:- if (rawLeftPosition < leftBoundary || rawLeftPosition > rightBoundary) { - console.log( - "PLAYHEAD VISUAL DEBUG:", - JSON.stringify({ - playheadPosition, - timelinePosition, - trackLabelsWidth, - scrollLeft, - rawLeftPosition, - constrainedLeftPosition: leftPosition, - leftBoundary, - rightBoundary, - timelineContentWidth, - viewportWidth, - zoomLevel, - }) - ); - } + if ( + process.env.NODE_ENV !== "production" && + (rawLeftPosition < leftBoundary || rawLeftPosition > rightBoundary) + ) { + // eslint-disable-next-line no-console -- useful only during development + console.debug("PLAYHEAD VISUAL DEBUG:", { + playheadPosition, + timelinePosition, + trackLabelsWidth, + scrollLeft, + rawLeftPosition, + constrainedLeftPosition: leftPosition, + leftBoundary, + rightBoundary, + timelineContentWidth, + viewportWidth, + zoomLevel, + }); + }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/web/src/components/editor/timeline/timeline-playhead.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{jsx,tsx}
📄 CodeRabbit Inference Engine (.github/copilot-instructions.md)
**/*.{jsx,tsx}: Don't useaccessKeyattribute on any HTML element.
Don't setaria-hidden="true"on focusable elements.
Don't add ARIA roles, states, and properties to elements that don't support them.
Don't use distracting elements like<marquee>or<blink>.
Only use thescopeprop on<th>elements.
Don't assign non-interactive ARIA roles to interactive HTML elements.
Make sure label elements have text content and are associated with an input.
Don't assign interactive ARIA roles to non-interactive HTML elements.
Don't assigntabIndexto non-interactive HTML elements.
Don't use positive integers fortabIndexproperty.
Don't include "image", "picture", or "photo" in img alt prop.
Don't use explicit role property that's the same as the implicit/default role.
Make static elements with click handlers use a valid role attribute.
Always include atitleelement for SVG elements.
Give all elements requiring alt text meaningful information for screen readers.
Make sure anchors have content that's accessible to screen readers.
AssigntabIndexto non-interactive HTML elements witharia-activedescendant.
Include all required ARIA attributes for elements with ARIA roles.
Make sure ARIA properties are valid for the element's supported roles.
Always include atypeattribute for button elements.
Make elements with interactive roles and handlers focusable.
Give heading elements content that's accessible to screen readers (not hidden witharia-hidden).
Always include alangattribute on the html element.
Always include atitleattribute for iframe elements.
AccompanyonClickwith at least one of:onKeyUp,onKeyDown, oronKeyPress.
AccompanyonMouseOver/onMouseOutwithonFocus/onBlur.
Include caption tracks for audio and video elements.
Use semantic elements instead of role attributes in JSX.
Make sure all anchors are valid and navigable.
Ensure all ARIA properties (aria-*) are valid.
Use valid, non-abstract ARIA roles for elements with...
Files:
apps/web/src/components/editor/timeline/timeline-playhead.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit Inference Engine (.github/copilot-instructions.md)
**/*.{js,jsx,ts,tsx}: Don't use consecutive spaces in regular expression literals.
Don't use theargumentsobject.
Don't use the comma operator.
Don't write functions that exceed a given Cognitive Complexity score.
Don't use unnecessary boolean casts.
Don't use unnecessary callbacks with flatMap.
Use for...of statements instead of Array.forEach.
Don't create classes that only have static members (like a static namespace).
Don't use this and super in static contexts.
Don't use unnecessary catch clauses.
Don't use unnecessary constructors.
Don't use unnecessary continue statements.
Don't export empty modules that don't change anything.
Don't use unnecessary escape sequences in regular expression literals.
Don't use unnecessary labels.
Don't use unnecessary nested block statements.
Don't rename imports, exports, and destructured assignments to the same name.
Don't use unnecessary string or template literal concatenation.
Don't use String.raw in template literals when there are no escape sequences.
Don't use useless case statements in switch statements.
Don't use ternary operators when simpler alternatives exist.
Don't use uselessthisaliasing.
Don't initialize variables to undefined.
Don't use the void operators (they're not familiar).
Use arrow functions instead of function expressions.
Use Date.now() to get milliseconds since the Unix Epoch.
Use .flatMap() instead of map().flat() when possible.
Use literal property access instead of computed property access.
Don't use parseInt() or Number.parseInt() when binary, octal, or hexadecimal literals work.
Use concise optional chaining instead of chained logical expressions.
Use regular expression literals instead of the RegExp constructor when possible.
Don't use number literal object member names that aren't base 10 or use underscore separators.
Remove redundant terms from logical expressions.
Use while loops instead of for loops when you don't need initializer and update expressions.
Don't reassign const variables....
Files:
apps/web/src/components/editor/timeline/timeline-playhead.tsx
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Don't use primitive type aliases or misleading types.
Don't use empty type parameters in type aliases and interfaces.
Don't use any or unknown as type constraints.
Don't return a value from a function with the return type 'void'.
Don't use the TypeScript directive @ts-ignore.
Don't use TypeScript enums.
Don't export imported variables.
Don't add type annotations to variables, parameters, and class properties that are initialized with literal expressions.
Don't use TypeScript namespaces.
Don't use non-null assertions with the!postfix operator.
Don't use parameter properties in class constructors.
Don't use user-defined types.
Useas constinstead of literal types and type annotations.
Use eitherT[]orArray<T>consistently.
Initialize each enum member value explicitly.
Useexport typefor types.
Useimport typefor types.
Make sure all enum members are literal values.
Don't use TypeScript const enum.
Don't declare empty interfaces.
Don't let variables evolve into any type through reassignments.
Don't use the any type.
Don't misuse the non-null assertion operator (!) in TypeScript files.
Don't use implicit any type on variable declarations.
Don't merge interfaces and classes unsafely.
Don't use overload signatures that aren't next to each other.
Use the namespace keyword instead of the module keyword to declare TypeScript namespaces.
Use consistent accessibility modifiers on class properties and methods.
Use function types instead of object types with call signatures.
Don't use void type outside of generic or return types.
**/*.{ts,tsx}: Don't use TypeScript enums.
Don't export imported variables.
Don't add type annotations to variables, parameters, and class properties that are initialized with literal expressions.
Don't use TypeScript namespaces.
Don't use non-null assertions with the!postfix operator.
Don't use parameter properties in class constructors.
Don't use user-defined types.
Useas constinstead of literal types and...
Files:
apps/web/src/components/editor/timeline/timeline-playhead.tsx
🧠 Learnings (9)
📓 Common learnings
Learnt from: brandonmcconnell
PR: OpenCut-app/OpenCut#498
File: apps/web/src/components/editor/timeline/timeline-element.tsx:361-361
Timestamp: 2025-07-30T23:20:52.497Z
Learning: Tailwind CSS v4 maintains the same default z-index scale as v3 (up to z-50), but projects can extend the theme configuration to include higher semantic z-index utilities like z-100, z-150, z-200. When a project has extended the z-index theme, these higher values work as direct utilities without needing arbitrary value syntax.
Learnt from: brandonmcconnell
PR: OpenCut-app/OpenCut#498
File: apps/web/src/components/editor/timeline/timeline-playhead.tsx:129-130
Timestamp: 2025-07-30T23:23:53.859Z
Learning: Tailwind CSS v4's JIT compiler can generate z-index utilities for any numeric value on demand (e.g., z-150, z-200, z-999), unlike v3 which was limited to predefined scale values (z-0, z-10, z-20, z-30, z-40, z-50). This means arbitrary z-index values no longer require bracket notation in v4.
Learnt from: brandonmcconnell
PR: OpenCut-app/OpenCut#498
File: apps/web/src/components/editor/timeline/timeline-element.tsx:361-361
Timestamp: 2025-07-30T23:20:52.497Z
Learning: Tailwind CSS v4 expands the z-index utility scale beyond the v3 limit of z-50, including utilities like z-200, z-150, etc. The arbitrary value syntax z-[200] is no longer needed for these higher z-index values in v4.
Learnt from: brandonmcconnell
PR: OpenCut-app/OpenCut#498
File: apps/web/src/components/editor/timeline/timeline-playhead.tsx:129-130
Timestamp: 2025-07-30T23:23:53.859Z
Learning: Tailwind CSS v4 JIT compiler supports arbitrary z-index values, but they must use square bracket notation (e.g., z-[150], z-[999]). The predefined z-index scale remains z-0, z-10, z-20, z-30, z-40, z-50, and z-auto. Values outside this scale like z-150 without brackets will be dropped by the compiler.
Learnt from: brandonmcconnell
PR: OpenCut-app/OpenCut#498
File: apps/web/src/components/editor/timeline/timeline-playhead.tsx:129-130
Timestamp: 2025-07-30T23:21:04.732Z
Learning: Tailwind CSS v4 significantly expands the z-index utility scale compared to v3. While v3 only included z-0, z-10, z-20, z-30, z-40, z-50, v4 includes a much more comprehensive scale: z-0, z-1, z-2, z-3, z-10, z-20, z-30, z-40, z-50, z-60, z-70, z-80, z-90, z-100, z-110, z-120, z-130, z-140, z-150, z-160, z-170, z-180, z-190, z-200, z-300, z-400, z-500, z-600, z-700, z-800, z-900, z-1000, and z-auto.
📚 Learning: tailwind css v4 maintains the same default z-index scale as v3 (up to z-50), but projects can extend...
Learnt from: brandonmcconnell
PR: OpenCut-app/OpenCut#498
File: apps/web/src/components/editor/timeline/timeline-element.tsx:361-361
Timestamp: 2025-07-30T23:20:52.497Z
Learning: Tailwind CSS v4 maintains the same default z-index scale as v3 (up to z-50), but projects can extend the theme configuration to include higher semantic z-index utilities like z-100, z-150, z-200. When a project has extended the z-index theme, these higher values work as direct utilities without needing arbitrary value syntax.
Applied to files:
apps/web/src/components/editor/timeline/timeline-playhead.tsx
📚 Learning: tailwind css v4's jit compiler can generate z-index utilities for any numeric value on demand (e.g.,...
Learnt from: brandonmcconnell
PR: OpenCut-app/OpenCut#498
File: apps/web/src/components/editor/timeline/timeline-playhead.tsx:129-130
Timestamp: 2025-07-30T23:23:53.859Z
Learning: Tailwind CSS v4's JIT compiler can generate z-index utilities for any numeric value on demand (e.g., z-150, z-200, z-999), unlike v3 which was limited to predefined scale values (z-0, z-10, z-20, z-30, z-40, z-50). This means arbitrary z-index values no longer require bracket notation in v4.
Applied to files:
apps/web/src/components/editor/timeline/timeline-playhead.tsx
📚 Learning: tailwind css v4 expands the z-index utility scale beyond the v3 limit of z-50, including utilities l...
Learnt from: brandonmcconnell
PR: OpenCut-app/OpenCut#498
File: apps/web/src/components/editor/timeline/timeline-element.tsx:361-361
Timestamp: 2025-07-30T23:20:52.497Z
Learning: Tailwind CSS v4 expands the z-index utility scale beyond the v3 limit of z-50, including utilities like z-200, z-150, etc. The arbitrary value syntax z-[200] is no longer needed for these higher z-index values in v4.
Applied to files:
apps/web/src/components/editor/timeline/timeline-playhead.tsx
📚 Learning: tailwind css v4 jit compiler supports arbitrary z-index values, but they must use square bracket not...
Learnt from: brandonmcconnell
PR: OpenCut-app/OpenCut#498
File: apps/web/src/components/editor/timeline/timeline-playhead.tsx:129-130
Timestamp: 2025-07-30T23:23:53.859Z
Learning: Tailwind CSS v4 JIT compiler supports arbitrary z-index values, but they must use square bracket notation (e.g., z-[150], z-[999]). The predefined z-index scale remains z-0, z-10, z-20, z-30, z-40, z-50, and z-auto. Values outside this scale like z-150 without brackets will be dropped by the compiler.
Applied to files:
apps/web/src/components/editor/timeline/timeline-playhead.tsx
📚 Learning: tailwind css v4 significantly expands the z-index utility scale compared to v3. while v3 only includ...
Learnt from: brandonmcconnell
PR: OpenCut-app/OpenCut#498
File: apps/web/src/components/editor/timeline/timeline-playhead.tsx:129-130
Timestamp: 2025-07-30T23:21:04.732Z
Learning: Tailwind CSS v4 significantly expands the z-index utility scale compared to v3. While v3 only included z-0, z-10, z-20, z-30, z-40, z-50, v4 includes a much more comprehensive scale: z-0, z-1, z-2, z-3, z-10, z-20, z-30, z-40, z-50, z-60, z-70, z-80, z-90, z-100, z-110, z-120, z-130, z-140, z-150, z-160, z-170, z-180, z-190, z-200, z-300, z-400, z-500, z-600, z-700, z-800, z-900, z-1000, and z-auto.
Applied to files:
apps/web/src/components/editor/timeline/timeline-playhead.tsx
📚 Learning: applies to **/*.{jsx,tsx} : assign `tabindex` to non-interactive html elements with `aria-activedesc...
Learnt from: CR
PR: OpenCut-app/OpenCut#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-27T22:14:46.402Z
Learning: Applies to **/*.{jsx,tsx} : Assign `tabIndex` to non-interactive HTML elements with `aria-activedescendant`.
Applied to files:
apps/web/src/components/editor/timeline/timeline-playhead.tsx
📚 Learning: applies to **/*.{jsx,tsx} : don't assign `tabindex` to non-interactive html elements....
Learnt from: CR
PR: OpenCut-app/OpenCut#0
File: .cursor/rules/ultracite.mdc:0-0
Timestamp: 2025-07-27T22:15:27.748Z
Learning: Applies to **/*.{jsx,tsx} : Don't assign `tabIndex` to non-interactive HTML elements.
Applied to files:
apps/web/src/components/editor/timeline/timeline-playhead.tsx
📚 Learning: applies to **/*.{jsx,tsx} : don't use positive integers for `tabindex` property....
Learnt from: CR
PR: OpenCut-app/OpenCut#0
File: .cursor/rules/ultracite.mdc:0-0
Timestamp: 2025-07-27T22:15:27.748Z
Learning: Applies to **/*.{jsx,tsx} : Don't use positive integers for `tabIndex` property.
Applied to files:
apps/web/src/components/editor/timeline/timeline-playhead.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build (windows-latest)
🔇 Additional comments (1)
apps/web/src/components/editor/timeline/timeline-playhead.tsx (1)
128-130:z-50is a valid Tailwind utility – good catchReplacing
z-150(which Tailwind drops unless written asz-[150]) withz-50restores predictable stacking without relying on extended config or arbitrary values. Nice, simple fix that eliminates a silent styling bug.
karansingh21202
changed the title
1 participant
Description
Adjusted the z-index of the timeline playhead from
z-150toz-45to resolve layering issues with other UI elements.#507 (solved)
Changes Made
Why This Change Was Needed
Testing
##Before
rec14_o.mp4
##After
rec15_o.mp4
Related Issues
Fixes #[issue-number]
Checklist
Summary by CodeRabbit