fix: DisplayControls styles

[rohanchkrabrty]

Summary

• Resize the DisplayControls popover to 352px wide with radius-3 to match the Figma spec.
• Update Ordering, Grouping, and Display Properties section labels to use secondary foreground color and Body/Small Plus typography.
• Fix label width at 154px and let the right-side control flex, with gap-3 between the Ordering select and its sort icon button.
• Use gap-5 between the Display Properties title and chip wrap.
• Apply biome formatting to the popover CSS.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
apsara	Ready	Preview, Comment	Apr 30, 2026 8:47am

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 46c0b069-9359-4ff4-a78b-f8bd57aaea96

📥 Commits

Reviewing files that changed from the base of the PR and between fddcf49 and 1f6ff97.

📒 Files selected for processing (5)

• apps/www/src/app/examples/datatable/page.tsx
• packages/raystack/components/data-table/components/display-properties.tsx
• packages/raystack/components/data-table/components/grouping.tsx
• packages/raystack/components/data-table/components/ordering.tsx
• packages/raystack/components/data-table/data-table.module.css

---

📝 Walkthrough

Walkthrough

The pull request updates the DataTable example page to use client-side mode instead of server-side pagination, removing pagination state management and loading functions while supplying the full sample dataset. Simultaneously, multiple popover components within the DataTable system—specifically the display properties, grouping, and ordering controls—undergo layout and styling refinements to improve visual consistency. The CSS module is refactored to use flex-based layouts with explicit gap spacing and new utility classes, replacing previous fixed-width calculations. Column definitions in the example are expanded to enable sorting and grouping functionality across additional fields.

Suggested reviewers

• rsbh
• paanSinghCoder

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Review rate limit: 0/1 reviews remaining, refill in 60 minutes.}

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