Conversation
…t shift The pentest route had no `loading.tsx`, so a hard refresh fell through to the parent `[orgId]/loading.tsx` which renders `<PageLayout loading />` — a centered, padded card. The actual `SplitView` is full-bleed (negative margins escape the app-shell's `p-4 md:p-6`), 340px sidebar + main pane. The mismatch produced a visible CLS jump on hard refresh. This adds a route-level `loading.tsx` whose skeleton has the same outer geometry: same height (`h-[calc(100vh-4rem)]`), same negative margins, same 340px sidebar with header/list/footer rails, and a main-pane placeholder sized to match the overview's header + hero card + stat band. The skeleton shape is intentionally generic so it works whether the resolving page is overview, detail, or create.
The SplitView is an IDE-style master-detail layout — fine on desktop,
broken on phones: at <450px viewport the 340px sidebar squeezes the
main pane down to ~100px, so the running-scan detail wraps text
letter-by-letter and the live severity tally collapses into an
unreadable stack.
Standard fix is master-detail responsive routing: on mobile show ONE
pane, picked from the URL.
- `/pentests` → list only (full-width sidebar)
- `/pentests/:id` → detail only (back-bar at top → list)
- `/pentests/new` → create form only (back-bar at top → list)
Desktop is unchanged — both panes render side by side as before.
Specifics:
- SplitView: hide whichever pane isn't active on mobile. New
mobile-only "← Scans" bar at the top of `<main>` so users have a
persistent path back to the list (the sidebar is the desktop
equivalent).
- RunList: `w-full md:w-[340px]` so the sidebar takes the full
viewport on phones and the fixed 340px column on tablet+.
- Detail / overview / failed / finding / empty state: padding drops
from `px-8 py-8` to `px-4 py-6 md:px-8 md:py-8` so content gets a
full-width feel without crowding the edges on small screens.
- LoadingShell helper plus per-route `loading.tsx` files for list /
detail / new — each variant's mobile skeleton matches its
resolving page, so a hard refresh on any pentest URL transitions
in without a CLS jump regardless of viewport.
… runs Customer report: > I left the page, went back to the penetration test tab and it says > no scans yet instead of just showing the latest one which had > already started `OverviewPane` filtered to `completed` runs and treated `length === 0` as "no scans yet" — but the sidebar at the same time correctly listed the running scan. The two views contradicted each other. Adds a third overview state for "0 completed, 1+ in-progress": a card that surfaces the running scan(s) with a click-to-view CTA. The existing onboarding state still fires when there's truly nothing (0 completed AND 0 in-progress); posture overview is unchanged for 1+ completed runs. No auto-redirect — the user might intentionally hit `/pentests` to see the list of scans, and forcing them into the live detail would be an annoying loop. They get a clear, predictable card to click into instead.
PostureOverview's "Recent scans" was filtered to completed-only, so a
user with prior completed history would see their currently running
scan in the sidebar but NOT in the overview's Recent list. Same
contradiction the prior commit fixed for the no-history case, just
one branch over.
Recent scans is an activity feed, not a success metric — it uses the
full `runs` list now. Coverage, avg duration, latest assessment, and
stale-target stats stay completed-only because those are genuinely
about completion (a running scan has no real duration; a failed scan
shouldn't reset the staleness clock; a target with only running scans
isn't yet "covered").
`RecentScansSection` already renders `StatusPill status={run.status}`
so it handles any status without further changes — running scans
appear with the RUNNING pill, failed with FAILED, etc.
Cubic flagged that the mobile-only "← Scans" bar SplitView renders on detail/create routes (md:hidden, ~33px tall) wasn't accounted for in the loading skeleton, so resolving the page on mobile shifted content down when the real bar mounted. LoadingShell now renders a placeholder bar with the same dimensions when `variant !== 'list'`. List variant has no back-bar so it's skipped there.
fix(pentest): loading shell + mobile-friendly split-view
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
No issues found across 12 files
Auto-approved: This PR focuses on mobile responsiveness, UI layout adjustments, and adding loading skeletons to improve the user experience. The changes are primarily styling and conditional rendering with no impact
Contributor
|
🎉 This PR is included in version 3.37.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This is an automated pull request to release the candidate branch into production, which will trigger a deployment.
It was created by the [Production PR] action.
Summary by cubic
Makes the pentest split view responsive on mobile and adds route-specific loading skeletons to prevent layout shifts. Also clarifies the overview when scans are running.
New Features
/pentestsshows list only;/pentests/:idand/pentests/newshow the main pane with a back bar.loading.tsxthat mirrors the split shell for list, detail, and create.Bug Fixes
Written for commit ba719ff. Summary will update on new commits. Review in cubic