fix drag

[Kitenite]

Summary by CodeRabbit

• Style
  • Improved header spacing and layout for task tabs.
  • Tabs now resize dynamically to better fit available space, preventing overflow or cramped labels.
  • Add task button positioned and measured consistently for stable layout.
  • Introduced explicit drag/no-drag regions so window dragging behaves more predictably.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

TaskTabs was refactored to measure dynamic element widths (left controls, middle section, add button, right actions) and compute per-tab widths via a revised useTabWidth hook; Electron drag/no-drag CSS utilities were added and JSX adjusted to expose refs for these measured regions.

Changes

Cohort / File(s)	Change Summary
TaskTabs: dynamic measurement & layout apps/desktop/src/renderer/screens/main/components/Layout/TaskTabs/TaskTabs.tsx	Expanded useTabWidth signature to accept leftControlsRef and rightActionsRef; replaced fixed-width assumptions with DOM measurements (middle section, left controls, add button, padding); added ResizeObserver(s) and RAF-based recalculation; introduced left-controls/no-drag containers and relocated AddTaskButton into a measurable container; updated classNames and drag/no-drag handling.
Global CSS: Electron drag utilities apps/desktop/src/renderer/globals.css	Added .drag and .no-drag utilities (setting -webkit-app-region: drag / no-drag) under @layer base for Electron draggable regions.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant UI as TaskTabs (JSX)
  participant Hook as useTabWidth
  participant DOM as Browser DOM
  participant RO as ResizeObserver

  UI->>Hook: mount(useTabWidth(worktrees, leftRef, rightRef))
  Hook->>DOM: querySelector(data-add-button) & read offsets
  Hook->>RO: observe(container, middle, leftControls, rightActions)
  RO-->>Hook: resize events (debounced via RAF)
  Hook->>Hook: compute availableWidth = middleWidth - fixedElements - gaps
  Hook->>Hook: clamp tabWidth (MIN/MAX) and set state
  Hook-->>UI: updated tab widths
  UI->>DOM: render tabs with computed widths and drag/no-drag regions

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

• Inspect useTabWidth logic: measurement fallbacks, RAF timing, ResizeObserver cleanup and dependency handling.
• Verify new refs wiring in TaskTabs.tsx and relocation/attribute for AddTaskButton (data-add-button) for reliable querySelector.
• Confirm CSS .drag / .no-drag placement and that class usage matches Electron expectations.

Possibly related PRs

• start tasks and top bar #81 — Modifies TaskTabs and useTabWidth; closely related to the dynamic measurement and hook signature changes.
• fix drag #93 — Alters TaskTabs left-edge/drag handling; related to the drag/no-drag region and layout adjustments.

Poem

🐰 I measured the gap with a twitch and a hop,
Left nibs and right hops placed neatly on top.
Tabs sized with care, no constants to bind,
I hopped through the layout and left chaos behind. ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	No pull request description was provided by the author; the description is entirely missing and does not follow the required template structure.	Add a detailed description following the template, including what was changed, why it was changed, testing performed, and reference any related issues.
Title check	❓ Inconclusive	The title 'fix drag' is vague and does not clearly describe the specific change made; while it relates to a drag region fix, it lacks meaningful detail about what was actually fixed.	Use a more descriptive title such as 'Replace TaskTabs padding with explicit left spacer for drag region' to clarify the structural change.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d5ad92e and 184f30d.

📒 Files selected for processing (2)

• apps/desktop/src/renderer/globals.css (1 hunks)
• apps/desktop/src/renderer/screens/main/components/Layout/TaskTabs/TaskTabs.tsx (7 hunks)

---

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