Skip to content

Commit e0ac2f8

Browse files
felixeversfelixevers
committed
fix iOS compatibility issues
1 parent cc70ebb commit e0ac2f8

11 files changed

Lines changed: 84 additions & 39 deletions

File tree

‎web/components/layout/Page.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -416,7 +416,7 @@ export const Header = ({ onMenuClick, isMenuOpen, ...props }: HeaderProps) => {
416416
color="neutral"
417417
coloringStyle="text"
418418
onClick={onMenuClick}
419-
className="lg:hidden"
419+
className="min-h-11 min-w-11 lg:hidden"
420420
>
421421
{isMenuOpen ? <X className="size-6" /> : <MenuIcon className="size-6" />}
422422
</IconButton>
@@ -505,15 +505,17 @@ export const Sidebar = ({ isOpen, onClose, ...props }: SidebarProps) => {
505505
<>
506506
{isOpen && (
507507
<div
508-
className="fixed inset-0 bg-overlay-shadow z-40 lg:hidden"
508+
className="fixed inset-0 z-40 touch-manipulation bg-overlay-shadow lg:hidden"
509509
onClick={onClose}
510+
role="presentation"
510511
/>
511512
)}
512513
<aside
513514
{...props}
514515
className={clsx(
515516
'flex-col-4 w-50 min-w-56 rounded-lg bg-surface text-on-surface overflow-hidden shadow-md',
516517
'fixed lg:relative inset-y-0 z-50 lg:z-auto',
518+
'pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]',
517519
'w-screen max-w-sm lg:w-50 lg:min-w-56',
518520
'transform transition-transform duration-300 ease-out',
519521
isOpen
@@ -535,7 +537,7 @@ export const Sidebar = ({ isOpen, onClose, ...props }: SidebarProps) => {
535537
color="neutral"
536538
coloringStyle="text"
537539
onClick={onClose}
538-
className="lg:hidden"
540+
className="min-h-11 min-w-11 lg:hidden"
539541
>
540542
<X className="size-6" />
541543
</IconButton>
@@ -683,7 +685,7 @@ export const Page = ({
683685
})
684686

685687
return (
686-
<div className="flex-row-0 h-screen w-screen overflow-hidden overflow-x-hidden">
688+
<div className="flex-row-0 h-dvh min-h-dvh max-h-dvh w-screen overflow-hidden overflow-x-hidden">
687689
<Head>
688690
<title>{titleWrapper(pageTitle)}</title>
689691
</Head>
@@ -696,10 +698,10 @@ export const Page = ({
696698
/>
697699
<div
698700
ref={mainContentRef as React.RefObject<HTMLDivElement>}
699-
className="flex-col-4 lg:pl-8 grow overflow-y-scroll"
701+
className="flex-col-4 lg:pl-8 grow overflow-y-auto overscroll-y-contain"
700702
>
701703
<Header
702-
className="sticky top-0 right-0 p-4 bg-background text-on-background"
704+
className="sticky top-0 right-0 z-20 p-4 bg-background text-on-background"
703705
onMenuClick={() => setIsSidebarOpen(!isSidebarOpen)}
704706
isMenuOpen={isSidebarOpen}
705707
/>

‎web/components/properties/PropertyDetailView.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -200,10 +200,10 @@ export const PropertyDetailView = ({
200200

201201
return (
202202
<FormProvider state={form}>
203-
<div className="flex-col-0 h-full overflow-hidden">
203+
<div className="flex-col-0 h-full min-h-0 overflow-hidden px-1 sm:px-0">
204204
<form
205205
onSubmit={event => { event.preventDefault(); form.submit() }}
206-
className="flex-col-6 flex-1 overflow-y-auto"
206+
className="flex flex-col flex-1 gap-6 overflow-y-auto sm:gap-6"
207207
>
208208
<FormField<PropertyFormValues, 'name'>
209209
name="name"
@@ -289,7 +289,7 @@ export const PropertyDetailView = ({
289289
<span className="typography-title-md">
290290
{translation('selectOptions')}
291291
</span>
292-
<div className="flex-col-2 min-h-64 max-h-64 overflow-y-auto">
292+
<div className="flex-col-2 min-h-48 max-h-64 sm:min-h-64 overflow-y-auto">
293293
<FormObserverKey<PropertyFormValues, 'selectData'> formKey="selectData">
294294
{({ value: selectData }) => {
295295
return selectData?.options.map((option) => (
@@ -445,8 +445,8 @@ export const PropertyDetailView = ({
445445
label={translation('archiveProperty')}
446446
>
447447
{({ dataProps: { value, onValueChange }, focusableElementProps, interactionStates }) => (
448-
<div className="flex-row-4 justify-between items-center">
449-
<div className="flex-col-1">
448+
<div className="flex flex-col gap-4 sm:flex-row sm:justify-between sm:items-center">
449+
<div className="flex-col-1 min-w-0">
450450
<span className="typography-title-md">
451451
{translation('archiveProperty')}
452452
</span>
@@ -472,12 +472,12 @@ export const PropertyDetailView = ({
472472
</form>
473473

474474
{!isEditMode && (
475-
<div className="flex-row-0 pt-2 justify-end">
475+
<div className="flex flex-row pt-2 justify-stretch sm:justify-end">
476476
<Button
477477
type="submit"
478478
onClick={() => form.submit()}
479479
disabled={isLoading}
480-
className="w-fit"
480+
className="min-h-11 w-full sm:w-fit"
481481
>
482482
{translation('create')}
483483
</Button>

‎web/components/tables/PatientList.tsx‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -689,16 +689,19 @@ export const PatientList = forwardRef<PatientListRef, PatientListProps>(({ initi
689689
>
690690
<div className="flex flex-col h-full gap-4">
691691
<div className="flex-col-2 w-full">
692-
<div className="flex-row-8 justify-between w-full">
692+
<div className="flex flex-col-reverse gap-3 sm:flex-row sm:flex-row-8 sm:justify-between sm:gap-0 w-full">
693693
<div className="flex flex-wrap gap-2 items-center">
694694
<SearchBar
695695
placeholder={translation('search')}
696696
value={searchQuery}
697697
onChange={(e) => setSearchQuery(e.target.value)}
698698
onSearch={() => null}
699-
containerProps={{ className: 'max-w-80' }}
699+
containerProps={{ className: 'w-full max-w-full min-w-0 sm:max-w-80' }}
700+
/>
701+
<TableColumnSwitcher
702+
buttonProps={{ className: 'min-h-11 min-w-11 shrink-0' }}
703+
style={{ zIndex: 120 }}
700704
/>
701-
<TableColumnSwitcher />
702705
<Button
703706
onClick={() => setIsShowFilters(!isShowFilters)}
704707
color="neutral"
@@ -725,16 +728,19 @@ export const PatientList = forwardRef<PatientListRef, PatientListProps>(({ initi
725728
/>
726729
</Visibility>
727730
</div>
728-
<IconButton
729-
tooltip={translation('addPatient')}
730-
onClick={() => {
731-
setSelectedPatient(undefined)
732-
setIsPanelOpen(true)
733-
}}
734-
color="primary"
735-
>
736-
<PlusIcon />
737-
</IconButton>
731+
<div className="flex flex-wrap gap-2 items-center justify-end shrink-0">
732+
<IconButton
733+
tooltip={translation('addPatient')}
734+
className="min-h-11 min-w-11"
735+
onClick={() => {
736+
setSelectedPatient(undefined)
737+
setIsPanelOpen(true)
738+
}}
739+
color="primary"
740+
>
741+
<PlusIcon />
742+
</IconButton>
743+
</div>
738744
</div>
739745
{isShowFilters && (
740746
<FilterList
@@ -757,7 +763,7 @@ export const PatientList = forwardRef<PatientListRef, PatientListProps>(({ initi
757763
<HelpwaveLogo animate="loading" color="currentColor" height={64} width={64} />
758764
</div>
759765
)}
760-
<TableDisplay className="print-content"/>
766+
<TableDisplay className="print-content overflow-x-auto touch-pan-x"/>
761767
{totalCount != null && (
762768
<TablePagination
763769
allowChangingPageSize={true}

‎web/components/tables/TaskList.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -621,16 +621,19 @@ export const TaskList = forwardRef<TaskListRef, TaskListProps>(({ tasks: initial
621621
>
622622
<div className="flex flex-col h-full gap-4">
623623
<div className="flex-col-2 w-full">
624-
<div className="flex-row-8 justify-between w-full">
624+
<div className="flex flex-col-reverse gap-3 sm:flex-row sm:flex-row-8 sm:justify-between sm:gap-0 w-full">
625625
<div className="flex flex-wrap gap-2 items-center">
626626
<SearchBar
627627
placeholder={translation('search')}
628628
value={searchQuery}
629629
onChange={(e) => setSearchQuery(e.target.value)}
630630
onSearch={() => null}
631-
containerProps={{ className: 'max-w-80' }}
631+
containerProps={{ className: 'w-full max-w-full min-w-0 sm:max-w-80' }}
632+
/>
633+
<TableColumnSwitcher
634+
buttonProps={{ className: 'min-h-11 min-w-11 shrink-0' }}
635+
style={{ zIndex: 120 }}
632636
/>
633-
<TableColumnSwitcher />
634637
<Button
635638
onClick={() => setIsShowFilters(!isShowFilters)}
636639
color="neutral"
@@ -649,7 +652,7 @@ export const TaskList = forwardRef<TaskListRef, TaskListProps>(({ tasks: initial
649652
</Button>
650653
{saveViewSlot}
651654
</div>
652-
<div className="flex flex-wrap gap-2 items-center justify-end">
655+
<div className="flex flex-wrap gap-2 items-center justify-end shrink-0">
653656
{headerActions}
654657
{canHandover && (
655658
<Button
@@ -663,6 +666,7 @@ export const TaskList = forwardRef<TaskListRef, TaskListProps>(({ tasks: initial
663666
<IconButton
664667
tooltip={translation('addTask')}
665668
color="primary"
669+
className="min-h-11 min-w-11"
666670
onClick={() => setTaskDialogState({ isOpen: true })}
667671
disabled={!hasPatients}
668672
>
@@ -699,7 +703,7 @@ export const TaskList = forwardRef<TaskListRef, TaskListProps>(({ tasks: initial
699703
display: none !important;
700704
}
701705
`}</style>
702-
<TableDisplay className="print-content"/>
706+
<TableDisplay className="print-content overflow-x-auto touch-pan-x"/>
703707
{totalCount != null && (
704708
<TablePagination
705709
allowChangingPageSize={true}

‎web/globals.css‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,16 @@
66

77
@layer components {
88
body {
9-
@apply w-screen max-w-screen h-screen max-h-screen overflow-hidden;
9+
@apply w-screen max-w-screen min-h-dvh h-dvh max-h-dvh overflow-hidden;
10+
padding-top: max(0px, env(safe-area-inset-top));
11+
padding-bottom: max(0px, env(safe-area-inset-bottom));
12+
padding-left: max(0px, env(safe-area-inset-left));
13+
padding-right: max(0px, env(safe-area-inset-right));
14+
}
15+
}
16+
17+
@layer utilities {
18+
.touch-pan-x {
19+
-webkit-overflow-scrolling: touch;
1020
}
1121
}

‎web/hooks/useAuth.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ export const AuthProvider = ({
143143
}, [])
144144

145145
const authLoadingContent = (
146-
<div className="flex flex-col items-center justify-center w-screen h-screen bg-surface">
146+
<div className="flex flex-col items-center justify-center w-screen min-h-dvh h-dvh bg-surface">
147147
<HelpwaveLogo animate="loading" color="currentColor" height={128} width={128} />
148148
</div>
149149
)

‎web/package-lock.json‎

Lines changed: 12 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/package.json‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,13 @@
1212
"generate-graphql": "graphql-codegen",
1313
"check-translations": "node scripts/check-translation-keys.mjs"
1414
},
15+
"browserslist": [
16+
"last 3 iOS versions",
17+
"last 3 Safari versions",
18+
"last 2 Chrome versions",
19+
"last 2 Firefox versions",
20+
"Firefox ESR"
21+
],
1522
"dependencies": {
1623
"@apollo/client": "4.0.11",
1724
"@dnd-kit/core": "6.3.1",
@@ -55,6 +62,7 @@
5562
"baseline-browser-mapping": "^2.9.19",
5663
"eslint": "9.39.1",
5764
"graphql": "16.12.0",
58-
"graphql-request": "7.3.5"
65+
"graphql-request": "7.3.5",
66+
"postcss-flexbugs-fixes": "5.0.2"
5967
}
6068
}

‎web/pages/auth/callback.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export default function AuthCallback() {
5656
}, [hasProcessed, hasError, router])
5757

5858
return (
59-
<div className="flex flex-col items-center justify-center w-screen h-screen bg-surface">
59+
<div className="flex flex-col items-center justify-center w-screen min-h-dvh h-dvh bg-surface">
6060
<HelpwaveLogo animate="loading" color="currentColor" height={128} width={128} />
6161
{hasError && (
6262
<span className="mt-4 text-negative typography-body">

‎web/postcss.config.mjs‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
const config = {
22
plugins: {
33
'@tailwindcss/postcss': {},
4-
'autoprefixer': {},
5-
}
4+
'postcss-flexbugs-fixes': {},
5+
'autoprefixer': {
6+
flexbox: 'no-2009',
7+
},
8+
},
69
}
710

811
export default config

0 commit comments

Comments
 (0)