Skip to content

fix: Service point drop down responsive issue #16258

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
NikhilA8606 wants to merge 5 commits into
base: develop
Choose a base branch
from
+6 −6
Open

fix: Service point drop down responsive issue #16258

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5a09840
fix: Service point drop down responsive issue
NikhilA8606 Apr 2, 2026
15a12e9
reduced padding
NikhilA8606 Apr 2, 2026
13370fd
cleanups
NikhilA8606 Apr 2, 2026
94ec06b
minor corrections
NikhilA8606 Apr 8, 2026
cf94454
copiolet suggestions
NikhilA8606 Apr 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions src/pages/Facility/queues/ServicePointsDropDown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const ServicePointsDropDown = () => {
const [isOpen, setIsOpen] = useState(false);
const { assignedServicePointIds, allServicePoints, toggleServicePoint } =
useQueueServicePoints();
const defaultServicePoints = useBreakpoints({ default: 4, sm: 6 });
const defaultServicePoints = useBreakpoints({ default: 4, sm: 2, lg: 4 });
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Apr 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "Locate useBreakpoints implementation:"
fd -i 'useBreakpoints.ts' src
fd -i 'useBreakpoints.tsx' src

echo
echo "Print hook implementation for semantic check:"
fd -i 'useBreakpoints.ts' src --exec sed -n '1,220p' {}
fd -i 'useBreakpoints.tsx' src --exec sed -n '1,220p' {}

echo
echo "Find breakpoint maps used across repo for consistency:"
rg -n --type=ts --type=tsx -C2 'useBreakpoints\(\s*\{'

Repository: ohcnetwork/care_fe

Length of output: 1315

🏁 Script executed:

cat -n src/pages/Facility/queues/ServicePointsDropDown.tsx | head -50

Repository: ohcnetwork/care_fe

Length of output: 2322

🏁 Script executed:

cat -n src/pages/Facility/queues/ServicePointsDropDown.tsx | tail -n +50

Repository: ohcnetwork/care_fe

Length of output: 3856

Breakpoint map violates mobile-first responsive design principle.

The pattern { default: 4, sm: 2, lg: 4 } is non-monotonic: smallest screens show 4 chips (each w-full) while medium screens show 2 chips (each w-20). This causes layout tension on small viewports where 4 full-width chips with gap-1 will wrap or overflow. Follow the mobile-first approach by ensuring the progression is monotonic: default should be ≤ sm ≤ lg. Consider changing default to 2 to prevent small-screen overflow.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/pages/Facility/queues/ServicePointsDropDown.tsx` at line 21, The
breakpoint map passed to useBreakpoints in ServicePointsDropDown (variable
defaultServicePoints) is non-monotonic ({ default: 4, sm: 2, lg: 4}) and causes
small-screen overflow; update the map to follow mobile-first progression (ensure
default ≤ sm ≤ lg) — for example set default to 2 (e.g., { default: 2, sm: 2,
lg: 4 }) so chip sizing/gap behaves monotonically across viewports.


if (!allServicePoints) {
return (
Expand All @@ -35,13 +35,13 @@ export const ServicePointsDropDown = () => {

return (
<div className="flex">
<div className="flex w-full sm:w-auto gap-1 rounded-r-none border border-r-0 border-gray-300 rounded-l-md p-1 bg-white">
<div className="flex w-full gap-1 rounded-r-none border border-r-0 border-gray-300 rounded-l-md p-1 bg-white">
{assignedServicePointIds.length === 0 ? (
<span className="text-sm font-medium">
{t("assign_service_points")}
</span>
) : (
<div className="flex gap-1 items-center justify-center">
<div className="flex flex-col lg:flex-row gap-1 items-center justify-center w-full">
{allServicePoints
.filter((subQueue) =>
assignedServicePointIds.includes(subQueue.id),
Expand All @@ -51,10 +51,10 @@ export const ServicePointsDropDown = () => {
return (
<div
key={subQueue.id}
className="flex w-48 items-center justify-center gap-1 border border-gray-300 py-0.5 px-1.5 rounded-sm bg-gray-50 whitespace-nowrap"
className="flex w-full max-w-full items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-sm border border-gray-300 bg-gray-50 px-1.5 py-0.5 sm:w-auto sm:max-w-xs"
>
<div className="bg-primary-200 border border-primary-500 w-2 h-2 rounded-full" />
<span className="text-sm text-gray-950 font-medium truncate">
<div className="bg-primary-200 border border-primary-500 w-2 h-2 rounded-full shrink-0" />
<span className="min-w-0 truncate text-sm font-medium text-gray-950">
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Apr 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Add a tooltip for truncated service point names.

At Line 57, truncate hides full names without a fallback. Add a title so users can read the complete service point label.

💡 Proposed fix 
-                    <span className="min-w-0 truncate text-sm font-medium text-gray-950">
+                    <span
+                      title={subQueue.name}
+                      className="min-w-0 truncate text-sm font-medium text-gray-950"
+                    >
                       {subQueue.name}
                     </span>

Based on learnings "When using text truncation (truncate class or similar) in the UI, always add a tooltip to show the full text."

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/pages/Facility/queues/ServicePointsDropDown.tsx` at line 57, In the
ServicePointsDropDown component, the span with className "min-w-0 truncate
text-sm font-medium text-gray-950" hides the full service point name — add a
title attribute that contains the full label so users can see the complete name
on hover; e.g., set title={servicePoint.label || servicePoint.name ||
option.label} (or the exact prop used where the list is rendered) and consider
mirroring it to aria-label for accessibility.

{subQueue.name}
</span>
</div>
Expand Down
Loading