mobile: Responsive reports and header interactions #1060
Conversation
Greptile OverviewGreptile SummaryThis PR introduces mobile responsiveness improvements for Reports components by:
Issues found:
The implementation follows the custom rule for mobile responsiveness by using JS-based class switching with Confidence Score: 4/5
Important Files ChangedFile Analysis
Sequence DiagramsequenceDiagram
participant User
participant Reports
participant ReportsSelector
participant Drawer
participant ReportComponent
participant DateSelection
User->>Reports: Open Reports View
Reports->>Reports: useElementViewSize() to detect viewport
alt Multiple Reports Enabled
Reports->>ReportsSelector: Render with view prop
alt Mobile View
ReportsSelector->>ReportsSelector: Show dropdown button
User->>ReportsSelector: Click dropdown button
ReportsSelector->>Drawer: Open mobile drawer
User->>Drawer: Select report type
Drawer->>ReportsSelector: onChange callback
ReportsSelector->>Reports: Update activeTab
Drawer->>Drawer: Close
else Desktop View
ReportsSelector->>ReportsSelector: Show Toggle component
User->>ReportsSelector: Click tab
ReportsSelector->>Reports: Update activeTab
end
end
Reports->>ReportComponent: Render selected report (PnL/Balance/Cashflow)
ReportComponent->>ReportComponent: Check if mobile && full date mode
alt Mobile && Full Date Mode
ReportComponent->>DateSelection: Render DateSelectionComboBox
ReportComponent->>DateSelection: Render separate date pickers (LabeledGlobalDatePicker or DateRangePickers)
else Desktop or Non-Full Mode
ReportComponent->>DateSelection: Render CombinedDateSelection
end
User->>DateSelection: Change date
DateSelection->>ReportComponent: Update global date state
ReportComponent->>ReportComponent: Fetch new data
ReportComponent->>User: Display updated report
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
This PR is being reviewed by Cursor Bugbot
Details
Your team is on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle for each member of your team.
To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.
|
xxx Commits included changes not meant for this PR. Removed. |
darrensapalo
force-pushed
the
darren/lay-2064-reports-button-group-overflow
branch
from
12d9a55 to
6b85fa3
Compare
|
Fixes:
|
| <BalanceSheetDownloadButton | ||
| effectiveDate={effectiveDate} | ||
| iconOnly | ||
| /> |
There was a problem hiding this comment.
Bug: Download button always shows icon-only on desktop
The BalanceSheetDownloadButton and ProfitAndLossDownloadButton now have iconOnly unconditionally set to true in the desktop/fallback header path. Previously, iconOnly was conditional on view === 'mobile', meaning desktop users would see the "Download" text label alongside the icon. This change removes the label on desktop, which may be unintentional UI regression.
Additional Locations (1)
There was a problem hiding this comment.
| <BalanceSheetDownloadButton | ||
| effectiveDate={effectiveDate} | ||
| iconOnly | ||
| /> |
There was a problem hiding this comment.
Is there a reason to split DateRangePickers and LabeledGlobalDatePicker instead of just extending DateRangePickers?
There was a problem hiding this comment.
DateRangePicker is for date ranges (i.e. start to end date):
Accounting context: Income statements (PNL) and statements of cash flow are reports generated using date ranges by their accounting definitions (how much earned within the period, or how cash has moved within a period).
LabeledGlobalDatePicker is for picking a single date:
Accounting context: Balance sheets are reports generated on a single point in time (e.g. how much assets did we have in a certain point in time? how much liabilities did we have in a certain point in time?)
Why use LabeledGlobalDatePicker instead of just <DatePicker> directly?
Right now, balance sheet is one use-case where we want (1) a date picker that is labeled and (2) connected to the global state for the current date selected.
Although only used in one place right now, I can imagine other places where this date picker might be useful:
- Another report might be: "show me the chart of accounts as of a certain point in time" which may want to use the global date picker. So that when the user looks at the balance sheet as of Jan 2024, and then moves to Chart of Accounts, the date picker is there as well, indicating that the CoA is tied to the time period currently selected.
src/components/ProfitAndLossDownloadButton/ProfitAndLossDownloadButton.tsx
Show resolved
Hide resolved
Description
Releasing component mobile responsiveness changes for our Reports components.
Changes
Blockers
None.
How this has been tested?
Mobile view test:
layer-react - 12/08/2025 - mobile friendly reports component - Watch Video
Desktop view regression test:
Mobile responsive reports - regression check on Desktop - Watch Video
Note
Adds mobile-responsive report headers with compact date controls and a new mobile drawer-based report selector; refactors download buttons and date pickers across reports.
ReportsSelectorwith mobile drawer (ReportsSelector.tsx/.scss) and replace header toggle usage inviews/Reports/Reports.tsx.viewintoProfitAndLossReportand use size class in report components for responsive behavior.DateRangePickersandLabeledGlobalDatePickercomponents for labeled, constrained date inputs.DateSelectionComboBox+ labeled pickers in mobile headers.widgetHeader/headerwith mobile layout using combo box, labeled date picker, expand-all, and icon-only download.useSizeClass; mobile header with combo box, range pickers, and icon-only download; simplifiedViewheader prop.ProfitAndLossDownloadButtonacceptsiconOnlyprop; remove window size logic.UnifiedReportDownloadButtonnow uses sharedDownloadButtonwith loading/error states and invisible download trigger.Written by Cursor Bugbot for commit 9c0ff36. This will update automatically on new commits. Configure here.