Fix a horizontal overflow bug

[fulopkovacs]

Summary by CodeRabbit

• Refactor
  • Optimized the API Requests panel animation structure for improved performance and code maintainability.

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

[coderabbitai]

Walkthrough

The API Requests panel animation logic is refactored from a two-step nested motion structure to a single AnimatePresence wrapper with conditional rendering. Controlled width animation is applied via motion.div states, while content fades in with a nested opacity transition.

Changes

Cohort / File(s)	Summary
API Requests Panel Animation Refactor src/components/ApiRequestsPanel.tsx	Replaces two-step nested motion animations with single AnimatePresence wrapper; updates imports to include AnimatePresence; restructures JSX to conditionally render panel with controlled width animation (initial/animate/exit states) and nested motion.div for content opacity fade-in; preserves header, request list, and clear-requests functionality

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• Animate the api request panel #31 — Modifies the same ApiRequestsPanel.tsx file with related motion/react animation restructuring for conditional panel rendering.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title 'Fix a horizontal overflow bug' directly aligns with the changeset, which refactors the ApiRequestsPanel animation logic to fix layout issues.

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d159976 and 632a032.

📒 Files selected for processing (1)

• src/components/ApiRequestsPanel.tsx

🧰 Additional context used

📓 Path-based instructions (3)

src/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

Always ensure no formatting/linting issues exist in code - use pnpm check --fix to automatically fix issues

Files:

• src/components/ApiRequestsPanel.tsx

**/*.{tsx,ts}

📄 CodeRabbit inference engine (AGENTS.md)

Prefer functions over arrow functions for React components

Files:

• src/components/ApiRequestsPanel.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Prefer type over interface for type definitions

Files:

• src/components/ApiRequestsPanel.tsx

🧠 Learnings (2)

📚 Learning: 2025-12-24T15:25:07.106Z

Learnt from: fulopkovacs
Repo: fulopkovacs/trytanstackdb.com PR: 22
File: src/components/TodoBoards.tsx:63-81
Timestamp: 2025-12-24T15:25:07.106Z
Learning: In Tailwind CSS v4, prefer canonical classes using bg-linear-to-* (e.g., bg-linear-to-b, bg-linear-to-t, bg-linear-to-r) over the older bg-gradient-to-* syntax. This aligns with Tailwind LSP's suggestCanonicalClasses rule. Apply across TSX files (e.g., src/components/*.tsx); replace occurrences of bg-gradient-to-* with the corresponding bg-linear-to-* equivalents and verify gradients visually.

Applied to files:

• src/components/ApiRequestsPanel.tsx

📚 Learning: 2025-12-28T23:34:13.416Z

Learnt from: fulopkovacs
Repo: fulopkovacs/trytanstackdb.com PR: 32
File: src/components/HomeIntro.tsx:16-25
Timestamp: 2025-12-28T23:34:13.416Z
Learning: In Motion (motion/react), when configuring variant transitions, use delayChildren: stagger(x) to create per-child delays (e.g., delayChildren: stagger(0.2)). This is different from the older API that used a separate staggerChildren property. Apply this guidance to TSX files that declare motion variants (e.g., in src/components/**/*.tsx) and verify that stagger is imported from framer-motion. Ensure transitions reflect the intended stagger timing and that no conflicting delay values override the staggered effect.

Applied to files:

• src/components/ApiRequestsPanel.tsx

🧬 Code graph analysis (1)

src/components/ApiRequestsPanel.tsx (4)

src/components/ui/badge.tsx (1)

• Badge (48-48)

src/components/ui/button.tsx (1)

• Button (63-63)

src/components/ui/scroll-area.tsx (1)

• ScrollArea (62-62)

src/components/ApiPanelToggle.tsx (2)

• draft (29-32)
• ApiPanelToggle (8-44)

🔇 Additional comments (2)

src/components/ApiRequestsPanel.tsx (2)

8-8: LGTM: Import updated for AnimatePresence.

The addition of AnimatePresence to the imports is necessary for the new conditional animation approach and is used correctly throughout the component.

---

172-241: Animation structure correctly addresses the overflow bug.

The implementation properly fixes the horizontal overflow issue through:

1. Using overflow: "clip" on the animating width container to prevent content spillover during width expansion
2. Maintaining fixed internal width (API_PANEL_WIDTH) to preserve layout
3. Sequential animations (width completes before opacity begins via 150ms delay) for smooth appearance

The motion/react v12.23.24 API correctly supports the inline style prop with standard CSS properties. The animation timing design—expanding the panel width first, then fading in content—is intentional and creates a polished UX effect.

Code follows all guidelines: function declaration (not arrow function), proper type imports, and clean formatting.

---

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

[github-actions]

🚀 Preview Deployment

Status: ✅ Ready!

Preview URL: Open Preview

Commit: 632a03231ccbcd2506135eb2fd5d1db7bde95408

Built and deployed successfully