app now responsive for mobile and small devices.
This commit is contained in:
@@ -159,7 +159,7 @@ export default function TasksPage() {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<header className="space-y-1">
|
||||
<h1 className="text-2xl font-semibold text-text-primary">{t('title')}</h1>
|
||||
<h1 className="text-xl sm:text-2xl font-semibold text-text-primary">{t('title')}</h1>
|
||||
<p className="text-sm text-text-secondary">{t('subtitle')}</p>
|
||||
</header>
|
||||
|
||||
@@ -250,7 +250,7 @@ export default function TasksPage() {
|
||||
|
||||
return (
|
||||
<li key={task.id}>
|
||||
<div className="grid grid-cols-[minmax(0,1fr)_132px_auto] items-center gap-x-3 gap-y-0.5 px-3 py-2">
|
||||
<div className="flex flex-col gap-3 px-3 py-3 sm:grid sm:grid-cols-[minmax(0,1fr)_132px_auto] sm:items-center sm:gap-x-3 sm:gap-y-0.5 sm:py-2">
|
||||
<div className="min-w-0">
|
||||
<div className="flex flex-wrap items-center gap-1.5">
|
||||
<p className="text-sm font-medium text-text-primary">
|
||||
@@ -280,7 +280,7 @@ export default function TasksPage() {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<div className="flex sm:justify-center">
|
||||
{canEdit ? (
|
||||
<select
|
||||
value={task.status}
|
||||
@@ -288,7 +288,7 @@ export default function TasksPage() {
|
||||
onChange={(e) =>
|
||||
void handleStatusUpdate(task.id, e.target.value as LabTaskStatus)
|
||||
}
|
||||
className={`${FORM_SELECT_CLASS} w-full max-w-[132px] font-medium`}
|
||||
className={`${FORM_SELECT_CLASS} w-full sm:max-w-[132px] font-medium`}
|
||||
style={labTaskStatusSelectStyle(task.status)}
|
||||
>
|
||||
{statusOptions.map((opt) => (
|
||||
@@ -305,7 +305,7 @@ export default function TasksPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1.5 shrink-0 justify-end">
|
||||
<div className="flex items-center gap-1.5 shrink-0 justify-between sm:justify-end">
|
||||
{canEdit ? (
|
||||
<button
|
||||
type="button"
|
||||
@@ -327,7 +327,7 @@ export default function TasksPage() {
|
||||
truncate
|
||||
title={task.prosthesisTypeLabel}
|
||||
style={prosthesisTypeBadgeStyle(task.prosthesisTypeCode, index)}
|
||||
className="w-[7rem]"
|
||||
className="w-full max-w-[8rem] sm:w-[7rem]"
|
||||
>
|
||||
{task.prosthesisTypeLabel}
|
||||
</Badge>
|
||||
|
||||
Reference in New Issue
Block a user