Skip to content

feat: mobile responsive audit & polish - #33

Merged
NavpreetST merged 1 commit into
mainfrom
feat/mobile-responsive-audit
Jun 10, 2026
Merged

feat: mobile responsive audit & polish#33
NavpreetST merged 1 commit into
mainfrom
feat/mobile-responsive-audit

Conversation

@NavpreetST

@NavpreetST NavpreetST commented Jun 10, 2026

Copy link
Copy Markdown
Owner

Phase 1 exit mobile responsive and polish tasks.

Summary by CodeRabbit

  • New Features

    • Added status indicators and spinners for task submission feedback and loading states
    • Mobile-only close button for the chat panel; chat becomes a toggleable slide-over on small screens
  • Style

    • Improved responsive layouts and spacing across main, roadmap, and tasks pages
  • Chores

    • CI workflow updated to add an automated blocking check and a consolidated "merge-ready" gate, and to run on pull request review events

@vercel

vercel Bot commented Jun 10, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
axis-dash Ready Ready Preview, Comment Jun 10, 2026 1:35pm

@coderabbitai

coderabbitai Bot commented Jun 10, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@NavpreetST, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 1 minute and 13 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 7469a8c0-f088-45f2-92f9-0639333b4714

📥 Commits

Reviewing files that changed from the base of the PR and between e55de9d and 4cab8e8.

📒 Files selected for processing (5)
  • src/lib/components/ForgePanel.svelte
  • src/routes/+layout.svelte
  • src/routes/+page.svelte
  • src/routes/roadmap/+page.svelte
  • src/routes/todo/+page.svelte
📝 Walkthrough

Walkthrough

Adds a blocking CodeRabbit check and aggregated merge-ready gate to CI; updates ForgePanel with final-state styling and spinners; converts chat panel to a mobile slide-over with close button; and tweaks page spacing and responsive layout on roadmap and todo pages.

Changes

CI Workflow Blocking Gate

Layer / File(s) Summary
Workflow trigger and permissions
.github/workflows/ci.yml
Adds pull_request_review trigger and checks: read job permission to allow review-state inspection.
CodeRabbit blocking check and merge-ready gate
.github/workflows/ci.yml
Implements a blocking coderabbit-check job that fetches the PR and reviews, finds a CodeRabbit review matching the PR head SHA, and fails only when that review’s state is CHANGES_REQUESTED. Adds aggregated merge-ready job depending on lint, tests, coderabbit-check, and drift-guard and emits a readiness message.

Component UI Polish & Mobile Responsiveness

Layer / File(s) Summary
ForgePanel task feedback and loading states
src/lib/components/ForgePanel.svelte
Derives isFinal from task status to adjust border/background/text classes and label, shows a checkmark for completed tasks, replaces “waiting for status…” with a spinner + label, adds a connection-loading spinner for the left task list, and shows a spinner in the right detail panel loading placeholder.
Chat panel mobile responsiveness
src/routes/+layout.svelte
Chat <aside> becomes a toggleable sliding overlay on small screens (activeTab === 'chat') with fixed full-screen overlay behavior and a mobile-only close button that sets activeTab back to 'dashboard'.
Page layout and spacing refinements
src/routes/+page.svelte, src/routes/roadmap/+page.svelte, src/routes/todo/+page.svelte
Reduces main page gap from gap-6 to gap-5; roadmap header now wraps and phases list is a responsive 1→2 column grid with vertical scrolling and status tooltip; todo header and filter/count containers adjusted for responsive spacing.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

  • NavpreetST/axis-dash#30: Related CI Gate 3/Gate 5 rework matching the new CodeRabbit blocking check and merge-ready aggregation.
  • NavpreetST/axis-dash#22: Prior changes to src/lib/components/ForgePanel.svelte that overlap submitted-task/status UI updates.
  • NavpreetST/axis-dash#21: Earlier ForgePanel functionality and task submission flow that current UI tweaks build upon.

Poem

