admin/dyolink
0
0
Fork 0
Code Issues 24 Pull Requests 1 Actions Packages Projects 1 Releases Wiki Activity

app now responsive for mobile and small devices.

Browse Source
This commit is contained in:
rameen
2026-07-11 17:10:02 +03:30
parent 893cd5b128
commit 2f7df312c1
49 changed files with 1710 additions and 775 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/ui/lab/CaseDetailPanel.tsx
View File

@@ -83,7 +83,7 @@ export function CaseDetailPanel({
return (
<div className="space-y-4">
<header className="flex flex-wrap items-start justify-between gap-4 border-b border-border pb-3">
<header className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between border-b border-border pb-3">
<div className="min-w-0 flex-1 space-y-1">
<h2 className="text-lg font-semibold text-text-primary">
{formatPatientName(labCase.patient)}
@@ -114,7 +114,7 @@ export function CaseDetailPanel({
</div>
</div>
<div className="flex shrink-0 flex-col items-end gap-2">
<div className="flex w-full sm:w-auto shrink-0 flex-row sm:flex-col items-center sm:items-end justify-between sm:justify-start gap-2">
{showCommentsButton && onCommentsClick ? (
<Button type="button" variant="outline" size="sm" onClick={onCommentsClick}>
<MessageSquare className="h-4 w-4 me-1.5" />
@@ -136,7 +136,7 @@ export function CaseDetailPanel({
<button
type="button"
onClick={() => setAttachmentsDialogOpen(true)}
className="aspect-square w-32 cursor-pointer rounded-[var(--radius-md)] border border-border/60 overflow-hidden transition-colors hover:border-primary/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
className="aspect-square w-24 sm:w-32 cursor-pointer rounded-[var(--radius-md)] border border-border/60 overflow-hidden transition-colors hover:border-primary/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
title={previewAttachment.fileName}
aria-label={t('viewAttachments')}
>

17
frontend/src/components/ui/lab/LabCaseAttachmentsDialog.tsx
View File

@@ -4,6 +4,10 @@ import { useCallback, useEffect, useState } from 'react';
import { useTranslations } from 'next-intl';
import { Download, FileText } from 'lucide-react';
import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';
import {
ResponsiveDialogOverlay,
ResponsiveDialogPanel,
} from '@/components/ui/shared/ResponsiveDialog';
import { Button } from '@/components/ui/shared/Button';
import type { LabCaseAttachmentMeta } from '@/types/cases';
@@ -159,12 +163,13 @@ export function LabCaseAttachmentsDialog({
if (!open) return null;
return (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
<div
className="w-full max-w-3xl max-h-[90vh] overflow-y-auto rounded-[var(--radius-md)] border border-border bg-background-secondary p-6 shadow-xl space-y-4"
<ResponsiveDialogOverlay onBackdropClick={onClose}>
<ResponsiveDialogPanel
maxWidthClass="sm:max-w-3xl"
role="dialog"
aria-modal="true"
aria-labelledby="case-attachments-title"
className="space-y-4"
>
<div className="flex items-start justify-between gap-3">
<div>
@@ -173,7 +178,7 @@ export function LabCaseAttachmentsDialog({
</h2>
<p className="text-sm text-text-muted mt-1">{t('attachmentsDialogSubtitle')}</p>
</div>
<div className="flex items-center gap-2 shrink-0">
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 shrink-0">
{sortedAttachments.length > 1 ? (
<Button
type="button"
@@ -205,7 +210,7 @@ export function LabCaseAttachmentsDialog({
))}
</div>
)}
</div>
</div>
</ResponsiveDialogPanel>
</ResponsiveDialogOverlay>
);
}