fix(ui): prevent tooltip from being overlapped by tab bar fade overlay

[dt313]

Description

Please include a summary of the changes and the related issue. Please also include relevant motivation and context.

Fixes # (issue)

Type of change

Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update
• Performance improvement
• Code refactoring
• Tests

How Has This Been Tested?

• Verified locally in development mode
• Manually hovered tooltip near the tab bar to confirm it is no longer overlapped
• Checked that no hydration or console warnings are introduced

Test Configuration:

• Node version: v24.7.0
• Browser (if applicable): Chrome(latest)
• Operating System:MacOS

Screenshots (if applicable)

• Before

- After

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have added screenshots if ui has been changed
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

Additional context

This is a UI-only fix. No functional or behavioral changes were introduced.

Summary by CodeRabbit

• Style
  • Updated tooltip component styling and formatting for consistency.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[netlify]

👷 Deploy request for appcut pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	2441b0a

[vercel]

@dt313 is attempting to deploy a commit to the OpenCut OSS Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

📝 Walkthrough

Walkthrough

A tooltip component file receives quote style standardization across string literals and class names. The tooltip container's z-index elevation is increased from z-50 to z-150. Minor formatting adjustments to imports and whitespace are applied. No functional logic or public API changes introduced.

Changes

Cohort / File(s)	Summary
Tooltip Styling & Formatting apps/web/src/components/ui/tooltip.tsx	Quote style standardization (single to double quotes), z-index value bump (z-50 → z-150), import reordering, and whitespace adjustments

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 With whiskers twitched and nose held high,
I hopped through quotes, both low and nigh—
From fifty up to one-five-oh,
The tooltip climbs, a steadier glow!
Just spacing tweaks and formatting care,
A tidy burrow, fresh as spring air! 🌱

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: updating the z-index in the tooltip component to prevent overlap with the tab bar fade overlay, which matches the primary objective of the PR.
Description check	✅ Passed	The description includes most required template sections with type of change clearly selected, testing details provided with configuration, before/after screenshots included, and relevant checklist items marked. Minor gaps: issue number not specified (template default) and no test files added (acceptable for UI-only fix).
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0173db9 and 2441b0a.

📒 Files selected for processing (1)

• apps/web/src/components/ui/tooltip.tsx

🧰 Additional context used

📓 Path-based instructions (3)

**/*.{jsx,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{jsx,tsx}: Don't use accessKey attribute on any HTML element.
Don't set aria-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 the scope prop 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 assign tabIndex to non-interactive HTML elements.
Don't use positive integers for tabIndex property.
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 a title element 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.
Assign tabIndex to non-interactive HTML elements with aria-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 a type attribute for button elements.
Make elements with interactive roles and handlers focusable.
Give heading elements content that's accessible to screen readers (not hidden with aria-hidden).
Always include a lang attribute on the html element.
Always include a title attribute for iframe elements.
Accompany onClick with at least one of: onKeyUp, onKeyDown, or onKeyPress.
Accompany onMouseOver/onMouseOut with onFocus/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/ui/tooltip.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 the arguments object.
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 useless this aliasing.
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/ui/tooltip.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.
Use as const instead of literal types and type annotations.
Use either T[] or Array<T> consistently.
Initialize each enum member value explicitly.
Use export type for types.
Use import type for 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.
Use as const instead of literal types and...

Files:

• apps/web/src/components/ui/tooltip.tsx

🧠 Learnings (6)

📓 Common learnings

Learnt from: brandonmcconnell
Repo: OpenCut-app/OpenCut PR: 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
Repo: OpenCut-app/OpenCut PR: 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
Repo: OpenCut-app/OpenCut PR: 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
Repo: OpenCut-app/OpenCut PR: 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.

📚 Learning: 2025-07-27T22:14:46.402Z

Learnt from: CR
Repo: OpenCut-app/OpenCut PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-27T22:14:46.402Z
Learning: Applies to **/*.{ts,tsx} : Use consistent accessibility modifiers on class properties and methods.

Applied to files:

• apps/web/src/components/ui/tooltip.tsx

📚 Learning: 2025-07-27T22:14:46.402Z

Learnt from: CR
Repo: OpenCut-app/OpenCut PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-07-27T22:14:46.402Z
Learning: Applies to **/*.{js,jsx,ts,tsx} : Use standard constants instead of approximated literals.

Applied to files:

• apps/web/src/components/ui/tooltip.tsx

📚 Learning: 2025-07-27T22:15:27.748Z

Learnt from: CR
Repo: OpenCut-app/OpenCut PR: 0
File: .cursor/rules/ultracite.mdc:0-0
Timestamp: 2025-07-27T22:15:27.748Z
Learning: Applies to **/*.{jsx,tsx} : Don't use dangerous JSX props.

Applied to files:

• apps/web/src/components/ui/tooltip.tsx

📚 Learning: 2025-07-27T22:15:27.748Z

Learnt from: CR
Repo: OpenCut-app/OpenCut PR: 0
File: .cursor/rules/ultracite.mdc:0-0
Timestamp: 2025-07-27T22:15:27.748Z
Learning: Applies to **/*.{jsx,tsx} : Don't assign to React component props.

Applied to files:

• apps/web/src/components/ui/tooltip.tsx

📚 Learning: 2025-07-27T22:15:27.748Z

Learnt from: CR
Repo: OpenCut-app/OpenCut PR: 0
File: .cursor/rules/ultracite.mdc:0-0
Timestamp: 2025-07-27T22:15:27.748Z
Learning: Applies to **/*.{jsx,tsx} : Make sure all dependencies are correctly specified in React hooks.

Applied to files:

• apps/web/src/components/ui/tooltip.tsx

🔇 Additional comments (1)

apps/web/src/components/ui/tooltip.tsx (1)

14-14: No issues found with z-150 usage.

The project uses Tailwind CSS v4.1.11, which includes z-150 as a built-in z-index utility. The code is correct as written without needing bracket notation like z-[150].

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}