Skip to content

feat(repositories): polish page for mobile - controls, chart#951

Open
syndrome4002-leo wants to merge 2 commits intoentrius:testfrom
syndrome4002-leo:feat/repositories-page-mobile-polish
Open

feat(repositories): polish page for mobile - controls, chart#951
syndrome4002-leo wants to merge 2 commits intoentrius:testfrom
syndrome4002-leo:feat/repositories-page-mobile-polish

Conversation

@syndrome4002-leo
Copy link
Copy Markdown

@syndrome4002-leo syndrome4002-leo commented May 6, 2026

Summary

  • Restructured the table controls bar on mobile into clearly stacked rows: filter pills → search → Row: + count + view-toggle → Sort: + direction icon → chart toggle (with Log Scale switch when chart is open). Search input is always visible — no more icon-toggle.
  • Aligned Row: and Sort: dropdowns to identical 140px width and matching left edges (36px leading-element width on both rows).
  • Tightened page-level padding and highlight-card spacing (Trending / Most Collateral / Recent PRs) on xs, and compacted RepositoryCard padding, typography, avatar, and status pill for mobile.
  • Compacted TablePagination toolbar on xs (smaller min-height, font, action buttons; centered wrapping).
  • Log Scale label sits on the left with the switch on the right; chart toggle is pinned to the far right of the row via ml: auto.
  • Chart polish: shorter container height on mobile (360 / 440 / 500), smaller title font (13 vs 18) with reduced top offset, hide y-axis name on xs so it stops colliding with the title, and tooltip.confine: true so tooltips no longer get clipped by the parent card's overflow: hidden.

Test plan

  • Open /repositories?view=cards at ≤375px width — verify rows stack in order: filters, search, Row + view-toggle, Sort + direction, chart toggle.
  • Toggle chart open — Log Scale switch appears between sort row and chart toggle, with text on the left, switch on the right; chart toggle stays pinned to the right.
  • Verify Row: and Sort: dropdowns share the same width and left edge on mobile.
  • Open the chart on mobile — y-axis name is gone, title fits without crowding the bars, and a bar tooltip stays inside the chart instead of being clipped.
  • Switch to list view at mobile width — pagination wraps and centers cleanly without overflowing.
  • Resize from mobile to desktop — controls reflow inline, search becomes 200px, chart toggle returns to its original inline position with no layout regression.

Related Issues

Type of Change

  • Bug fix
  • New feature
  • Refactor
  • Documentation
  • Other (describe below)

Screenshots

Before:

Screenshot_1

Now:

Screenshot_2

Checklist

  • New components are modularized/separated where sensible
  • Uses predefined theme (e.g. no hardcoded colors)
  • Responsive/mobile checked
  • Tested against the test API
  • npm run format and npm run lint:fix have been run
  • npm run build passes
  • Screenshots included for any UI/visual changes

@xiao-xiao-mao xiao-xiao-mao Bot added the enhancement New feature or request label May 6, 2026
Resolve conflict in TopRepositoriesTable.tsx by keeping the mobile-polish
layout (compact chart title, responsive search width, separate mobile
chart-controls row, responsive chart Collapse padding/height) while
adopting main's chartMetricKey-driven chartTopRepositories ranking and
compactSortableHeaderSx for list view headers.
@syndrome4002-leo
Copy link
Copy Markdown
Author

@ventura-oss Could you please review this PR?

@ventura-oss
Copy link
Copy Markdown
Contributor

ventura-oss commented May 10, 2026

⚠️ Skipped during review — No CI checks have run on this PR. CI requires maintainer approval for first-time contributors and won't auto-run regardless of new pushes. A maintainer will approve the workflow run when ready to review.

@syndrome4002-leo
Copy link
Copy Markdown
Author

Hello @anderdc Could you please review this PR?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants