chore: checkbox visual rework#101
Conversation
|
Caution Review failedThe pull request is closed. WalkthroughUpdated UI and Tailwind classes across three components: switched checkbox sizing to UI tokens, adjusted dropdown positioning and item padding, added placeholder muted class to several UI slot base classes, and removed centering classes from an input. No logic or control-flow changes. Changes
Sequence Diagram(s)Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. 📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (1)
✨ Finishing Touches🧪 Generate unit tests
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. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/atrium-telegram/app/components/TaskCard.vue (1)
25-27: DRY the repeated inline:uiobject.Extract a shared const to avoid duplication and keep future tweaks in one place.
Apply in template:
- :ui="{ - base: 'size-6', - }" + :ui="checkboxUi"Do the same for the other UCheckbox above.
Add in <script setup>:
const checkboxUi = { base: 'size-6' }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
apps/atrium-telegram/app/components/TaskCard.vue(1 hunks)
⏰ 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). (1)
- GitHub Check: build
🔇 Additional comments (3)
apps/atrium-telegram/app/components/TaskCard.vue (3)
34-36: NegativesideOffsetcan cause overlap/clipping; preferalign/alignOffsetfor lateral nudges.If you intended a horizontal shift, use
alignOffset(cross-axis) instead of a negativesideOffset(main-axis). If you intended vertical overlap, confirm it doesn’t block the trigger or clip inside containers.Option to consider:
- :content="{ - sideOffset: -32, - }" + :content="{ + align: 'end', + alignOffset: -32 + }"Test on small viewports and near screen edges.
39-39: Ensureui.item: 'p-2'augments, not replaces, default interactive styles.Depending on merge semantics, setting
itemmay override defaults (hover/focus/active/rounded). Verify highlight/disabled/focus-visible states still apply; if overridden, append missing classes or move padding to a wrapper token.
14-16: Confirm UCheckbox slot & touch target (apps/atrium-telegram/app/components/TaskCard.vue:14-16)
- Verify that
baseis the correct slot for resizing the checkbox square in your UI library (some expect slots likeinput,indicatororwrapper).size-6(~24 px) is below the 44 px minimum touch target; if you keep the visual size, enlarge the hit area (e.g. add padding with negative margins).
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/atrium-telegram/app/components/form/CreateTask.vue (1)
50-51: Align date input with the same cleanup for consistency.These flex alignment classes are likely unnecessary here too.
Apply this diff:
- class="w-full items-center justify-center cursor-pointer" + class="w-full cursor-pointer"
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
apps/atrium-telegram/app/app.config.ts(1 hunks)apps/atrium-telegram/app/components/form/CreateTask.vue(1 hunks)
⏰ 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). (1)
- GitHub Check: build
🔇 Additional comments (1)
apps/atrium-telegram/app/components/form/CreateTask.vue (1)
17-18: Removed redundant flex alignment classes — good cleanup.Dropping
items-center justify-centeron this<UInput>avoids fighting the component’s own layout. No functional impact expected.
| base: '!ring-muted placeholder:text-muted/25', | ||
| }, |
There was a problem hiding this comment.
Placeholder styling on base may be a no-op for some components — move it to the input slot.
For components where slots.base is a wrapper (e.g., USelectMenu), placeholder:* won’t apply; the placeholder color belongs on the actual input element (the input slot). Nuxt UI’s SelectMenu config demonstrates placeholder classes on its input slot. Textarea’s base is the textarea element, so keeping placeholder:* on textarea.slots.base is fine. (ui2.nuxt.com, ui.nuxt.com)
Use this refactor (keeps textarea as-is, moves placeholder color for the others):
input: {
slots: {
- base: '!ring-muted placeholder:text-muted/25',
+ base: '!ring-muted',
+ input: 'placeholder:text-muted/25',
},
},
inputMenu: {
slots: {
- base: '!ring-muted placeholder:text-muted/25',
+ base: '!ring-muted',
+ input: 'placeholder:text-muted/25',
},
},
selectMenu: {
slots: {
- base: '!ring-muted placeholder:text-muted/25',
+ base: '!ring-muted',
+ input: 'placeholder:text-muted/25',
},
},
textarea: {
slots: {
base: '!ring-muted placeholder:text-muted/25',
},
},If your local slot names differ, map the placeholder class to whichever slot renders the actual <input> used by the component.
Also applies to: 10-11, 15-16, 20-21
🤖 Prompt for AI Agents
In apps/atrium-telegram/app/app.config.ts around lines 5-6 (and also applicable
to lines 10-11, 15-16, 20-21), placeholder text color classes were placed on the
slots.base wrapper where they may be a no-op for components whose actual input
lives in a different slot; move the placeholder:* class from the base slot to
the component's input slot (e.g., slots.input) for those components while
keeping the textarea's placeholder on its base slot, ensuring the placeholder
styling applies to the real <input> element used by each component.
1 participant
Summary by CodeRabbit