refactor: improve chart card spacing and remove unused routing logic

[impoiler]

Summary

Improves chart card layout consistency and removes unnecessary width constraints from date picker components.

Changes

• Applied className prop to ChartCard loading state for consistent styling
• Reduced bottom margin in chart card header from mb-3 to mb-2
• Removed inline marginBottom: 6 style from chart skeleton container
• Added min-h-5 class to chart header legend for consistent height
• Removed fixed width constraints from DateTimePickerWithRange button
• Simplified logs layout by removing unused Outlet and child match logic

Type of change

• Refactor
• Bug fix
• Feature
• Documentation
• Chore/CI

Affected areas

• Core (Go)
• Transports (HTTP)
• Providers/Integrations
• Plugins
• UI (React)
• Docs

How to test

Verify chart cards display consistently across different loading states and that date picker components adapt to their container width properly.

# UI
cd ui
pnpm i || npm i
pnpm test || npm test
pnpm build || npm run build

Screenshots/Recordings

If UI changes, add before/after screenshots or short clips.

Breaking changes

• No
• Yes

Related issues

Link related issues and discussions. Example: Closes #123

Security considerations

No security implications.

Checklist

• I read docs/contributing/README.md and followed the guidelines
• I added/updated tests where appropriate
• I updated documentation where needed
• I verified builds succeed (Go and UI)
• I verified the CI pipeline passes locally if applicable

[coderabbitai]

Warning

Rate limit exceeded

@impoiler has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 0 minutes and 47 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 0 minutes and 47 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, 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 have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 415a35b2-d86f-4613-87e9-6ed04cd43d31

📥 Commits

Reviewing files that changed from the base of the PR and between 8222a72 and 1811eca.

📒 Files selected for processing (8)

• ui/app/workspace/dashboard/components/charts/chartCard.tsx
• ui/app/workspace/dashboard/utils/chartUtils.ts
• ui/app/workspace/logs/layout.tsx
• ui/app/workspace/logs/views/columns.tsx
• ui/app/workspace/logs/views/logsTable.tsx
• ui/app/workspace/mcp-logs/views/columns.tsx
• ui/components/table/draggableColumnHeader.tsx
• ui/components/ui/datePickerWithRange.tsx

📝 Walkthrough

Walkthrough

Minor UI adjustments: chart loading class merging and header spacing; chart header legend min-height added; table column sizes, truncation, and pinned-width enforcement tightened; loading row height reduced; date-picker trigger width classes removed; import reorder in logs layout.

Changes

Cohort / File(s)	Summary
Chart styling ui/app/workspace/dashboard/components/charts/chartCard.tsx, ui/app/workspace/dashboard/utils/chartUtils.ts	Loading Card now merges incoming className via cn(...); header spacing changed mb-3 → mb-2; skeleton wrapper no longer includes inline marginBottom; added min-h-5 to CHART_HEADER_LEGEND_CLASS.
Logs layout import reorder ui/app/workspace/logs/layout.tsx	Reordered imports so @tanstack/react-router imports appear after some local imports; no runtime or route behavior changed.
Logs columns & table rendering ui/app/workspace/logs/views/columns.tsx, ui/app/workspace/logs/views/logsTable.tsx	Multiple columns given explicit size values; cell renderers add truncate; loading placeholder row height reduced (h-24 → h-12); pinned cells now apply explicit width/minWidth/maxWidth from cell.column.getSize(); TableCell gains overflow-hidden; some imports reordered.
MCP logs columns ui/app/workspace/mcp-logs/views/columns.tsx	Timestamp column size increased (180 → 230) and timestamp cell adds truncate; actions column set to size: 72.
Draggable column header sizing ui/components/table/draggableColumnHeader.tsx	<th> now applies explicit width, minWidth, and maxWidth derived from header.getSize() merged with existing pin styles.
Date picker trigger ui/components/ui/datePickerWithRange.tsx	Removed conditional fixed-width Tailwind classes from the trigger Button; width is no longer enforced based on predefinedPeriod.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I nibble pixels, trim the space,

I tuck long text in tidy place,
I size the headers, fix the span,
I hop through imports, change a plan,
Charts and tables dressed with care ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 3

