Fix: Align facility type tooltip closer to the badge text #14634

atif09 · 2025-12-05T02:57:23Z

Proposed Changes

Fixes #14358

adjusted facility type tooltip positioning to appear closer to the badge text by adding side="right", align="center", and sideOffset={4} props
added inline-block class to h2 element to constrain tooltip trigger width to text content only
additional context if needed :

BEFORE

AFTER

Tagging: @ohcnetwork/care-fe-code-reviewers

Merge Checklist

Add specs that demonstrate the bug or test the new feature.
Update product documentation.
Ensure that UI text is placed in I18n files.
Prepare a screenshot or demo video for the changelog entry and attach it to the issue.
Request peer reviews.
Complete QA on mobile devices.
Complete QA on desktop devices.
Add or update Playwright tests for related changes

Summary by CodeRabbit

Style
- Facility tooltips are now centered with refined horizontal spacing for clearer, more consistent placement.
- Facility-type headings use an inline presentation to improve layout consistency and visual alignment.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

coderabbitai · 2025-12-05T02:57:36Z

Walkthrough

Tooltip alignment adjusted (added align="center" and sideOffset={4}) and the facility type heading now renders with inline-block styling.

Changes

Cohort / File(s)	Change Summary
Facility header & tooltip `src/components/Facility/FacilityHome.tsx`	Added `align="center"` and `sideOffset={4}` to `TooltipComponent`; changed facility type heading to use `inline-block` styling.

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: adjusting tooltip alignment for the facility type badge.
Description check	✅ Passed	The description follows the template with issue reference, change details, visual evidence, and merge checklist completed.
Linked Issues check	✅ Passed	The changes directly address issue #14358 by adjusting tooltip positioning (side, align, sideOffset) and constraining trigger width via inline-block.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the tooltip alignment issue; no out-of-scope modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 58063cc and 5bcded0.

📒 Files selected for processing (1)

src/components/Facility/FacilityHome.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (12)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{ts,tsx}: Write concise, technical TypeScript code with accurate examples
Use TypeScript for all code; prefer interfaces over types
Avoid enums; use maps instead
Use TanStack Query for data fetching from the API along with query and mutate utilities for the queryFn and mutationFn
Use raviger for routing

**/*.{ts,tsx}: Use TypeScript with strict mode and ES2022 target
Use interface for defining object types in TypeScript
Avoid explicit any type in TypeScript
Use proper nullability annotations in TypeScript types
Use dedicated error handlers and TypeScript strict null checks

**/*.{ts,tsx}: Use TypeScript for all new code
Prefer interfaces over types for object definitions in TypeScript
Avoid using any type; use proper type definitions in TypeScript
Use type inference where possible in TypeScript
Use TanStack Query for API data management
Prefer React Context for global state management

**/*.{ts,tsx}: Use TanStack Query with the query and mutate utilities from @/Utils/request/
Use appropriate query keys following the resource pattern for TanStack Query
Leverage TanStack Query built-in features for pagination and debouncing
Implement proper error handling using the global error handler for TanStack Query operations
Use useQuery hook with queryKey and queryFn parameters, where queryFn wraps the API route with the query() utility
Use useMutation hook with mutationFn parameter wrapping API routes with the mutate() utility, and implement onSuccess callbacks to invalidate related queries
Support path parameters in TanStack Query using the pathParams option in query/mutate utilities
Support query parameters in TanStack Query using the queryParams option in query/mutate utilities
Use the silent: true option to suppress global error notifications when custom error handling is needed

**/*.{ts,tsx}: Use TypeScript with strict mode and ES2022 target
Use interface for defining object types
Avoid explicit any types and maint...

Files:

src/components/Facility/FacilityHome.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{ts,tsx,js,jsx}: Use functional and declarative programming patterns; avoid classes
Prefer iteration and modularization over code duplication
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
Use the "function" keyword for pure functions
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements

**/*.{ts,tsx,js,jsx}: Use path aliases for imports from src (@/*)
Use double quotes for strings
Semicolons are required at end of statements
Order imports as: 3rd-party → library → CAREUI → UI → components → hooks → utils → relative
Use PascalCase for component and class names
Use camelCase for variable and function names

**/*.{ts,tsx,js,jsx}: Use path aliases @/* for imports from src directory
Use double quotes for strings
Require semicolons at end of statements
Order imports: 3rd-party → library → CAREUI → UI → components → hooks → utils → relative
Use PascalCase for component and class names
Use camelCase for variable and function names

Files:

src/components/Facility/FacilityHome.tsx

**/*.{tsx,jsx}

📄 CodeRabbit inference engine (.cursorrules)

Use declarative JSX

Files:

src/components/Facility/FacilityHome.tsx

src/**/*.{ts,tsx}