[PR #10] [MERGED] Stop the progress bar from clipping the app slide #10

Closed
opened 2026-11-04 22:29:02 +00:00 by bsakaguchi · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/Comfy-Org/jpcosta-comfy-apps/pull/10
Author: @jpcosta-comfy
Created: 10/1/2026
Status: ✅ Merged
Merged: 10/1/2026
Merged by: @cursor[bot]

Base: main ← Head: cursor/fix-carousel-slide-8ac0


📝 Commits (1)

  • 106b4ee Keep the app row from inheriting the progress-bar track styles.

📊 Changes

2 files changed (+37 additions, -29 deletions)

View changed files

📝 src/app/globals.css (+18 -3)
📝 src/components/studio.tsx (+19 -26)

📄 Description

The app switcher and the run-progress meter both used .track. The meter rule comes later in the stylesheet, so on the live site the sliding row inherited height: 6px, margin-top: 8px, border-radius: 999px, and overflow: hidden. That pill clip sits on the element that moves, so the horizontal slide was clipped away and a switch looked like an instant title change.

The sliding row is now .reel. Its transition lives on that class: 0.99s, cubic-bezier(0.61, 0.92, 0.21, 1), no overshoot. The progress meter keeps .track.

Production after deploy

Hard refresh of https://comfy-api-apps.vercel.app. The row is .reel (radius 0, overflow visible, 0.99s ease). Paparazzi Me and Background removal are both on screen mid-move, same vertical position.

Production desktop mid-slide

Production mobile mid-slide

To show artifacts inline, enable in settings.

Open in Web Open in Cursor 

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/Comfy-Org/jpcosta-comfy-apps/pull/10 **Author:** [@jpcosta-comfy](https://github.com/jpcosta-comfy) **Created:** 10/1/2026 **Status:** ✅ Merged **Merged:** 10/1/2026 **Merged by:** [@cursor[bot]](https://github.com/apps/cursor) **Base:** `main` ← **Head:** `cursor/fix-carousel-slide-8ac0` --- ### 📝 Commits (1) - [`106b4ee`](https://github.com/Comfy-Org/jpcosta-comfy-apps/commit/106b4ee3c67fddc2929f36e079ec09c4a13a84d6) Keep the app row from inheriting the progress-bar track styles. ### 📊 Changes **2 files changed** (+37 additions, -29 deletions) <details> <summary>View changed files</summary> 📝 `src/app/globals.css` (+18 -3) 📝 `src/components/studio.tsx` (+19 -26) </details> ### 📄 Description <!-- CURSOR_AGENT_PR_BODY_BEGIN --> The app switcher and the run-progress meter both used `.track`. The meter rule comes later in the stylesheet, so on the live site the sliding row inherited `height: 6px`, `margin-top: 8px`, `border-radius: 999px`, and `overflow: hidden`. That pill clip sits on the element that moves, so the horizontal slide was clipped away and a switch looked like an instant title change. The sliding row is now `.reel`. Its transition lives on that class: 0.99s, `cubic-bezier(0.61, 0.92, 0.21, 1)`, no overshoot. The progress meter keeps `.track`. ## Production after deploy Hard refresh of https://comfy-api-apps.vercel.app. The row is `.reel` (radius 0, overflow visible, 0.99s ease). Paparazzi Me and Background removal are both on screen mid-move, same vertical position. [Production desktop mid-slide](https://cursor.com/agents/bc-80673088-d76f-5c4b-b113-f09a5d2f8ac0/artifacts?path=%2Fopt%2Fcursor%2Fartifacts%2Fscreenshots%2Fprod-desktop-mid-slide.png) [Production mobile mid-slide](https://cursor.com/agents/bc-80673088-d76f-5c4b-b113-f09a5d2f8ac0/artifacts?path=%2Fopt%2Fcursor%2Fartifacts%2Fscreenshots%2Fprod-mobile-mid-slide.png) <sub>To show artifacts inline, <a href="https://cursor.com/dashboard/cloud-agents#my-pull-requests">enable</a> in settings.</sub> <!-- CURSOR_AGENT_PR_BODY_END --> <div><a href="https://cursor.com/agents/bc-80673088-d76f-5c4b-b113-f09a5d2f8ac0?cursor_ref=pr_footer&cursor_cta=open_in_web"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/assets/images/open-in-web-dark.png"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/assets/images/open-in-web-light.png"><img alt="Open in Web" width="114" height="28" src="https://cursor.com/assets/images/open-in-web-dark.png"></picture></a>&nbsp;<a href="https://cursor.com/background-agent?bcId=bc-80673088-d76f-5c4b-b113-f09a5d2f8ac0&cursor_ref=pr_footer&cursor_cta=open_in_cursor"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/assets/images/open-in-cursor-dark.png"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/assets/images/open-in-cursor-light.png"><img alt="Open in Cursor" width="131" height="28" src="https://cursor.com/assets/images/open-in-cursor-dark.png"></picture></a>&nbsp;</div> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
bsakaguchi 2026-11-04 22:29:02 +00:00
Sign in to join this conversation.
No labels
pull-request
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
Comfy-Org/jpcosta-comfy-apps#10
No description provided.