Conversation
|
Welcome to Cal.diy, @akash3444! Thanks for opening this pull request. A few things to keep in mind:
A maintainer will review your PR soon. Thanks for contributing! |
📝 WalkthroughWalkthroughThis pull request includes three UI styling adjustments across multiple components. The first change adds a child margin override to the search field container in the event types listing view. The second modifies the vertical alignment and icon styling in the settings account general view by switching from center to start alignment and adjusting icon margins. The third refines the vertical positioning of the clear icon within search-type text fields. All modifications are CSS class updates with no changes to component logic, state handling, or exported declarations. 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/web/modules/event-types/views/event-types-listing-view.tsx (1)
924-924: Scope the margin override more narrowly.
*:mb-0is broad and can unintentionally flatten spacing for future hint/error/label children. Prefer targeting only the input wrapper.Proposed refinement
- containerClassName="max-w-64 focus:ring-offset-0! *:mb-0" + containerClassName="max-w-64 focus:ring-offset-0! [&>div.group]:mb-0"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/modules/event-types/views/event-types-listing-view.tsx` at line 924, The blanket selector `*:mb-0` in the containerClassName prop is too broad and flattens spacing for other children; narrow it to target only the input wrapper by replacing `*:mb-0` with a specific class selector (e.g., `.input-wrapper:mb-0`) and ensure the input wrapper element around the field has that class; update the JSX where the containerClassName prop is set and, if needed, add the corresponding className to the input wrapper element in the same component (event-types-listing-view.tsx) so only the input spacing is overridden.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/ui/components/form/inputs/TextField.tsx`:
- Line 214: The class string on the icon in the TextField component uses an
invalid Tailwind token "top-1.75"; edit the className in the TextField.tsx
component (where the icon uses className="text-subtle absolute top-1.75 h-4 w-4
cursor-pointer ltr:right-2 rtl:left-2") and replace the invalid token with
robust vertical-centering utilities "top-1/2 -translate-y-1/2" while keeping the
other classes (text-subtle, absolute, h-4, w-4, cursor-pointer, ltr:right-2,
rtl:left-2) intact so the icon centers correctly across input sizes.
---
Nitpick comments:
In `@apps/web/modules/event-types/views/event-types-listing-view.tsx`:
- Line 924: The blanket selector `*:mb-0` in the containerClassName prop is too
broad and flattens spacing for other children; narrow it to target only the
input wrapper by replacing `*:mb-0` with a specific class selector (e.g.,
`.input-wrapper:mb-0`) and ensure the input wrapper element around the field has
that class; update the JSX where the containerClassName prop is set and, if
needed, add the corresponding className to the input wrapper element in the same
component (event-types-listing-view.tsx) so only the input spacing is
overridden.
🪄 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: e5f19c87-19ab-4c28-b802-6b4feea13673
📒 Files selected for processing (3)
apps/web/modules/event-types/views/event-types-listing-view.tsxapps/web/modules/settings/my-account/general-view.tsxpackages/ui/components/form/inputs/TextField.tsx
| <Icon | ||
| name="x" | ||
| className="text-subtle absolute top-2.5 h-4 w-4 cursor-pointer ltr:right-2 rtl:left-2" | ||
| className="text-subtle absolute top-1.75 h-4 w-4 cursor-pointer ltr:right-2 rtl:left-2" |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== Verify whether custom spacing token 1.75 is defined =="
fd -i 'tailwind.config.*' -x rg -n --no-heading 'spacing|1\.75'
echo
echo "== Search all occurrences of top-1.75 and mt-0.25 =="
rg -n --no-heading '\b(top-1\.75|mt-0\.25)\b'Repository: calcom/cal.diy
Length of output: 442
Remove invalid Tailwind class top-1.75 and use robust vertical centering instead.
top-1.75 is not a valid Tailwind spacing token (no custom spacing definitions exist) and will fail to position the icon. Use top-1/2 -translate-y-1/2 for proper centering that works across all input sizes.
Fix
- className="text-subtle absolute top-1.75 h-4 w-4 cursor-pointer ltr:right-2 rtl:left-2"
+ className="text-subtle absolute top-1/2 h-4 w-4 -translate-y-1/2 cursor-pointer ltr:right-2 rtl:left-2"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| className="text-subtle absolute top-1.75 h-4 w-4 cursor-pointer ltr:right-2 rtl:left-2" | |
| className="text-subtle absolute top-1/2 h-4 w-4 -translate-y-1/2 cursor-pointer ltr:right-2 rtl:left-2" |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/ui/components/form/inputs/TextField.tsx` at line 214, The class
string on the icon in the TextField component uses an invalid Tailwind token
"top-1.75"; edit the className in the TextField.tsx component (where the icon
uses className="text-subtle absolute top-1.75 h-4 w-4 cursor-pointer ltr:right-2
rtl:left-2") and replace the invalid token with robust vertical-centering
utilities "top-1/2 -translate-y-1/2" while keeping the other classes
(text-subtle, absolute, h-4, w-4, cursor-pointer, ltr:right-2, rtl:left-2)
intact so the icon centers correctly across input sizes.
2 participants
What does this PR do?
Visual Demo (For contributors especially)
A visual demonstration is strongly recommended, for both the original and new change (video / image - any one).
Image Demo (if applicable):
Before:
After:
Before:
After:
Before:
After:
Before:
After:
Mandatory Tasks (DO NOT REMOVE)
How should this be tested?