❌ Failed checks (3 warnings)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	The linked issue (#123) about Files API Support is completely unrelated to the PR's UI refactoring changes for chart spacing and date picker constraints.	Verify the correct linked issue for this PR. The Files API Support issue does not correspond to UI layout refactoring work.
Out of Scope Changes check	⚠️ Warning	The PR includes scope creep beyond stated objectives: reordering imports in logs/layout.tsx and column sizing changes in multiple table components exceed the explicit chart card and date picker refactoring goals.	Either add these table/column sizing changes to PR objectives or move them to a separate refactoring PR to maintain focused scope.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main changes: refactoring chart card spacing and removing unused routing logic from logs layout.
Description check	✅ Passed	The description covers all required sections with sufficient detail: summary, changes, type, affected areas, testing instructions, and checklist.

_{✏️ 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 04-16-fix_prevent_chart_layout_shifts_during_loading_states

---

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

[impoiler]

• feat: responsive design [DO NOT MERGE] #2767
• feat: replace skeleton loading states with NumberFlow animations in logs #2752
• refactor: improve chart card spacing and remove unused routing logic #2751 👈 (View in Graphite)
• refactor: extract header components and add collapsible filter sidebars #2750
• refactor: replace MCP logs filter dropdown with dedicated sidebar #2745
• refactor: move LogsSidebar to shared LogsFilterSidebar component and add dashboard date picker #2744
• refactor: replace FilterPopover with LogsSidebar in dashboard layout #2743
• feat: add sidebar filters to logs page #2731
• v1.5.0

This stack of pull requests is managed by Graphite. Learn more about stacking.

[greptile-apps]

Confidence Score: 5/5

Safe to merge — all changes are cosmetic spacing/class tweaks with no logic or data-flow impact.

No P0 or P1 findings. The className forwarding fix in ChartCard's loading state is the most substantive change and it is correct. Routing logic (Outlet/useChildMatches) remains intact, addressing the concern raised in the previous review thread.

No files require special attention.

Important Files Changed

Filename	Overview
ui/app/workspace/dashboard/components/charts/chartCard.tsx	Loading state now correctly forwards className prop and uses mb-2 (consistent with non-loading), and skeleton container no longer has inline marginBottom style.
ui/app/workspace/dashboard/utils/chartUtils.ts	Added min-h-5 to CHART_HEADER_LEGEND_CLASS to ensure consistent legend height across all chart cards, preventing layout shifts when legend is empty.
ui/app/workspace/logs/layout.tsx	Outlet and useChildMatches remain in place, correctly supporting the /workspace/logs/connectors child route; PR description's mention of removing them does not match the current code.
ui/components/ui/datePickerWithRange.tsx	Fixed-width constraint removed from DateTimePickerWithRange trigger button, making it adapt to container width; DateTimePicker (single) retains its w-max class as before.
ui/app/workspace/logs/views/logsTable.tsx	No functional changes apparent in current state; table with draggable headers, pinning, pagination, and live-update indicators all look correct.
ui/app/workspace/logs/views/columns.tsx	Column definitions unchanged; all cell renderers, sizes, and sorting headers are intact.
ui/app/workspace/mcp-logs/views/columns.tsx	MCP log column definitions unchanged; status validation, date formatting, and action button look correct.
ui/components/table/draggableColumnHeader.tsx	Draggable column header component unchanged; drag-and-drop, pin, and hide logic all intact.

_{Reviews (7): Last reviewed commit: "fix: prevent chart layout shifts during ..." | Re-trigger Greptile}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@ui/app/workspace/logs/layout.tsx`:
- Line 3: The layout currently always renders <LogsPage /> which prevents nested
routes from mounting; update the layout component (the default export in this
file that currently returns <LogsPage />) to render <Outlet /> instead and move
<LogsPage /> into an index route so child routes like /workspace/logs/connectors
can render; ensure you import Outlet from react-router (or
`@tanstack/react-router` if using its Outlet) and remove the unconditional
<LogsPage /> render, using <Outlet /> in the layout and registering LogsPage as
the index route.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a30e8c81-d92b-4081-9c18-21b7d6add9a1

📥 Commits

Reviewing files that changed from the base of the PR and between 8ab3654 and 6da298e.

📒 Files selected for processing (8)

• ui/app/workspace/dashboard/components/charts/chartCard.tsx
• ui/app/workspace/dashboard/utils/chartUtils.ts
• ui/app/workspace/logs/layout.tsx
• ui/app/workspace/logs/views/columns.tsx
• ui/app/workspace/logs/views/logsTable.tsx
• ui/app/workspace/mcp-logs/views/columns.tsx
• ui/components/table/draggableColumnHeader.tsx
• ui/components/ui/datePickerWithRange.tsx

💤 Files with no reviewable changes (1)

• ui/components/ui/datePickerWithRange.tsx

[coderabbitai]

🧹 Nitpick comments (1)

ui/app/workspace/dashboard/components/charts/chartCard.tsx (1)

17-46: Optional: extract shared header/card shell to avoid branch drift.

Both branches duplicate the same card shell + header markup. A small extraction would reduce future divergence risk.

♻️ Suggested refactor

 export function ChartCard({ title, children, headerActions, loading, testId, height = "200px", className }: ChartCardProps) {
-	if (loading) {
-		return (
-			<Card className={cn("min-w-0 rounded-sm p-2 shadow-none", className)} data-testid={testId}>
-				<div className="mb-2 space-y-2">
-					<span className="text-primary pl-2 text-sm font-medium">{title}</span>
-					{headerActions && (
-						<div className="w-full min-w-0" data-testid={testId ? `${testId}-actions` : undefined}>
-							{headerActions}
-						</div>
-					)}
-				</div>
-				<div style={{ height }} data-testid={testId ? `${testId}-chart-skeleton` : undefined}>
-					<Skeleton className="h-full w-full" />
-				</div>
-			</Card>
-		);
-	}
-
 	return (
 		<Card className={cn("min-w-0 rounded-sm p-2 shadow-none", className)} data-testid={testId}>
 			<div className="mb-2 space-y-2">
 				<span className="text-primary pl-2 text-sm font-medium">{title}</span>
 				{headerActions && (
 					<div className="w-full min-w-0" data-testid={testId ? `${testId}-actions` : undefined}>
 						{headerActions}
 					</div>
 				)}
 			</div>
-			<div style={{ height }}>{children}</div>
+			{loading ? (
+				<div style={{ height }} data-testid={testId ? `${testId}-chart-skeleton` : undefined}>
+					<Skeleton className="h-full w-full" />
+				</div>
+			) : (
+				<div style={{ height }}>{children}</div>
+			)}
 		</Card>
 	);
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@ui/app/workspace/dashboard/components/charts/chartCard.tsx` around lines 17 -
46, The Card markup and header block are duplicated in the loading and
non-loading branches of the ChartCard component; extract the shared card shell
and header into a single helper (e.g., a renderCardShell function or a small
subcomponent like ChartCardShell) that accepts props: title, headerActions,
className, testId, height and children (or a loading flag to render Skeleton
when needed) and use that single rendering path inside ChartCard to avoid branch
drift while preserving existing symbols Card, title, headerActions, testId,
height, Skeleton, className and children.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@ui/app/workspace/dashboard/components/charts/chartCard.tsx`:
- Around line 17-46: The Card markup and header block are duplicated in the
loading and non-loading branches of the ChartCard component; extract the shared
card shell and header into a single helper (e.g., a renderCardShell function or
a small subcomponent like ChartCardShell) that accepts props: title,
headerActions, className, testId, height and children (or a loading flag to
render Skeleton when needed) and use that single rendering path inside ChartCard
to avoid branch drift while preserving existing symbols Card, title,
headerActions, testId, height, Skeleton, className and children.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 7d56858d-b096-4956-92c2-410737149ecc

📥 Commits

Reviewing files that changed from the base of the PR and between 6da298e and 75d19a0.

📒 Files selected for processing (8)

• ui/app/workspace/dashboard/components/charts/chartCard.tsx
• ui/app/workspace/dashboard/utils/chartUtils.ts
• ui/app/workspace/logs/layout.tsx
• ui/app/workspace/logs/views/columns.tsx
• ui/app/workspace/logs/views/logsTable.tsx
• ui/app/workspace/mcp-logs/views/columns.tsx
• ui/components/table/draggableColumnHeader.tsx
• ui/components/ui/datePickerWithRange.tsx

💤 Files with no reviewable changes (1)

• ui/components/ui/datePickerWithRange.tsx

✅ Files skipped from review due to trivial changes (2)

• ui/app/workspace/logs/layout.tsx
• ui/app/workspace/dashboard/utils/chartUtils.ts

🚧 Files skipped from review as they are similar to previous changes (2)

• ui/app/workspace/mcp-logs/views/columns.tsx
• ui/components/table/draggableColumnHeader.tsx

[akshaydeo]

Merge activity

• Apr 16, 2:34 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Apr 16, 2:35 PM UTC: Graphite couldn't merge this pull request because a downstack PR feat: add sidebar filters to logs page #2731 failed to merge.
• Apr 16, 3:16 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Apr 16, 3:25 PM UTC: @akshaydeo merged this pull request with Graphite.

The base branch was changed.