Various mobile tweaks, always use explicit reference viewport for sizes

davidje13 · davidje13 · commit 7a45ef0f09bd · 2026-04-01T01:06:06.000+01:00
diff --git a/frontend/src/components/attachments/giphy/GiphyAttachment.css b/frontend/src/components/attachments/giphy/GiphyAttachment.css
@@ -3,7 +3,7 @@
     display: block;
     margin: 0 auto 8px;
     width: 100%;
-    max-height: clamp(100px, 30vh, 300px);
+    max-height: clamp(100px, 30svh, 300px);
     object-fit: contain;
   }
 
diff --git a/frontend/src/components/attachments/giphy/GiphyPopup.css b/frontend/src/components/attachments/giphy/GiphyPopup.css
@@ -3,8 +3,8 @@
   flex-direction: column;
   gap: 8px;
   width: 900px;
-  max-width: calc(100vw - 128px);
-  max-height: calc(100vh - 128px);
+  max-width: calc(100svw - 128px);
+  max-height: calc(100dvh - 128px);
 
   & form {
     display: flex;
diff --git a/frontend/src/components/common/Popup.css b/frontend/src/components/common/Popup.css
@@ -40,7 +40,7 @@
   }
 
   .global-form {
-    max-width: calc(100vw - 16px);
+    max-width: calc(100svw - 16px);
   }
 }
 
@@ -76,7 +76,7 @@
     padding: 16px 32px;
 
     .global-form {
-      max-width: calc(100vw - 64px);
+      max-width: calc(100svw - 64px);
     }
   }
 }