🐰
I hop through code with tiny feet,
Spinners glow and panels meet,
CodeRabbit peers and gates align,
Mobile slides and spacing fine,
The dash hums smooth — a little feat.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'feat: mobile responsive audit & polish' accurately reflects the primary changes across multiple files: responsive layout updates to the chat panel, roadmap page, tasks page, ForgePanel styling, and workflow configuration adjustments to support mobile responsiveness and UI polish.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/mobile-responsive-audit

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

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
.github/workflows/ci.yml (1)

6-7: 💤 Low value

Consider adding branches filter for consistency with the pull_request trigger.

The pull_request trigger (line 5) filters to main, but pull_request_review does not. The runtime condition on line 80 compensates, but adding the filter at the trigger level would avoid spinning up unnecessary workflow runs for reviews on other branches.

   pull_request_review:
     types: [submitted, edited, dismissed]
+    branches: [main]

This would also simplify the job condition to just if: always().

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In @.github/workflows/ci.yml around lines 6 - 7, Add a branches filter to the
pull_request_review trigger so it matches the pull_request trigger (e.g., add
branches: [main] under pull_request_review) to prevent runs for reviews on other
branches, and then simplify the job-level condition that currently checks the
branch at runtime to use if: always() instead; target the pull_request_review
and the job condition in the same workflow so the trigger-level filter and
simplified if clause stay consistent.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In @.github/workflows/ci.yml:
- Around line 6-7: Add a branches filter to the pull_request_review trigger so
it matches the pull_request trigger (e.g., add branches: [main] under
pull_request_review) to prevent runs for reviews on other branches, and then
simplify the job-level condition that currently checks the branch at runtime to
use if: always() instead; target the pull_request_review and the job condition
in the same workflow so the trigger-level filter and simplified if clause stay
consistent.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 60f2b37a-00a9-4fed-a645-82b7b76f4971

📥 Commits

Reviewing files that changed from the base of the PR and between a621374 and c9f3534.

📒 Files selected for processing (7)
  • .github/workflows/ci.yml
  • src/lib/components/ForgePanel.svelte
  • src/lib/components/KpiStrip.svelte
  • src/routes/+layout.svelte
  • src/routes/+page.svelte
  • src/routes/roadmap/+page.svelte
  • src/routes/todo/+page.svelte

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
src/routes/+layout.svelte (1)

368-373: ⚡ Quick win

Consider optimizing the transition property.

The chat panel only animates the transform property (translate-y), but uses transition-all which forces the browser to watch all animatable properties. For better performance, especially on mobile devices, consider using transition-transform.

⚡ Proposed optimization
-  class="flex shrink-0 flex-col overflow-hidden border-t border-hairline bg-bg-panel/10 transition-all duration-300 ease-out
+  class="flex shrink-0 flex-col overflow-hidden border-t border-hairline bg-bg-panel/10 transition-transform duration-300 ease-out
     max-sm:fixed max-sm:inset-0 max-sm:z-50
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/routes/`+layout.svelte around lines 368 - 373, The aside element uses a
broad "transition-all" causing unnecessary repaints; replace "transition-all
duration-300 ease-out" with "transition-transform duration-300 ease-out" on the
<aside> (the element that toggles with {activeTab === 'chat'} and uses
translate-y transforms) so the browser only tracks transform changes for
smoother, more performant animations on mobile.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@src/routes/`+layout.svelte:
- Around line 368-373: The aside element uses a broad "transition-all" causing
unnecessary repaints; replace "transition-all duration-300 ease-out" with
"transition-transform duration-300 ease-out" on the <aside> (the element that
toggles with {activeTab === 'chat'} and uses translate-y transforms) so the
browser only tracks transform changes for smoother, more performant animations
on mobile.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 72543db1-1c0d-4058-ac3d-fb7b5d94ddde

📥 Commits

Reviewing files that changed from the base of the PR and between c9f3534 and 0632392.

📒 Files selected for processing (2)
  • src/lib/components/ForgePanel.svelte
  • src/routes/+layout.svelte
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/lib/components/ForgePanel.svelte

@NavpreetST

Copy link
Copy Markdown
Owner Author

@coderabbitai review

@coderabbitai

coderabbitai Bot commented Jun 10, 2026

Copy link
Copy Markdown
✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@NavpreetST

Copy link
Copy Markdown
Owner Author

