Fix dvh and add hloss

web/components/answers/answer-compatibility-question-content.tsx

@@ -156,7 +156,7 @@ export function AnswerCompatibilityQuestionContent(props: {
     ? shortenNumber(compatibilityQuestion.answer_count)
     : null
   return (
-    <Col className="h-[calc(100dvh-120px)] sm:h-[calc(95dvh-120px)] min-h-0 w-full gap-4">
+    <Col className="h-[calc(100dvh-var(--hloss)-120px)] sm:h-[calc(95dvh-var(--hloss)-120px)] min-h-0 w-full gap-4">
       <Col className="gap-1 shrink-0">
         {/*{compatibilityQuestion.importance_score > 0 && <Row className="text-blue-400 -mt-4 w-full justify-start text-sm">*/}
         {/*  <span>*/}

web/pages/donate.tsx

@@ -16,7 +16,7 @@ export default function DonatePage() {
       <Col className="max-w-3xl w-full mx-auto gap-6 custom-link">
         <h1 className="text-3xl font-semibold">{t('donate.title','Donate')}</h1>
         <iframe src="https://opencollective.com/embed/compass-connection/donate?hideFAQ=true"
-                style={{width: '100%', minHeight: '100vh'}}></iframe>
+                style={{width: '100%', minHeight: '100dvh'}}></iframe>
       </Col>
     </PageBase>
   )

web/pages/notifications.tsx

@@ -73,7 +73,7 @@ function LoadedNotificationsContent(props: { user: User }) {
 
   return (
     <div className="relative mt-2 h-full w-full">
-      <Col className={'min-h-[100vh] gap-0 text-sm'}>
+      <Col className={'min-h-[100dvh] gap-0 text-sm'}>
         {groupedNotifications === undefined ||
         paginatedGroupedNotifications === undefined ? (
           <CompassLoadingIndicator/>