app now responsive for mobile and small devices.
This commit is contained in:
@@ -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')}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user