app now responsive for mobile and small devices.

2026-07-11 17:10:02 +03:30
parent 893cd5b128
commit 2f7df312c1
49 changed files with 1710 additions and 775 deletions
--- a/frontend/src/components/ui/appointments/AppointmentBookingModal.tsx
+++ b/frontend/src/components/ui/appointments/AppointmentBookingModal.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { Button } from '@/components/ui/shared/Button';
 import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';
+import { ResponsiveDialogOverlay, ResponsiveDialogPanel } from '@/components/ui/shared/ResponsiveDialog';
 import { Dropdown } from '@/components/ui/shared/Dropdown';
 import type { AppointmentPurpose, AppointmentRecord } from '@/types/appointment';
 import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
@@ -162,12 +163,13 @@ export function AppointmentBookingModal({
  }

  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/55">
-      <div
-        className="surface-card w-full max-w-md p-5 space-y-4 shadow-xl"
+    <ResponsiveDialogOverlay onBackdropClick={onClose} className="bg-black/55">
+      <ResponsiveDialogPanel
+        maxWidthClass="sm:max-w-md"
        role="dialog"
        aria-modal="true"
        aria-labelledby="appointment-modal-title"
+        className="surface-card space-y-4"
      >
        <div className="flex items-start justify-between gap-2">
          <h2 id="appointment-modal-title" className="text-lg font-semibold text-text-primary pr-2">
@@ -194,7 +196,7 @@ export function AppointmentBookingModal({
          </p>
        </div>

-        <div className="grid grid-cols-2 gap-3">
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div>
            <label className="block text-sm font-medium text-text-secondary mb-1">
              {t('startLabel')}
@@ -240,7 +242,7 @@ export function AppointmentBookingModal({

        {error && <p className="text-sm text-red-400">{error}</p>}

-        <div className="flex flex-wrap items-center gap-2 justify-between">
+        <div className="flex flex-col-reverse gap-2 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between">
          {editingAppointment && canDelete && onDelete ? (
            <Button
              type="button"
@@ -248,14 +250,21 @@ export function AppointmentBookingModal({
              onClick={() => void onDelete()}
              disabled={loading || deleting}
              isLoading={deleting}
+              fullWidth
+              className="sm:w-auto"
            >
              {tCommon('delete')}
            </Button>
-          ) : (
-            <span />
-          )}
-          <div className="flex gap-2 ml-auto">
-            <Button type="button" variant="ghost" onClick={onClose} disabled={loading || deleting}>
+          ) : null}
+          <div className="flex flex-col-reverse sm:flex-row gap-2 sm:ml-auto w-full sm:w-auto">
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={onClose}
+              disabled={loading || deleting}
+              fullWidth
+              className="sm:w-auto"
+            >
              {tCommon('cancel')}
            </Button>
            <Button
@@ -264,12 +273,14 @@ export function AppointmentBookingModal({
              onClick={() => void handleSubmit()}
              isLoading={loading}
              disabled={deleting}
+              fullWidth
+              className="sm:w-auto"
            >
              {tCommon('save')}
            </Button>
          </div>
        </div>
-      </div>
-    </div>
+      </ResponsiveDialogPanel>
+    </ResponsiveDialogOverlay>
  );
 }
--- a/frontend/src/components/ui/auth/AuthPageShell.tsx
+++ b/frontend/src/components/ui/auth/AuthPageShell.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import { TopBarControls } from '@/components/ui/shared/TopBarControls';
+
+type AuthPageShellProps = {
+  header: React.ReactNode;
+  children: React.ReactNode;
+};
+
+export function AuthPageShell({ header, children }: AuthPageShellProps) {
+  return (
+    <div className="relative min-h-[100dvh] app-web-bg flex flex-col justify-center px-4 pb-8 pt-16 sm:px-6 sm:py-12 sm:pt-12 lg:px-8">
+      <div className="absolute top-3 right-3 sm:top-4 sm:right-4 z-10">
+        <TopBarControls />
+      </div>
+
+      <div className="w-full max-w-md mx-auto">
+        {header}
+        <div className="mt-6 sm:mt-8">{children}</div>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/components/ui/auth/OrganizationDetailsFields.tsx
+++ b/frontend/src/components/ui/auth/OrganizationDetailsFields.tsx
@@ -48,7 +48,7 @@ export function OrganizationDetailsFields({
          {t('organizationType')}
        </label>
        <input type="hidden" {...register('organizationType')} />
-        <div className="grid grid-cols-2 gap-4">
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <button
            type="button"
            onClick={() => {
--- a/frontend/src/components/ui/auth/RegistrationProgressSteps.tsx
+++ b/frontend/src/components/ui/auth/RegistrationProgressSteps.tsx
@@ -17,11 +17,11 @@ export function RegistrationProgressSteps({
  const t = useTranslations('auth');

  return (
-    <div className="mb-8">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center">
+    <div className="mb-6 sm:mb-8">
+      <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-2 sm:flex sm:justify-between">
+        <div className="flex items-center min-w-0">
          <div
-            className={`w-8 h-8 rounded-full flex items-center justify-center ${
+            className={`w-7 h-7 sm:w-8 sm:h-8 shrink-0 rounded-full flex items-center justify-center text-sm ${
              step >= 1
                ? 'bg-primary text-primary-contrast'
                : 'bg-background-secondary text-text-secondary border border-border'
@@ -30,17 +30,17 @@ export function RegistrationProgressSteps({
            1
          </div>
          <div
-            className={`ml-2 text-sm font-medium ${
+            className={`ml-1.5 sm:ml-2 text-xs sm:text-sm font-medium truncate ${
              step >= 1 ? 'text-primary' : 'text-text-muted'
            }`}
          >
            {firstLabel ?? t('stepAccount')}
          </div>
        </div>
-        <ChevronRight className="h-5 w-5 text-text-muted icon-flat" />
-        <div className="flex items-center">
+        <ChevronRight className="h-4 w-4 sm:h-5 sm:w-5 text-text-muted icon-flat shrink-0" />
+        <div className="flex items-center min-w-0 justify-end sm:justify-start">
          <div
-            className={`w-8 h-8 rounded-full flex items-center justify-center ${
+            className={`w-7 h-7 sm:w-8 sm:h-8 shrink-0 rounded-full flex items-center justify-center text-sm ${
              step >= 2
                ? 'bg-primary text-primary-contrast'
                : 'bg-background-secondary text-text-secondary border border-border'
@@ -49,7 +49,7 @@ export function RegistrationProgressSteps({
            2
          </div>
          <div
-            className={`ml-2 text-sm font-medium ${
+            className={`ml-1.5 sm:ml-2 text-xs sm:text-sm font-medium truncate ${
              step >= 2 ? 'text-primary' : 'text-text-muted'
            }`}
          >
--- a/frontend/src/components/ui/dashboard/DashboardAccountMenu.tsx
+++ b/frontend/src/components/ui/dashboard/DashboardAccountMenu.tsx
@@ -101,7 +101,7 @@ export function DashboardAccountMenu() {
      {open && (
        <div
          role="menu"
-          className="absolute right-0 mt-2 w-72 rounded-[var(--radius-md)] border border-border bg-background-secondary/95 py-2 shadow-lg z-[200] backdrop-blur-sm"
+          className="absolute right-0 mt-2 w-[min(18rem,calc(100vw-1.5rem))] rounded-[var(--radius-md)] border border-border bg-background-secondary/95 py-2 shadow-lg z-[200] backdrop-blur-sm"
        >
          <div className="px-3 py-2 border-b border-border/60">
            <p className="text-xs text-text-muted">{t('signedIn')}</p>
--- a/frontend/src/components/ui/lab/CaseDetailPanel.tsx
+++ b/frontend/src/components/ui/lab/CaseDetailPanel.tsx
@@ -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')}
            >
--- a/frontend/src/components/ui/lab/LabCaseAttachmentsDialog.tsx
+++ b/frontend/src/components/ui/lab/LabCaseAttachmentsDialog.tsx
@@ -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>
  );
 }
--- a/frontend/src/components/ui/organizations/ConnectionCaseHistoryContent.tsx
+++ b/frontend/src/components/ui/organizations/ConnectionCaseHistoryContent.tsx
@@ -10,6 +10,7 @@ import { organizationApi } from '@/lib/api/organization';
 import { treatmentCatalogApi } from '@/lib/api/treatment-catalog';
 import { treatmentTypeLabelFromCatalog } from '@/components/ui/treatment/treatmentTypeDisplay';
 import { Button } from '@/components/ui/shared/Button';
+import { MobileDetailBackButton } from '@/components/ui/shared/MobileDetailBackButton';
 import { SearchBar } from '@/components/ui/shared/SearchBar';
 import { ToastStack } from '@/components/ui/shared/Toast';
 import { CaseDetailPanel, CaseTaskProgressBar } from '@/components/ui/lab/CaseDetailPanel';
@@ -51,6 +52,7 @@ export function ConnectionCaseHistoryContent({
    totalPages: 1,
  });
  const [selectedCaseId, setSelectedCaseId] = useState<string | null>(null);
+  const [mobileDetailOpen, setMobileDetailOpen] = useState(false);
  const [selectedCase, setSelectedCase] = useState<LabCaseDetail | null>(null);
  const [treatmentCatalog, setTreatmentCatalog] = useState<TreatmentCatalogEntry[]>([]);
  const [loadingList, setLoadingList] = useState(false);
@@ -152,6 +154,12 @@ export function ConnectionCaseHistoryContent({
    };
  }, [selectedCaseId, connection.id, showError, setError]);

+  useEffect(() => {
+    if (!selectedCaseId) {
+      setMobileDetailOpen(false);
+    }
+  }, [selectedCaseId]);
+
  function scrollToComments() {
    document.getElementById('case-comments')?.scrollIntoView({ behavior: 'smooth' });
  }
@@ -193,7 +201,7 @@ export function ConnectionCaseHistoryContent({
      </div>

      <div>
-        <h1 className="text-2xl font-semibold text-text-primary">
+        <h1 className="text-xl sm:text-2xl font-semibold text-text-primary">
          {t('caseHistoryTitle', { name: connection.organizationName })}
        </h1>
        <p className="text-sm text-text-secondary mt-1">
@@ -204,7 +212,11 @@ export function ConnectionCaseHistoryContent({
      <ToastStack {...toastMessages} />

      <div className="grid gap-4 lg:grid-cols-[minmax(300px,380px)_1fr]">
-        <section className="rounded-lg border border-border bg-surface p-4 space-y-3 flex flex-col min-h-0">
+        <section
+          className={`rounded-lg border border-border bg-surface p-3 sm:p-4 space-y-3 flex flex-col min-h-0 ${
+            mobileDetailOpen && selectedCaseId ? 'hidden lg:flex' : 'flex'
+          }`}
+        >
          <SearchBar
            embedded
            value={search}
@@ -229,7 +241,10 @@ export function ConnectionCaseHistoryContent({
                    <li key={item.id}>
                      <button
                        type="button"
-                        onClick={() => setSelectedCaseId(item.id)}
+                        onClick={() => {
+                          setSelectedCaseId(item.id);
+                          setMobileDetailOpen(true);
+                        }}
                        className={`w-full rounded-md border px-3 py-2.5 text-left transition-colors ${
                          isActive
                            ? 'border-primary bg-primary/5'
@@ -292,7 +307,14 @@ export function ConnectionCaseHistoryContent({
          ) : null}
        </section>

-        <section className="rounded-lg border border-border bg-surface p-4 min-h-[420px]">
+        <section
+          className={`rounded-lg border border-border bg-surface p-3 sm:p-4 min-h-[320px] lg:min-h-[420px] ${
+            selectedCaseId && !mobileDetailOpen ? 'hidden lg:block' : ''
+          }`}
+        >
+          {mobileDetailOpen && selectedCaseId ? (
+            <MobileDetailBackButton onClick={() => setMobileDetailOpen(false)} />
+          ) : null}
          {!selectedCaseId ? (
            <p className="text-sm text-text-muted">{tCases('selectCaseHint')}</p>
          ) : loadingDetail || !selectedCase ? (
--- a/frontend/src/components/ui/organizations/InvitationHistoryDialog.tsx
+++ b/frontend/src/components/ui/organizations/InvitationHistoryDialog.tsx
@@ -2,6 +2,11 @@

 import { useTranslations } from 'next-intl';
 import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';
+import { Card } from '@/components/ui/shared/Card';
+import {
+  ResponsiveDialogOverlay,
+  ResponsiveDialogPanel,
+} from '@/components/ui/shared/ResponsiveDialog';
 import { ToastStack, type ToastMessages } from '@/components/ui/shared/Toast';
 import type { OrganizationInvitationHistoryItemDto } from '@/lib/api/organization';
 import { Badge, organizationConnectionStatusVariant } from '@/components/ui/shared/Badge';
@@ -51,12 +56,13 @@ export function InvitationHistoryDialog({
  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-[min(56rem,calc(100vw-15rem))] 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-4xl"
        role="dialog"
        aria-modal="true"
        aria-labelledby="invitation-history-title"
+        className="space-y-4"
      >
        <div className="flex items-start justify-between gap-3">
          <h2 id="invitation-history-title" className="text-lg font-semibold text-text-primary pr-2">
@@ -72,55 +78,86 @@ export function InvitationHistoryDialog({
        ) : items.length === 0 ? (
          <p className="text-sm text-text-secondary">{t('historyEmpty')}</p>
        ) : (
-          <Table
-            headers={
-              <tr>
-                <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
-                  {t('tableOrganization')}
-                </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
-                  {t('tableOwnerEmail')}
-                </th>
-                <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
-                  {t('tableDate')}
-                </th>
-                <th className="px-6 py-3 text-center text-xs font-medium text-text-muted uppercase tracking-wider">
-                  {t('tableStatus')}
-                </th>
-                <th className="px-6 py-3 text-right text-xs font-medium text-text-muted uppercase tracking-wider">
-                  {t('tableInvitationLink')}
-                </th>
-              </tr>
-            }
-            body={
-              <>
-                {items.map((inv) => (
-                  <tr key={inv.id} className="hover:bg-background-secondary/45">
-                    <td className="px-6 py-1.5 text-sm text-text-primary">{inv.organizationName}</td>
-                    <td className="px-6 py-1.5 text-sm text-text-secondary">{inv.ownerEmail}</td>
-                    <td className="px-6 py-1.5 text-sm text-text-secondary">
-                      {formatTableDate(inv.createdAt)}
-                    </td>
-                    <td className="px-6 py-1.5 text-center align-middle">
+          <>
+            <ul className="space-y-3 lg:hidden">
+              {items.map((inv) => (
+                <li key={inv.id}>
+                  <Card padding="sm" className="space-y-2">
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="min-w-0">
+                        <p className="font-medium text-text-primary truncate">{inv.organizationName}</p>
+                        <p className="text-sm text-text-secondary truncate mt-0.5">{inv.ownerEmail}</p>
+                        <p className="text-xs text-text-muted mt-1">{formatTableDate(inv.createdAt)}</p>
+                      </div>
                      <Badge variant={organizationConnectionStatusVariant(inv.status)} fixedWidth={false}>
                        {formatInvitationStatusLabel(inv.status)}
                      </Badge>
-                    </td>
-                    <td className="px-6 py-1.5 text-right align-middle">
+                    </div>
+                    <div className="flex justify-end pt-1 border-t border-border/60">
                      <CopyInvitationLinkButton
                        invitation={inv}
                        copied={copiedId === inv.id}
                        copying={copyingInvitationId === inv.id}
                        onCopy={() => onCopy(inv)}
                      />
-                    </td>
+                    </div>
+                  </Card>
+                </li>
+              ))}
+            </ul>
+
+            <div className="hidden lg:block">
+              <Table
+                headers={
+                  <tr>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
+                      {t('tableOrganization')}
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
+                      {t('tableOwnerEmail')}
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
+                      {t('tableDate')}
+                    </th>
+                    <th className="px-6 py-3 text-center text-xs font-medium text-text-muted uppercase tracking-wider">
+                      {t('tableStatus')}
+                    </th>
+                    <th className="px-6 py-3 text-right text-xs font-medium text-text-muted uppercase tracking-wider">
+                      {t('tableInvitationLink')}
+                    </th>
                  </tr>
-                ))}
-              </>
-            }
-          />
+                }
+                body={
+                  <>
+                    {items.map((inv) => (
+                      <tr key={inv.id} className="hover:bg-background-secondary/45">
+                        <td className="px-6 py-1.5 text-sm text-text-primary">{inv.organizationName}</td>
+                        <td className="px-6 py-1.5 text-sm text-text-secondary">{inv.ownerEmail}</td>
+                        <td className="px-6 py-1.5 text-sm text-text-secondary">
+                          {formatTableDate(inv.createdAt)}
+                        </td>
+                        <td className="px-6 py-1.5 text-center align-middle">
+                          <Badge variant={organizationConnectionStatusVariant(inv.status)} fixedWidth={false}>
+                            {formatInvitationStatusLabel(inv.status)}
+                          </Badge>
+                        </td>
+                        <td className="px-6 py-1.5 text-right align-middle">
+                          <CopyInvitationLinkButton
+                            invitation={inv}
+                            copied={copiedId === inv.id}
+                            copying={copyingInvitationId === inv.id}
+                            onCopy={() => onCopy(inv)}
+                          />
+                        </td>
+                      </tr>
+                    ))}
+                  </>
+                }
+              />
+            </div>
+          </>
        )}
-      </div>
-    </div>
+      </ResponsiveDialogPanel>
+    </ResponsiveDialogOverlay>
  );
 }
--- a/frontend/src/components/ui/organizations/OrganizationConnectionsMobileList.tsx
+++ b/frontend/src/components/ui/organizations/OrganizationConnectionsMobileList.tsx
@@ -0,0 +1,258 @@
+'use client';
+
+import { Check, History, Trash2, UserPlus, X } from 'lucide-react';
+import type {
+  CounterpartItemDto,
+  CounterpartSearchResultDto,
+} from '@/lib/api/organization';
+import { Badge, organizationConnectionStatusVariant } from '@/components/ui/shared/Badge';
+import { Button } from '@/components/ui/shared/Button';
+import { Card } from '@/components/ui/shared/Card';
+import { Input } from '@/components/ui/shared/Input';
+import { CopyInvitationLinkButton } from '@/components/ui/organizations/CopyInvitationLinkButton';
+import type { InvitationLinkTarget } from '@/components/invitations/organizationInviteLinks';
+
+type OrganizationConnectionsMobileListProps = {
+  loading: boolean;
+  mode: 'existing' | 'search';
+  existingRows: CounterpartItemDto[];
+  searchResults: CounterpartSearchResultDto[];
+  currentOrganizationId: string;
+  counterpart: string;
+  pendingConnectionRowId: string | null;
+  deleteConnectionRowId: string | null;
+  copiedId: string | null;
+  copyingInvitationId: string | null;
+  showInviteForm: boolean;
+  manualOrganizationName: string;
+  manualOwnerEmail: string;
+  inviteLoading: boolean;
+  formatConnectionStatusLabel: (row: CounterpartItemDto, orgId: string) => string;
+  formatTableDate: (value: string) => string;
+  getInvitationTarget: (row: CounterpartItemDto) => InvitationLinkTarget | null;
+  onCopyInvitation: (row: CounterpartItemDto) => void;
+  onRespond: (rowId: string, action: 'ACCEPT' | 'REJECT') => void;
+  onViewCaseHistory: (row: CounterpartItemDto) => void;
+  onDeleteConnection: (rowId: string) => void;
+  onSendConnectionRequest: (orgId: string) => void;
+  onToggleInviteForm: () => void;
+  onManualOrganizationNameChange: (value: string) => void;
+  onManualOwnerEmailChange: (value: string) => void;
+  onSendInvite: () => void;
+  labels: {
+    loading: string;
+    emptyConnections: string;
+    noDirectoryResults: string;
+    hideInvitationFields: string;
+    sendInvitationLink: string;
+    counterpartNameLabel: string;
+    ownerEmailLabel: string;
+    sendInvitation: string;
+    sendRequest: string;
+    acceptRequest: string;
+    declineRequest: string;
+    viewCaseHistory: string;
+    removeConnection: string;
+    statusToday: string;
+    statusFound: string;
+  };
+};
+
+export function OrganizationConnectionsMobileList({
+  loading,
+  mode,
+  existingRows,
+  searchResults,
+  currentOrganizationId,
+  counterpart,
+  pendingConnectionRowId,
+  deleteConnectionRowId,
+  copiedId,
+  copyingInvitationId,
+  showInviteForm,
+  manualOrganizationName,
+  manualOwnerEmail,
+  inviteLoading,
+  formatConnectionStatusLabel,
+  formatTableDate,
+  getInvitationTarget,
+  onCopyInvitation,
+  onRespond,
+  onViewCaseHistory,
+  onDeleteConnection,
+  onSendConnectionRequest,
+  onToggleInviteForm,
+  onManualOrganizationNameChange,
+  onManualOwnerEmailChange,
+  onSendInvite,
+  labels,
+}: OrganizationConnectionsMobileListProps) {
+  if (loading) {
+    return <p className="text-sm text-text-secondary lg:hidden">{labels.loading}</p>;
+  }
+
+  if (mode === 'existing') {
+    if (existingRows.length === 0) {
+      return (
+        <p className="text-sm text-text-secondary lg:hidden surface-card p-4">
+          {labels.emptyConnections}
+        </p>
+      );
+    }
+
+    return (
+      <ul className="space-y-3 lg:hidden">
+        {existingRows.map((row) => {
+          const canRespond =
+            row.status === 'PENDING' &&
+            row.requestedByOrganizationId !== null &&
+            row.requestedByOrganizationId !== currentOrganizationId;
+          const invitationTarget = getInvitationTarget(row);
+
+          return (
+            <li key={row.id}>
+              <Card padding="sm" className="space-y-3">
+                <div className="flex items-start justify-between gap-3">
+                  <div className="min-w-0">
+                    <p className="font-medium text-text-primary truncate">{row.organizationName}</p>
+                    <p className="text-sm text-text-secondary truncate mt-0.5">{row.ownerEmail}</p>
+                    <p className="text-xs text-text-muted mt-1">{formatTableDate(row.createdAt)}</p>
+                  </div>
+                  <Badge variant={organizationConnectionStatusVariant(row.status)} fixedWidth={false}>
+                    {formatConnectionStatusLabel(row, currentOrganizationId)}
+                  </Badge>
+                </div>
+
+                <div className="flex flex-wrap items-center gap-1.5 pt-1 border-t border-border/60">
+                  {invitationTarget ? (
+                    <CopyInvitationLinkButton
+                      invitation={invitationTarget}
+                      copied={copiedId === invitationTarget.id}
+                      copying={copyingInvitationId === invitationTarget.id}
+                      onCopy={() => onCopyInvitation(row)}
+                    />
+                  ) : null}
+                  {canRespond ? (
+                    <>
+                      <button
+                        type="button"
+                        className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary disabled:opacity-50"
+                        disabled={pendingConnectionRowId !== null && pendingConnectionRowId !== row.id}
+                        onClick={() => onRespond(row.id, 'ACCEPT')}
+                        aria-label={labels.acceptRequest}
+                        title={labels.acceptRequest}
+                      >
+                        <Check className="w-4 h-4" />
+                      </button>
+                      <button
+                        type="button"
+                        className="p-2 rounded-md text-text-secondary hover:bg-red-500/15 hover:text-red-600 disabled:opacity-50"
+                        disabled={pendingConnectionRowId !== null && pendingConnectionRowId !== row.id}
+                        onClick={() => onRespond(row.id, 'REJECT')}
+                        aria-label={labels.declineRequest}
+                        title={labels.declineRequest}
+                      >
+                        <X className="w-4 h-4" />
+                      </button>
+                    </>
+                  ) : null}
+                  {row.status === 'ACTIVE' ? (
+                    <>
+                      <button
+                        type="button"
+                        className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary"
+                        onClick={() => onViewCaseHistory(row)}
+                        aria-label={labels.viewCaseHistory}
+                        title={labels.viewCaseHistory}
+                      >
+                        <History className="w-4 h-4" />
+                      </button>
+                      <button
+                        type="button"
+                        className="p-2 rounded-md text-text-secondary hover:bg-red-500/15 hover:text-red-600 disabled:opacity-50"
+                        disabled={deleteConnectionRowId !== null && deleteConnectionRowId !== row.id}
+                        onClick={() => onDeleteConnection(row.id)}
+                        aria-label={labels.removeConnection}
+                        title={labels.removeConnection}
+                      >
+                        <Trash2 className="w-4 h-4" />
+                      </button>
+                    </>
+                  ) : null}
+                </div>
+              </Card>
+            </li>
+          );
+        })}
+      </ul>
+    );
+  }
+
+  if (searchResults.length > 0) {
+    return (
+      <ul className="space-y-3 lg:hidden">
+        {searchResults.map((result) => (
+          <li key={result.id}>
+            <Card padding="sm" className="space-y-3">
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0">
+                  <p className="font-medium text-text-primary truncate">{result.name}</p>
+                  <p className="text-sm text-text-secondary truncate mt-0.5">{result.owner.email}</p>
+                  <p className="text-xs text-text-muted mt-1">{labels.statusToday}</p>
+                </div>
+                <Badge variant="default" fixedWidth={false}>
+                  {labels.statusFound}
+                </Badge>
+              </div>
+              <div className="flex justify-end pt-1 border-t border-border/60">
+                <button
+                  type="button"
+                  className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary disabled:opacity-50"
+                  disabled={pendingConnectionRowId !== null && pendingConnectionRowId !== result.id}
+                  onClick={() => onSendConnectionRequest(result.id)}
+                  aria-label={labels.sendRequest}
+                  title={labels.sendRequest}
+                >
+                  <UserPlus className="w-4 h-4" />
+                </button>
+              </div>
+            </Card>
+          </li>
+        ))}
+      </ul>
+    );
+  }
+
+  return (
+    <div className="lg:hidden surface-card p-4 space-y-3">
+      <p className="text-sm text-text-secondary">{labels.noDirectoryResults}</p>
+      <Button type="button" onClick={onToggleInviteForm} className="w-full sm:w-auto">
+        {showInviteForm ? labels.hideInvitationFields : labels.sendInvitationLink}
+      </Button>
+      {showInviteForm ? (
+        <div className="grid gap-3">
+          <Input
+            label={labels.counterpartNameLabel}
+            value={manualOrganizationName}
+            onChange={(e) => onManualOrganizationNameChange(e.target.value)}
+          />
+          <Input
+            label={labels.ownerEmailLabel}
+            type="email"
+            value={manualOwnerEmail}
+            onChange={(e) => onManualOwnerEmailChange(e.target.value)}
+          />
+          <Button
+            type="button"
+            isLoading={inviteLoading}
+            disabled={!manualOrganizationName.trim() || !manualOwnerEmail.trim()}
+            onClick={onSendInvite}
+            className="w-full"
+          >
+            {labels.sendInvitation}
+          </Button>
+        </div>
+      ) : null}
+    </div>
+  );
+}
--- a/frontend/src/components/ui/organizations/OrganizationSelectorContent.tsx
+++ b/frontend/src/components/ui/organizations/OrganizationSelectorContent.tsx
@@ -62,7 +62,7 @@ export function OrganizationSelectorContent() {
    <div className="space-y-6">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
-          <h1 className="text-3xl font-semibold text-text-primary">{t('selectorTitle')}</h1>
+          <h1 className="text-2xl sm:text-3xl font-semibold text-text-primary">{t('selectorTitle')}</h1>
          <p className="text-text-secondary mt-2">
            {canCreateOrganization ? t('selectorSubtitleWithCreate') : t('selectorSubtitleSelectOnly')}
          </p>
@@ -71,6 +71,7 @@ export function OrganizationSelectorContent() {
          <Button
            type="button"
            variant={isCreateOpen ? 'outline' : 'primary'}
+            className="w-full sm:w-auto shrink-0"
            onClick={() => {
              clearError();
              setIsCreateOpen((prev) => !prev);
@@ -82,7 +83,7 @@ export function OrganizationSelectorContent() {
      </div>

      {canCreateOrganization && isCreateOpen && (
-        <div className="surface-card p-6 space-y-4">
+        <div className="surface-card p-4 sm:p-6 space-y-4">
          <Input
            label={tAuth('organizationName')}
            value={organizationName}
@@ -102,7 +103,7 @@ export function OrganizationSelectorContent() {
            <label className="block text-sm font-medium text-text-secondary mb-2">
              {tAuth('organizationType')}
            </label>
-            <div className="grid grid-cols-2 gap-3">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
              <button
                type="button"
                onClick={() => setOrganizationType('CLINIC')}
@@ -132,13 +133,14 @@ export function OrganizationSelectorContent() {
              <p className="text-sm text-red-600">{error}</p>
            </div>
          )}
-          <div className="flex justify-end">
+          <div className="flex flex-col sm:flex-row sm:justify-end">
            <Button
              type="button"
              variant="primary"
              onClick={handleCreateOrganization}
              isLoading={isLoading}
              disabled={!organizationName.trim() || !organizationEmail.trim()}
+              className="w-full sm:w-auto"
            >
              {t('createAndContinue')}
            </Button>
@@ -158,14 +160,14 @@ export function OrganizationSelectorContent() {
            <button
              key={org.id}
              onClick={() => selectOrganization(org.id)}
-              className="surface-card p-6 transition-all text-left flex items-center gap-4 hover:border-primary/60"
+              className="surface-card p-4 sm:p-6 transition-all text-left flex items-center gap-3 sm:gap-4 hover:border-primary/60 w-full min-w-0"
            >
-              <div className="p-3 bg-primary-soft rounded-[var(--radius-sm)] text-primary">
+              <div className="p-2.5 sm:p-3 bg-primary-soft rounded-[var(--radius-sm)] text-primary shrink-0">
                {getIcon(org.type)}
              </div>

-              <div className="flex-1">
-                <h3 className="text-lg font-semibold text-text-primary">
+              <div className="flex-1 min-w-0">
+                <h3 className="text-base sm:text-lg font-semibold text-text-primary truncate">
                  {org.name}
                </h3>
                <p className="text-sm text-text-secondary">
@@ -173,7 +175,7 @@ export function OrganizationSelectorContent() {
                </p>
              </div>

-              <div className="text-primary text-sm">
+              <div className="text-primary text-sm shrink-0 hidden sm:block">
                {t('continueArrow')}
              </div>
            </button>
--- a/frontend/src/components/ui/patient/CreatePatientModal.tsx
+++ b/frontend/src/components/ui/patient/CreatePatientModal.tsx
@@ -4,6 +4,10 @@ import { useTranslations } from 'next-intl';
 import { Button } from '@/components/ui/shared/Button';
 import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';
 import { Input } from '@/components/ui/shared/Input';
+import {
+  ResponsiveDialogOverlay,
+  ResponsiveDialogPanel,
+} from '@/components/ui/shared/ResponsiveDialog';
 import { CreatePatientInput } from '@/types/patient';
 import { isValidMobile, normalizeMobile } from '@/lib/phone';

@@ -63,17 +67,23 @@ function CreatePatientFormFields({
        />
      </div>

-      <div className="flex gap-2">
+      <div className="flex flex-col-reverse gap-2 sm:flex-row sm:items-center">
        <Button
          variant="primary"
          onClick={onSubmit}
          isLoading={loading}
-          disabled={!formData.firstName || !formData.lastName || !isValidMobile(normalizeMobile(formData.mobile || '') ?? '')}
+          fullWidth
+          className="sm:w-auto"
+          disabled={
+            !formData.firstName ||
+            !formData.lastName ||
+            !isValidMobile(normalizeMobile(formData.mobile || '') ?? '')
+          }
        >
          {t('savePatient')}
        </Button>
        {showCancel && (
-          <Button variant="ghost" onClick={onClose}>
+          <Button variant="ghost" onClick={onClose} fullWidth className="sm:w-auto">
            {tCommon('cancel')}
          </Button>
        )}
@@ -99,21 +109,13 @@ export function CreatePatientModal({

  if (variant === 'dialog') {
    return (
-      <div
-        className="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-black/55"
-        role="presentation"
-        onMouseDown={(e) => {
-          if (e.target === e.currentTarget) {
-            onClose();
-          }
-        }}
-      >
-        <div
-          className="surface-card w-full max-w-[min(56rem,calc(100vw-15rem))] p-5 space-y-4 shadow-xl"
+      <ResponsiveDialogOverlay onBackdropClick={onClose} zIndexClass="z-[60]" className="bg-black/55">
+        <ResponsiveDialogPanel
+          maxWidthClass="sm:max-w-2xl"
          role="dialog"
          aria-modal="true"
          aria-labelledby="create-patient-dialog-title"
-          onMouseDown={(e) => e.stopPropagation()}
+          className="surface-card space-y-4"
        >
          <div className="flex items-start justify-between gap-2">
            <h2
@@ -133,13 +135,13 @@ export function CreatePatientModal({
            loading={loading}
            showCancel={false}
          />
-        </div>
-      </div>
+        </ResponsiveDialogPanel>
+      </ResponsiveDialogOverlay>
    );
  }

  return (
-    <div className="surface-card p-4 space-y-3">
+    <div className="surface-card p-3 sm:p-4 space-y-3">
      <CreatePatientFormFields
        formData={formData}
        onChange={onChange}
--- a/frontend/src/components/ui/shared/Dropdown.tsx
+++ b/frontend/src/components/ui/shared/Dropdown.tsx
@@ -32,7 +32,7 @@ export const Dropdown = forwardRef<HTMLSelectElement, DropdownProps>(
              form-select w-full appearance-none rounded-[var(--radius-md)] border
              ${error ? 'border-red-500' : 'border-border'}
              bg-background-card text-text-primary
-              pl-4 pr-14 py-2 text-sm
+              pl-4 pr-14 py-2.5 sm:py-2 text-base sm:text-sm
              focus:outline-none focus:ring-2 focus:ring-primary/35 focus:border-border-strong
              disabled:opacity-50 disabled:cursor-not-allowed
              transition-all duration-200 shadow-[inset_0_1px_0_rgba(255,255,255,0.02)]
--- a/frontend/src/components/ui/shared/Input.tsx
+++ b/frontend/src/components/ui/shared/Input.tsx
@@ -91,7 +91,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
              ${error ? 'border-red-500' : 'border-border'}
              bg-background-secondary/90 text-text-primary

-              ${icon ? 'pl-10' : 'pl-4'} ${resolvedEndIcon ? 'pr-10' : 'pr-4'} py-2
+              ${icon ? 'pl-10' : 'pl-4'} ${resolvedEndIcon ? 'pr-10' : 'pr-4'} py-2.5 sm:py-2 text-base sm:text-sm

              placeholder:text-text-muted

--- a/frontend/src/components/ui/shared/LanguageToggle.tsx
+++ b/frontend/src/components/ui/shared/LanguageToggle.tsx
@@ -70,7 +70,7 @@ export function LanguageToggle() {
        <ul
          role="listbox"
          aria-label={t('selectLanguage')}
-          className="absolute right-0 z-[200] mt-2 min-w-[10rem] rounded-[var(--radius-md)] border border-border bg-background-secondary/95 py-1 shadow-lg backdrop-blur-sm"
+          className="absolute right-0 z-[200] mt-2 w-[min(10rem,calc(100vw-2rem))] rounded-[var(--radius-md)] border border-border bg-background-secondary/95 py-1 shadow-lg backdrop-blur-sm"
        >
          {LOCALE_OPTIONS.map((option) => {
            const selected = option === locale;
--- a/frontend/src/components/ui/shared/MobileDetailBackButton.tsx
+++ b/frontend/src/components/ui/shared/MobileDetailBackButton.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import { ChevronLeft } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+
+export function MobileDetailBackButton({ onClick }: { onClick: () => void }) {
+  const t = useTranslations('common');
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="lg:hidden inline-flex items-center gap-1 text-sm text-primary hover:opacity-90 mb-3"
+    >
+      <ChevronLeft className="h-4 w-4 icon-flat" />
+      {t('back')}
+    </button>
+  );
+}
--- a/frontend/src/components/ui/shared/ResponsiveDialog.tsx
+++ b/frontend/src/components/ui/shared/ResponsiveDialog.tsx
@@ -0,0 +1,61 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+type ResponsiveDialogOverlayProps = {
+  children: ReactNode;
+  onBackdropClick?: () => void;
+  className?: string;
+  zIndexClass?: string;
+};
+
+type ResponsiveDialogPanelProps = {
+  children: ReactNode;
+  className?: string;
+  maxWidthClass?: string;
+  role?: string;
+  'aria-modal'?: boolean | 'true' | 'false';
+  'aria-labelledby'?: string;
+};
+
+export function ResponsiveDialogOverlay({
+  children,
+  onBackdropClick,
+  className = '',
+  zIndexClass = 'z-50',
+}: ResponsiveDialogOverlayProps) {
+  return (
+    <div
+      className={`fixed inset-0 ${zIndexClass} flex items-end sm:items-center justify-center p-0 sm:p-4 bg-black/50 ${className}`.trim()}
+      role="presentation"
+      onMouseDown={(e) => {
+        if (onBackdropClick && e.target === e.currentTarget) {
+          onBackdropClick();
+        }
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function ResponsiveDialogPanel({
+  children,
+  className = '',
+  maxWidthClass = 'sm:max-w-lg',
+  role,
+  'aria-modal': ariaModal,
+  'aria-labelledby': ariaLabelledby,
+}: ResponsiveDialogPanelProps) {
+  return (
+    <div
+      className={`w-full ${maxWidthClass} max-h-[90dvh] overflow-y-auto rounded-t-[var(--radius-lg)] sm:rounded-[var(--radius-md)] border border-border bg-background-secondary p-4 sm:p-6 shadow-xl ${className}`.trim()}
+      role={role}
+      aria-modal={ariaModal}
+      aria-labelledby={ariaLabelledby}
+      onMouseDown={(e) => e.stopPropagation()}
+    >
+      {children}
+    </div>
+  );
+}
--- a/frontend/src/components/ui/shared/SearchBar.tsx
+++ b/frontend/src/components/ui/shared/SearchBar.tsx
@@ -21,8 +21,8 @@ export function SearchBar({
  embedded = false,
 }: SearchBarProps) {
  const field = (
-    <div className={`flex gap-4 items-center ${embedded ? '' : 'flex-1'}`}>
-      <div className="flex-1 min-w-0">
+    <div className={`flex flex-col sm:flex-row gap-3 sm:gap-4 sm:items-center ${embedded ? '' : 'flex-1'}`}>
+      <div className="flex-1 min-w-0 w-full">
        <Input
          placeholder={placeholder}
          value={value}
@@ -33,7 +33,7 @@ export function SearchBar({
          icon={<Search className="h-4 w-4 icon-flat" />}
        />
      </div>
-      {actions && <div className="flex gap-2 shrink-0">{actions}</div>}
+      {actions && <div className="flex flex-wrap gap-2 shrink-0 w-full sm:w-auto">{actions}</div>}
    </div>
  );

@@ -41,5 +41,5 @@ export function SearchBar({
    return field;
  }

-  return <div className="surface-card p-4">{field}</div>;
+  return <div className="surface-card p-3 sm:p-4">{field}</div>;
 }
--- a/frontend/src/components/ui/shared/Sidebar.tsx
+++ b/frontend/src/components/ui/shared/Sidebar.tsx
@@ -13,6 +13,7 @@ import {
  CreditCard,
  Package,
  ListTodo,
+  X,
 } from 'lucide-react';
 import type { OrgTypeName } from '@/components/shared/permissions';
 import { useAuth } from '@/lib/hooks/useAuth';
@@ -36,7 +37,12 @@ type MenuItem = {
  orgTypes: OrgTypeName[];
 };

-function Sidebar() {
+type SidebarProps = {
+  mobileOpen?: boolean;
+  onClose?: () => void;
+};
+
+function Sidebar({ mobileOpen = false, onClose }: SidebarProps) {
  const t = useTranslations('nav');
  const tCommon = useTranslations('common');
  const pathname = usePathname();
@@ -87,9 +93,23 @@ function Sidebar() {
  );

  return (
-    <aside className="w-56 min-w-56 shrink-0 bg-background-secondary/90 border-r border-border text-text-primary flex flex-col">
-      <div className="h-[71px] px-4 flex items-center">
-        <h1 className="text-lg font-medium tracking-tight">{tCommon('appName')}</h1>
+    <aside
+      className={`fixed inset-y-0 left-0 z-50 w-56 min-w-56 shrink-0 bg-background-secondary/95 border-r border-border text-text-primary flex flex-col backdrop-blur-sm transition-transform duration-200 ease-out lg:relative lg:translate-x-0 lg:z-auto ${
+        mobileOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
+      }`}
+    >
+      <div className="h-[71px] px-4 flex items-center justify-between gap-2">
+        <h1 className="text-lg font-medium tracking-tight truncate">{tCommon('appName')}</h1>
+        {onClose ? (
+          <button
+            type="button"
+            className="lg:hidden inline-flex items-center justify-center h-9 w-9 rounded-[var(--radius-md)] border border-border/70 text-text-primary hover:bg-background-card/80 shrink-0"
+            onClick={onClose}
+            aria-label={tCommon('closeMenu')}
+          >
+            <X className="h-5 w-5 icon-flat" />
+          </button>
+        ) : null}
      </div>
      <div className="mx-4 border-b border-border/70" />

@@ -105,6 +125,7 @@ function Sidebar() {
              key={item.path}
              href={item.path}
              prefetch
+              onClick={onClose}
              className={`flex items-center gap-3 px-3 py-2.5 rounded-[var(--radius-sm)] border transition-colors ${
                isActive
                  ? 'bg-primary-soft border-primary/60 text-text-primary'
--- a/frontend/src/components/ui/shared/Table.tsx
+++ b/frontend/src/components/ui/shared/Table.tsx
@@ -9,16 +9,18 @@ interface TableProps {
 export function Table({ headers, body, footer }: TableProps) {
  return (
    <div className="surface-card overflow-hidden">
-      <table className="w-full">
-        <thead className="bg-background-secondary/70 border-b border-border">
-          {headers}
-        </thead>
-        <tbody className="divide-y divide-border/60">
-          {body}
-        </tbody>
-      </table>
+      <div className="overflow-x-auto">
+        <table className="w-full min-w-[36rem] [&_th]:px-3 sm:[&_th]:px-6 [&_td]:px-3 sm:[&_td]:px-6">
+          <thead className="bg-background-secondary/70 border-b border-border">
+            {headers}
+          </thead>
+          <tbody className="divide-y divide-border/60">
+            {body}
+          </tbody>
+        </table>
+      </div>
      {footer && (
-        <div className="px-6 py-3 border-t border-border/60 flex justify-between items-center bg-background-secondary/70">
+        <div className="px-3 sm:px-6 py-3 border-t border-border/60 flex flex-col gap-2 sm:flex-row sm:justify-between sm:items-center bg-background-secondary/70">
          {footer}
        </div>
      )}
--- a/frontend/src/components/ui/treatment/AppointmentsStrip.tsx
+++ b/frontend/src/components/ui/treatment/AppointmentsStrip.tsx
@@ -104,7 +104,7 @@ export function AppointmentsStrip({
              padding="none"
              style={treatmentTypeBannerStyle(a.purpose, purposeIndex < 0 ? 0 : purposeIndex)}
              className={`
-                text-left rounded-[var(--radius-sm)] px-3 py-2 min-w-[200px] max-w-[280px] transition-shadow min-h-[52px]
+                text-left rounded-[var(--radius-sm)] px-3 py-2 w-full sm:w-auto sm:min-w-[200px] sm:max-w-[280px] transition-shadow min-h-[52px]
                focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/45
                ${sel ? 'ring-2 ring-primary ring-offset-2 ring-offset-background-secondary shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]' : 'hover:brightness-110'}
              `}
--- a/frontend/src/components/ui/treatment/LabCasesDispatchPanel.tsx
+++ b/frontend/src/components/ui/treatment/LabCasesDispatchPanel.tsx
@@ -445,7 +445,7 @@ export function LabCasesDispatchPanel({
                                      e.target.value,
                                    )
                                  }
-                                  className={`${FORM_SELECT_CLASS} w-full min-w-[160px]`}
+                                  className={`${FORM_SELECT_CLASS} w-full min-w-0 sm:min-w-[160px]`}
                                >
                                  <option value="">{t('prosthesisSelectPlaceholder')}</option>
                                  {prosthesisOptions.map((opt) => (
--- a/frontend/src/components/ui/treatment/TreatmentDetailsEditor.tsx
+++ b/frontend/src/components/ui/treatment/TreatmentDetailsEditor.tsx
@@ -60,13 +60,20 @@ export function TreatmentDetailsEditor({
  const showPendingLabHint = isLabDependent && !locked && !readOnly;

  return (
-    <div className="surface-card p-4 space-y-4">
-      <div className="flex flex-wrap items-center justify-between gap-3">
+    <div className="surface-card p-3 sm:p-4 space-y-4">
+      <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between">
        <div>
          <h3 className="text-sm font-semibold text-text-primary">{t('detailsTitle')}</h3>
          <p className="text-xs text-text-muted mt-0.5">{t('detailsSubtitle')}</p>
        </div>
-        <Button type="button" variant="primary" disabled={!canEdit || disabled} onClick={onAddDetail}>
+        <Button
+          type="button"
+          variant="primary"
+          disabled={!canEdit || disabled}
+          onClick={onAddDetail}
+          fullWidth
+          className="sm:w-auto shrink-0"
+        >
          {t('addDetail')}
        </Button>
      </div>
--- a/frontend/src/components/ui/treatment/TreatmentWorkspace.tsx
+++ b/frontend/src/components/ui/treatment/TreatmentWorkspace.tsx
@@ -1107,7 +1107,7 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
  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">
          {canEdit ? t('subtitleEditPhase4') : t('subtitleReadOnly')}
        </p>