@coderabbitai approve

@coderabbitai

coderabbitai Bot commented Jun 10, 2026

Copy link
Copy Markdown
✅ Action performed

Comments resolved. Approval is disabled; enable reviews.request_changes_workflow to allow explicit top-level @coderabbitai resolve or @coderabbitai approve commands.

@NavpreetST

Copy link
Copy Markdown
Owner Author

@coderabbitai help

@coderabbitai

coderabbitai Bot commented Jun 10, 2026

Copy link
Copy Markdown

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

CodeRabbit commands

These commands are invoked using PR/Issue comments.

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai rate limit to show your current review rate limit status.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai evaluate custom pre-merge check --instructions <custom-checks-instructions> --name <custom-checks-title> [--mode <error|warning>] to validate the custom pre-merge checks instructions. Defaults to error when --mode is omitted.
  • @coderabbitai ignore pre-merge checks to override pre-merge checks and get an approval on PR.
  • @coderabbitai run pre-merge checks to run pre-merge checks on the pull request.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai generate unit tests to generate unit tests for this PR.
  • @coderabbitai emit path instructions to emit generated path-specific review instructions for this repository.
  • @coderabbitai resolve merge conflict to automatically resolve merge conflicts.
  • @coderabbitai autofix to automatically fix issues identified in unresolved review comments.
  • @coderabbitai resolve to resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai generate configuration to create a PR that adds the current resolved configuration as .coderabbit.yaml (or show it if already present).
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore or @coderabbit ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit configuration file (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • You can also validate your configuration using the online YAML validator.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, support, documentation and community

  • Visit our status page to check the current availability of CodeRabbit.
  • Create a ticket on our support page for assistance with any issues or questions.
  • Visit our documentation site for detailed information on how to use CodeRabbit.
  • Join our Discord community to connect with other users and get help from the community.
  • Follow us on X/Twitter for updates and announcements.

@NavpreetST

Copy link
Copy Markdown
Owner Author

@coderabbitai approve

@coderabbitai

coderabbitai Bot commented Jun 10, 2026

Copy link
Copy Markdown
✅ Action performed

Comments resolved. Approval is disabled; enable reviews.request_changes_workflow to allow explicit top-level @coderabbitai resolve or @coderabbitai approve commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
.github/workflows/ci.yml (1)

12-12: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

checks: read permission is unused.

The workflow accesses reviews via pulls.listReviews (covered by pull-requests: read) but never calls the Checks API. Consider removing this permission to follow least-privilege.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In @.github/workflows/ci.yml at line 12, Remove the unused Checks API permission
by deleting the "checks: read" entry from the workflow permissions and ensure
only the required "pull-requests: read" permission remains; update the
permissions block so it grants least privilege (e.g., keep "pull-requests: read"
and any other actually-used scopes) and verify no workflow steps call the Checks
API before committing.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In @.github/workflows/ci.yml:
- Line 12: Remove the unused Checks API permission by deleting the "checks:
read" entry from the workflow permissions and ensure only the required
"pull-requests: read" permission remains; update the permissions block so it
grants least privilege (e.g., keep "pull-requests: read" and any other
actually-used scopes) and verify no workflow steps call the Checks API before
committing.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 11257231-2b9b-4009-8d16-dc456dd828dc

📥 Commits

Reviewing files that changed from the base of the PR and between 0632392 and e55de9d.

📒 Files selected for processing (1)
  • .github/workflows/ci.yml

- KPI strip: max-sm:text-[22px] to prevent truncation
- Task board: filter bar stacks vertically on mobile
- Roadmap: grid-cols-1 md:grid-cols-2 for phase cards
- Chat dock: full-screen fixed overlay with slide-up animation
- Consistent gap-5 across all panels
- ForgePanel: loading spinners, submit feedback with checkmark
- Status dot tooltips on roadmap phases
@NavpreetST
NavpreetST force-pushed the feat/mobile-responsive-audit branch from f3555a0 to 4cab8e8 Compare June 10, 2026 13:35
@NavpreetST
NavpreetST merged commit f94beeb into main Jun 10, 2026
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant