fix(dashboard): Fix intersecting borders and inconsistent rounded corners #3717
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe update changes the CSS class names for the wrapper div in the Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes 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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/dashboard/src/lib/framework/layout-engine/location-wrapper.tsx (2)
74-80: Duplicatering-offset-*classes – pick one instead of stacking
ring-offset-4is always present, andring-offset-8is appended whenisPageWrapperis true.
Tailwind will resolve the conflict by keeping the last occurrence (ring-offset-8), but the redundant earlier value adds bytes to the class list and can confuse readers.- `ring-2 transition-all ring-offset-4 delay-50 relative`, + `ring-2 transition-all delay-50 relative`, ... - isPageWrapper ? 'ring-offset-8' : '', + isPageWrapper ? 'ring-offset-8' : 'ring-offset-4',This keeps the intent (4 px for blocks, 8 px for the page wrapper) while avoiding duplication.
75-76: Template literal without interpolationThe first argument to
cn()is a template literal that contains no interpolations. Use a plain string for marginally clearer intent and to avoid unnecessary back-ticks.- `ring-2 transition-all ring-offset-4 delay-50 relative`, + 'ring-2 transition-all ring-offset-4 delay-50 relative',
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/dashboard/src/lib/framework/layout-engine/location-wrapper.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
packages/dashboard/src/**/*.{tsx,jsx}
📄 CodeRabbit Inference Engine (.cursor/rules/dashboard.mdc)
packages/dashboard/src/**/*.{tsx,jsx}: Use React for all UI components in the dashboard package.
Prefer re-using components from /src/lib/components, especially Shadcn components from /src/lib/components/ui.
Prefer using the FormFieldWrapper component for forms over raw Shadcn components.
All labels or user-facing messages should use localization via the Trans component or useLingui().
Files:
packages/dashboard/src/lib/framework/layout-engine/location-wrapper.tsx
packages/dashboard/src/**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/dashboard.mdc)
packages/dashboard/src/**/*.{ts,tsx}: Use TanStack Query (useQuery or useMutation) for data fetching; do not use Apollo Client.
When creating useQuery calls, follow the provided pattern: import { api } from '@/graphql/api.js'; import { graphql } from '@/graphql/graphql.js'; use useQuery with queryKey, staleTime, and queryFn using api.query.
When performing mutations, follow the provided useMutation pattern: use graphql() for the mutation document, api.mutate for mutationFn, and do not pass variables at declaration.
Files:
packages/dashboard/src/lib/framework/layout-engine/location-wrapper.tsx
packages/dashboard/src/**/*.{tsx,ts}
📄 CodeRabbit Inference Engine (.cursor/rules/dashboard.mdc)
React component props objects should be typed as Readonly<...>.
Files:
packages/dashboard/src/lib/framework/layout-engine/location-wrapper.tsx
🧠 Learnings (5)
📚 Learning: applies to packages/dashboard/src/lib/components/**/*.{tsx,jsx} : use shadcn ui and tailwind css for...
Learnt from: CR
PR: vendure-ecommerce/vendure#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-23T07:05:04.344Z
Learning: Applies to packages/dashboard/src/lib/components/**/*.{tsx,jsx} : Use Shadcn UI and Tailwind CSS for UI components.
Applied to files:
packages/dashboard/src/lib/framework/layout-engine/location-wrapper.tsx
📚 Learning: applies to packages/dashboard/src/**/*.{tsx,jsx} : prefer using the formfieldwrapper component for f...
Learnt from: CR
PR: vendure-ecommerce/vendure#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-23T07:05:04.344Z
Learning: Applies to packages/dashboard/src/**/*.{tsx,jsx} : Prefer using the FormFieldWrapper component for forms over raw Shadcn components.
Applied to files:
packages/dashboard/src/lib/framework/layout-engine/location-wrapper.tsx
📚 Learning: applies to packages/dashboard/src/**/*.{tsx,jsx} : prefer re-using components from /src/lib/componen...
Learnt from: CR
PR: vendure-ecommerce/vendure#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-23T07:05:04.344Z
Learning: Applies to packages/dashboard/src/**/*.{tsx,jsx} : Prefer re-using components from /src/lib/components, especially Shadcn components from /src/lib/components/ui.
Applied to files:
packages/dashboard/src/lib/framework/layout-engine/location-wrapper.tsx
📚 Learning: applies to packages/dashboard/src/**/*.{tsx,jsx} : all labels or user-facing messages should use loc...
Learnt from: CR
PR: vendure-ecommerce/vendure#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-23T07:05:04.344Z
Learning: Applies to packages/dashboard/src/**/*.{tsx,jsx} : All labels or user-facing messages should use localization via the Trans component or useLingui().
Applied to files:
packages/dashboard/src/lib/framework/layout-engine/location-wrapper.tsx
📚 Learning: applies to packages/dashboard/src/**/*.{tsx,jsx} : use react for all ui components in the dashboard ...
Learnt from: CR
PR: vendure-ecommerce/vendure#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-23T07:05:04.344Z
Learning: Applies to packages/dashboard/src/**/*.{tsx,jsx} : Use React for all UI components in the dashboard package.
Applied to files:
packages/dashboard/src/lib/framework/layout-engine/location-wrapper.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (18)
- GitHub Check: unit tests (20.x)
- GitHub Check: codegen / codegen
- GitHub Check: unit tests (24.x)
- GitHub Check: unit tests (22.x)
- GitHub Check: publish_install (macos-latest, 24.x)
- GitHub Check: publish_install (windows-latest, 22.x)
- GitHub Check: publish_install (macos-latest, 22.x)
- GitHub Check: publish_install (macos-latest, 20.x)
- GitHub Check: publish_install (windows-latest, 24.x)
- GitHub Check: publish_install (windows-latest, 24.x)
- GitHub Check: publish_install (windows-latest, 20.x)
- GitHub Check: publish_install (ubuntu-latest, 20.x)
- GitHub Check: publish_install (ubuntu-latest, 24.x)
- GitHub Check: publish_install (ubuntu-latest, 22.x)
- GitHub Check: publish_install (ubuntu-latest, 22.x)
- GitHub Check: publish_install (ubuntu-latest, 24.x)
- GitHub Check: publish_install (windows-latest, 22.x)
- GitHub Check: Analyze (javascript-typescript)
Description
I noticed that the devmode was causing a layout shift for some elements.
This fixed that removing an unnecssary ring-inset class and uses ring-offset instead.
Border radii since some of them were intersecting - looked ugly.
Screenshots
this is what was fixed, ignore red line
Checklist
📌 Always:
👍 Most of the time:
Summary by CodeRabbit