app now responsive for mobile and small devices.

This commit is contained in:
2026-07-11 17:10:02 +03:30
parent 893cd5b128
commit 2f7df312c1
49 changed files with 1710 additions and 775 deletions

View File

@@ -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>