Skip to content

fix: default icon size to 16px in createIcon wrapper and fix download button alignment#27924

Merged
dhairyashiil merged 2 commits intomainfrom
devin/1770975341-fix-insights-ui-regressions
Feb 13, 2026
Merged

fix: default icon size to 16px in createIcon wrapper and fix download button alignment#27924
dhairyashiil merged 2 commits intomainfrom
devin/1770975341-fix-insights-ui-regressions

Conversation

@eunjae-lee
Copy link
Copy Markdown
Contributor

@eunjae-lee eunjae-lee commented Feb 13, 2026

What does this PR do?

Fixes two visual regressions on the Insights page:

  1. @coss/ui/icons wrapped icons defaulting to wrong size: The icon migration in refactor: migrate Icon to component icons from @coss/ui/icons #27458 replaced <Icon name="plus" /> (default 16px) with icons from @coss/ui/icons, which wrap lucide-react (default 24px). This caused icons like the "+" add-filter button to render 50% larger than intended. Fixed by setting size = 16 as the default in the createIcon wrapper (packages/coss-ui/src/icons.tsx) so all ~155 wrapped icons match the old <Icon> component behavior. Callers that explicitly pass a size prop are unaffected.

  2. "Download" button vertically misaligned: The button had self-end sm:self-baseline classes that override the parent container's items-center alignment. Fixed by removing the conflicting alignment classes.

Mandatory Tasks (DO NOT REMOVE)

  • I have self-reviewed the code (A decent size PR without self-review might be rejected).
  • I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. N/A — no docs changes needed.
  • I confirm automated tests are in place that prove my fix is effective or that my feature works. N/A — visual-only changes with no existing visual regression tests.

How should this be tested?

  1. Navigate to the Insights page (/insights)
  2. Verify the "+" add-filter button icon is normal small size (16px, not oversized 24px)
  3. Verify the "Download" button is vertically centered with the date picker
  4. Check other pages using DataTableFilters.FilterBar (Bookings, Members, etc.) — the "+" button should be correctly sized
  5. Spot-check icons across the app (sidebar, event types, settings, workflows) to confirm no icons appear unexpectedly small after the global default change

Human Review Checklist

  • Critical: Spot-check icons across the app to confirm the global size=16 default doesn't shrink any icons that were relying on lucide's 24px default without passing an explicit size prop
  • Visually verify both fixes on the Insights page
  • Check the "+" button size on other data table pages (Bookings, Members, etc.)
  • Verify Download button alignment on narrow viewports where flex-wrap activates

Link to Devin run: https://app.devin.ai/sessions/c5eaaa3e63f042d6a2410c56957f64a6
Requested by: @eunjae-lee

…wnload alignment

Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
@devin-ai-integration
Copy link
Copy Markdown
Contributor

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR that start with 'DevinAI' or '@devin'.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

Copy link
Copy Markdown
Contributor

@cubic-dev-ai cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

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

No issues found across 2 files

Co-Authored-By: eunjae@cal.com <hey@eunjae.dev>
@devin-ai-integration devin-ai-integration bot changed the title fix: resolve insights page UI regressions for plus button size and download alignment fix: default icon size to 16px in createIcon wrapper and fix download button alignment Feb 13, 2026
Copy link
Copy Markdown
Contributor

@cubic-dev-ai cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

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

1 issue found across 2 files (changes from recent commits).

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="apps/web/modules/data-table/components/filters/AddFilterButton.tsx">

<violation number="1">
P2: Removing the explicit `size={16}` will revert the plus icon to its 24px default, making the add-filter button oversized again. Keep the size prop to preserve the intended 16px icon.</violation>
</file>

Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Feb 13, 2026

Devin AI is addressing Cubic AI's review feedback

New feedback has been sent to the existing Devin session.

View Devin Session


✅ No changes pushed

@eunjae-lee eunjae-lee marked this pull request as ready for review February 13, 2026 09:48
@graphite-app graphite-app bot requested a review from a team February 13, 2026 09:48
@graphite-app graphite-app bot added consumer core area: core, team members only labels Feb 13, 2026
@dhairyashiil dhairyashiil enabled auto-merge (squash) February 13, 2026 09:49
@dhairyashiil dhairyashiil merged commit 1bb4b20 into main Feb 13, 2026
94 of 96 checks passed
@dhairyashiil dhairyashiil deleted the devin/1770975341-fix-insights-ui-regressions branch February 13, 2026 10:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

consumer core area: core, team members only ready-for-e2e size/XS

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants