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 4 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
8 changes: 4 additions & 4 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,7 +51,7 @@ 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 sm:w-auto w-full items-center justify-center gap-1 border border-gray-300 py-0.5 px-1.5 rounded-sm bg-gray-50 whitespace-nowrap"
>
<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">
Copy link

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

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

With sm:w-auto on the chip container, long service point names can expand the chip to its full content width, and the truncate on the inner <span> won’t reliably take effect in a flex row without min-w-0/a max-width constraint. This can reintroduce horizontal overflow on sm+ viewports. Consider adding a max width (responsive if needed) and min-w-0/overflow-hidden so truncation actually works for long names.

Suggested change
className="flex sm:w-auto w-full items-center justify-center gap-1 border border-gray-300 py-0.5 px-1.5 rounded-sm bg-gray-50 whitespace-nowrap"
>
<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">
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 shrink-0" />
<span className="min-w-0 truncate text-sm font-medium text-gray-950">

Copilot uses AI. Check for mistakes.
Expand Down
Loading