Skip to content

[CRD] fix the grid layout on the dashboard#9771

Merged
bobbykolev merged 4 commits into
developfrom
crd-dashboard-layout
Jun 1, 2026
Merged

[CRD] fix the grid layout on the dashboard#9771
bobbykolev merged 4 commits into
developfrom
crd-dashboard-layout

Conversation

@bobbykolev
Copy link
Copy Markdown
Collaborator

@bobbykolev bobbykolev commented May 29, 2026

Reuse the layout from Space page on the dashboard and explore spaces. Fixes the mismatch between the topbar and the content.

Summary by CodeRabbit

  • Refactor

    • Adjusted dashboard and space list layouts to a multi-column grid, improving desktop content width and responsive behavior.
  • New Features

    • Recent spaces list now supports a configurable maximum number of items (defaults preserved), affecting skeleton and card counts.
  • Localization / Accessibility

    • Added sidebar navigation translations and switched the mobile drawer label to use the translated string for better accessibility.

@bobbykolev bobbykolev requested a review from ccanos May 29, 2026 14:56
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 29, 2026

Review Change Stack

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: efc7382a-fc3d-4740-9b7f-c2dc19942706

📥 Commits

Reviewing files that changed from the base of the PR and between dcb3460 and e17bd00.

📒 Files selected for processing (9)
  • src/crd/components/dashboard/DashboardLayout.tsx
  • src/crd/components/dashboard/RecentSpaces.tsx
  • src/crd/components/space/SpaceExplorer.tsx
  • src/crd/i18n/dashboard/dashboard.bg.json
  • src/crd/i18n/dashboard/dashboard.de.json
  • src/crd/i18n/dashboard/dashboard.en.json
  • src/crd/i18n/dashboard/dashboard.es.json
  • src/crd/i18n/dashboard/dashboard.fr.json
  • src/crd/i18n/dashboard/dashboard.nl.json

Walkthrough

Desktop layouts in DashboardLayout and SpaceExplorer are changed to a 12-column grid applying contentColumnClass; RecentSpaces adds a configurable maxItems and uses it for skeletons and visible card slicing; sidebar.navigation i18n keys were added across locales.

Changes

Layout, RecentSpaces, and localization

Layer / File(s) Summary
DashboardLayout grid refactor & aria
src/crd/components/dashboard/DashboardLayout.tsx
Import contentColumnClass, refactor desktop wrapper to grid grid-cols-12 with contentColumnClass() on the content column, and replace hardcoded drawer aria-label with t('sidebar.navigation').
SpaceExplorer grid refactor
src/crd/components/space/SpaceExplorer.tsx
Import contentColumnClass, change top-level wrapper from centered max-width to full-width padded container with grid-cols-12 and a col-span-12 main content column using contentColumnClass(). Add cardsListClassName for the cards <ul>.
RecentSpaces maxItems
src/crd/components/dashboard/RecentSpaces.tsx
Add optional maxItems?: number (default 4); slice spaces to visibleSpaces based on maxItems and placeholder presence; render maxItems skeleton placeholders and guard HomeSpacePlaceholder with homeSpaceSettingsHref and placeholderShown.
Translations: sidebar.navigation
src/crd/i18n/dashboard/dashboard.{bg,de,en,es,fr,nl}.json
Insert sidebar.navigation translation entries in Bulgarian, German, English, Spanish, French, and Dutch dashboard locale files.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
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 (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly describes the main change: fixing the grid layout on the dashboard by reusing the Space page layout structure.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch crd-dashboard-layout

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

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/crd/components/dashboard/DashboardLayout.tsx`:
- Line 89: Replace the hardcoded aria-label on the nav in DashboardLayout.tsx
with a localized call to t() from the 'crd' namespace (e.g., obtain t via
useTranslation('crd') in the component and use
aria-label={t('dashboard.navigation')}), and add the corresponding
"dashboard.navigation" key and translations to the CRD locale JSON/YAML files;
ensure the import/use of useTranslation('crd') (or existing i18n helper) is
present and remove the literal "Dashboard navigation" text.

In `@src/crd/components/space/SpaceExplorer.tsx`:
- Around line 234-253: The filter chip buttons rendered where
setPrivacyFilter('all') and setTypeFilter('all') are called lack
keyboard-visible focus styles; update the className of both button elements used
for privacy and type filters to include focus-visible utility classes (e.g.,
focus-visible:outline-none and a focus-visible:ring and ring color such as
focus-visible:ring-2 focus-visible:ring-primary or focus-visible:ring-ring) so
keyboard users get a clear focus indicator when tabbing to the buttons.
- Around line 285-291: The <ul> container rendering displayedSpaces should
include an explicit role attribute for accessibility; update the UL element that
uses className={cn('grid gap-6 list-none p-0 m-0', gridCols)} and
aria-label={t('spaces.spacesLabel')} to also include role="list" so the
collection containing the <li> items and <SpaceCard> children (props: space,
onParentClick) follows the CRD guideline requiring role="list" on list
containers.
🪄 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: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: f39dee46-f23a-4547-9214-36c822558d65

📥 Commits

Reviewing files that changed from the base of the PR and between 4f72ec0 and dcb3460.

📒 Files selected for processing (2)
  • src/crd/components/dashboard/DashboardLayout.tsx
  • src/crd/components/space/SpaceExplorer.tsx

Comment thread src/crd/components/dashboard/DashboardLayout.tsx Outdated
Comment thread src/crd/components/space/SpaceExplorer.tsx
Comment thread src/crd/components/space/SpaceExplorer.tsx Outdated
@bobbykolev
Copy link
Copy Markdown
Collaborator Author

@coderabbitai resolve

@bobbykolev bobbykolev merged commit 46f56e9 into develop Jun 1, 2026
4 of 5 checks passed
@bobbykolev bobbykolev deleted the crd-dashboard-layout branch June 1, 2026 09:43
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Jun 1, 2026

✅ Actions performed

Comments resolved. Approval is disabled; enable reviews.request_changes_workflow to allow explicit top-level @coderabbitai resolve or @coderabbitai approve commands.

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant