Skip to content
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

Fix Responsiveness on smaller devices #9156 #9169

Closed
wants to merge 1 commit into from
Closed

Fix Responsiveness on smaller devices #9156 #9169

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions src/components/Kanban/Board.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export default function KanbanBoard<T extends { id: string }>(
</div>
<DragDropContext onDragEnd={props.onDragEnd}>
<div className="h-full overflow-scroll" ref={board}>
<div className="flex items-stretch px-0 pb-2">
<div className="flex items-stretch px-0 pb-2 max-[915px]:flex-wrap max-[915px]:gap-5 max-[915px]:mb-5">
{props.sections.map((section, i) => (
<KanbanSection<T>
key={i}
Expand Down Expand Up @@ -146,7 +146,7 @@ export function KanbanSection<T extends { id: string }>(
<div
ref={provided.innerRef}
className={
"relative mr-2 w-[300px] shrink-0 rounded-xl bg-secondary-200"
"relative mr-2 w-[300px] shrink-0 rounded-xl bg-secondary-200 max-[915px]:border max-[915px]:border-solid max-[915px]:border-[rgb(168,168,168)]"
Copy link
Contributor

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Enhance mobile responsiveness and maintain consistency

While the border addition improves visual separation on smaller screens, there are a few suggestions for improvement:

  1. The fixed width of 300px might overflow on very small devices
  2. Consider using Tailwind's color system instead of rgb values
  3. Align breakpoints with Tailwind's standard breakpoints
-  "relative mr-2 w-[300px] shrink-0 rounded-xl bg-secondary-200 max-[915px]:border max-[915px]:border-solid max-[915px]:border-[rgb(168,168,168)]"
+  "relative mr-2 w-full max-w-[300px] shrink-0 rounded-xl bg-secondary-200 lg:border-none border border-solid border-secondary-400"
📝 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.

Suggested change
"relative mr-2 w-[300px] shrink-0 rounded-xl bg-secondary-200 max-[915px]:border max-[915px]:border-solid max-[915px]:border-[rgb(168,168,168)]"
"relative mr-2 w-full max-w-[300px] shrink-0 rounded-xl bg-secondary-200 lg:border-none border border-solid border-secondary-400"

}
>
<div className="sticky top-0 rounded-xl bg-secondary-200 pt-2">
Expand Down
2 changes: 1 addition & 1 deletion src/components/Patient/ManagePatients.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -914,7 +914,7 @@ export const PatientManager = () => {
});
}, 500);
}}
className="mr-5 w-full lg:w-fit"
className="mr-5 w-full lg:w-fit mt-2"
>
<CareIcon icon="l-export" />
<span className="lg:my-[3px]">Export</span>
Expand Down
2 changes: 1 addition & 1 deletion src/style/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1314,4 +1314,4 @@ input[type="number"] {
:root {
--radius: 0.5rem;
}
}
}
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue

Fix syntax error: Missing closing brace

The file ends abruptly with an unclosed @layer base block.

Add the missing closing brace:

@layer base {
  :root {
    --radius:  0.5rem;
  }
+ }

Committable suggestion skipped: line range outside the PR's diff.

🧰 Tools
🪛 Biome

[error] 1317-1317: expected } but instead the file ends

the file ends here

(parse)