fix(ui): vertical alignment issues

[akash3444]

What does this PR do?

• Fixes vertical alignment issues in search input and other elements.

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)

• I have self-reviewed the code (A decent size PR without self-review might be rejected).
• I have updated the developer docs if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox.
• I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

• Go to "Event Types" page, enter text in search field, ensure that the X icons is properly aligned vertically
• Go to "Event Types" page, ensure that the search input and button on the top right corner are properly aligned vertically. search input should not have extra margin below it.
• Go to "All Apps" page, enter text in search field, ensure that the X icons is properly aligned vertically
• Go to "General" settings page, ensure that the info icon in the helper text for "Time format" is aligned to the top and not to the center

[github-actions]

Welcome to Cal.diy, @akash3444! Thanks for opening this pull request.

A few things to keep in mind:

• This is Cal.diy, not Cal.com. Cal.diy is a community-driven, fully open-source fork of Cal.com licensed under MIT. Your changes here will be part of Cal.diy — they will not be deployed to the Cal.com production app.
• Please review our Contributing Guidelines if you haven't already.
• Make sure your PR title follows the Conventional Commits format.

A maintainer will review your PR soon. Thanks for contributing!

[coderabbitai]

📝 Walkthrough

Walkthrough

This 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)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix(ui): vertical alignment issues' accurately summarizes the main changes made to fix vertical alignment problems across multiple UI components.
Description check	✅ Passed	The description is directly related to the changeset, providing context about vertical alignment fixes in search inputs and other elements, along with visual demonstrations and testing instructions.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with 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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

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-0 is 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

📥 Commits

Reviewing files that changed from the base of the PR and between e9c6d0e and 54f0527.

📒 Files selected for processing (3)

• apps/web/modules/event-types/views/event-types-listing-view.tsx
• apps/web/modules/settings/my-account/general-view.tsx
• packages/ui/components/form/inputs/TextField.tsx

[sahitya-chandra]

Please address code-rabbit comment

[akash3444]

@sahitya-chandra addressed the comment