diff --git a/frontend/src/components/global-styles/article.css b/frontend/src/components/global-styles/article.css
@@ -1,5 +1,5 @@
 .global-article {
-  padding-bottom: 50vh;
+  padding-bottom: 50lvh;
 
   & section {
     margin: 64px auto;
diff --git a/frontend/src/components/global-styles/form.css b/frontend/src/components/global-styles/form.css
@@ -1,7 +1,7 @@
 .global-form {
   display: block;
   width: 600px;
-  max-width: calc(100vw - 32px);
+  max-width: calc(100svw - 32px);
 
   & label {
     display: block;
diff --git a/frontend/src/components/items/ItemToast.css b/frontend/src/components/items/ItemToast.css
@@ -22,7 +22,7 @@
         var(--notification-back) 70%,
         transparent
       );
-      max-width: min(calc(100vw - 64px), 300px);
+      max-width: min(calc(100svw - 64px), 300px);
       line-clamp: 3;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 3;
diff --git a/frontend/src/components/retro-formats/RetroPreviewPage.css b/frontend/src/components/retro-formats/RetroPreviewPage.css
@@ -1,5 +1,5 @@
 .page-retro-preview {
-  width: 100vw;
+  width: 100dvw;
   box-sizing: border-box;
   overflow: clip;
   pointer-events: none;
diff --git a/frontend/src/components/retro-formats/health/HealthRetro.css b/frontend/src/components/retro-formats/health/HealthRetro.css
@@ -3,15 +3,15 @@
   align-content: stretch;
   position: relative;
   min-height: max(
-    calc(100vh - 192px - 3rem),
-    min(calc(100vh - 3rem - 28px), 700px)
+    calc(100svh - 192px - 3rem),
+    min(calc(100svh - 3rem - 28px), 700px)
   );
   padding: 16px 8px 0;
   overflow: clip;
   background: var(--beige-back);
   --card-size-base: min(
-    max(3vw, 11px),
-    max(calc((100vh - 150px) * 0.03), 18px),
+    max(3svw, 11px),
+    max(calc((100svh - 150px) * 0.03), 18px),
     30px
   );
 
diff --git a/frontend/src/components/retro-formats/health/ImportPopup.css b/frontend/src/components/retro-formats/health/ImportPopup.css
@@ -3,6 +3,10 @@
     margin: 16px 0;
   }
 
+  input[type='date'] {
+    max-width: calc(100svw - 16px); /* mobile Safari fix */
+  }
+
   .data {
     table-layout: fixed;
     width: 100%;
diff --git a/frontend/src/components/retro-formats/health/questions/Questions.css b/frontend/src/components/retro-formats/health/questions/Questions.css
@@ -215,8 +215,8 @@ html:active-view-transition-type(health-advance) {
 ::view-transition-group(health-answer) {
   animation-duration: 1.7s;
   --card-size-base: min(
-    max(3vw, 11px),
-    max(calc((100vh - 150px) * 0.03), 18px),
+    max(3svw, 11px),
+    max(calc((100svh - 150px) * 0.03), 18px),
     30px
   );
   height: calc(var(--card-size-base) * 13);
diff --git a/frontend/src/components/retro-formats/mood/MoodRetro.css b/frontend/src/components/retro-formats/mood/MoodRetro.css
@@ -331,7 +331,7 @@
     .columns {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
-      min-height: 50vh;
+      min-height: 50lvh;
     }
 
     & section.actions {
@@ -354,7 +354,7 @@
       }
 
       .new-action-item {
-        --entry-width: max(calc(100vw / 3 + 48px), 24rem);
+        --entry-width: max(calc(100svw / 3 + 48px), 24rem);
 
         .text-entry {
           margin: 0 auto;
@@ -363,7 +363,7 @@
 
         .typing-indicator {
           position: absolute;
-          left: calc(50vw + var(--entry-width) / 2);
+          left: calc(50svw + var(--entry-width) / 2);
           padding: 8px 16px;
           bottom: 0;
           font-size: 0.8em;
@@ -435,7 +435,7 @@
 
     .tab-content > section {
       padding-bottom: 192px;
-      min-height: 100vh;
+      min-height: 100lvh;
 
       > section {
         padding-bottom: 20px;
diff --git a/frontend/src/components/retro-formats/timeline/events-editor/EventListEditor.css b/frontend/src/components/retro-formats/timeline/events-editor/EventListEditor.css
@@ -1,6 +1,6 @@
 .event-list-editor {
   padding: 16px 16px 64px;
-  min-height: calc(50vh - 64px);
+  min-height: calc(50lvh - 64px);
 
   .content {
     max-width: 600px;
diff --git a/frontend/src/components/retro-formats/timeline/lessons/AddLesson.css b/frontend/src/components/retro-formats/timeline/lessons/AddLesson.css
@@ -2,7 +2,7 @@
   margin: 16px 0;
   position: relative;
 
-  --entry-width: min(max(calc(100vw / 3 + 48px), 768px), calc(100vw - 32px));
+  --entry-width: min(max(calc(100svw / 3 + 48px), 768px), calc(100svw - 32px));
 
   .text-entry {
     position: relative;
diff --git a/frontend/src/components/retro-formats/timeline/lessons/LessonsPane.css b/frontend/src/components/retro-formats/timeline/lessons/LessonsPane.css
@@ -1,6 +1,6 @@
 section.lessons {
   padding: 0 16px 16px;
-  min-height: calc(50vh - 64px);
+  min-height: calc(50lvh - 64px);
 
   .content {
     margin: 0 auto;
diff --git a/frontend/src/components/retro-formats/timeline/mood-line/MoodLineEditor.css b/frontend/src/components/retro-formats/timeline/mood-line/MoodLineEditor.css
@@ -4,7 +4,7 @@
 
   .drawing-area {
     width: 100%;
-    height: max(min(60vw, calc(100vh - 210px)), 300px);
+    height: max(min(60lvw, calc(100dvh - 210px)), 300px);
     font-size: 1rem;
     background: var(--primary-back);
     padding: calc(24px + 3.5em) 96px calc(8px + 3.5em);
diff --git a/frontend/src/components/retro/InvitePopup.css b/frontend/src/components/retro/InvitePopup.css
@@ -12,19 +12,19 @@
     border-radius: 5px;
     overflow-wrap: break-word;
     user-select: all;
-    max-width: calc(100vw - 64px);
+    max-width: calc(100svw - 64px);
 
     @media (min-width: 600px) {
       font-size: 1.8em;
-      max-width: calc(100vw - 128px);
+      max-width: calc(100svw - 128px);
     }
   }
 
   .qr-code {
     display: block;
-    width: calc(80vh - 52px - 3.2em);
+    width: calc(80dvh - 52px - 3.2em);
     min-width: 350px;
-    max-width: calc(100vw - 96px);
+    max-width: calc(100svw - 96px);
     aspect-ratio: 1;
     margin: 0 auto;
 
diff --git a/frontend/src/helpers/realAutoFocus.ts b/frontend/src/helpers/realAutoFocus.ts
@@ -2,5 +2,15 @@
 // is problematic in some situations (e.g. in <dialog>). This helper can be
 // used as a `ref` to set the real autofocus property in these cases.
 
-export const realAutoFocus = (o: HTMLElement | null) =>
-  o?.setAttribute('autofocus', '');
+export const realAutoFocus = (o: HTMLElement | null) => {
+  if (o) {
+    if (
+      o.getAttribute('type') === 'date' &&
+      matchMedia?.('(pointer: coarse)').matches
+    ) {
+      // avoid auto-focusing date fields on mobile, as it will make the date picker UI appear immediately
+      return;
+    }
+    o.setAttribute('autofocus', '');
+  }
+};

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`display: block;`
`4`	`4`	`margin: 0 auto 8px;`
`5`	`5`	`width: 100%;`
`6`		`- max-height: clamp(100px, 30vh, 300px);`
	`6`	`+ max-height: clamp(100px, 30svh, 300px);`
`7`	`7`	`object-fit: contain;`
`8`	`8`	`}`
`9`	`9`
Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@`
`40`	`40`	`}`
`41`	`41`
`42`	`42`	`.global-form {`
`43`		`- max-width: calc(100vw - 16px);`
	`43`	`+ max-width: calc(100svw - 16px);`
`44`	`44`	`}`
`45`	`45`	`}`
`46`	`46`
`@@ -76,7 +76,7 @@`
`76`	`76`	`padding: 16px 32px;`
`77`	`77`
`78`	`78`	`.global-form {`
`79`		`- max-width: calc(100vw - 64px);`
	`79`	`+ max-width: calc(100svw - 64px);`
`80`	`80`	`}`
`81`	`81`	`}`
`82`	`82`	`}`