From 69baba7848102e6d6be7b174c4324a95840c2f7c Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Wed, 5 Jun 2024 18:07:02 +0300
Subject: [PATCH] Fix viewport units for mobile

---
 rsconcept/frontend/src/app/Footer.tsx                  |  3 +--
 rsconcept/frontend/src/components/ui/Modal.tsx         |  4 ++--
 rsconcept/frontend/src/context/OptionsContext.tsx      | 10 +++++-----
 .../src/dialogs/DlgCreateCst/FormCreateCst.tsx         |  2 +-
 rsconcept/frontend/src/dialogs/DlgRenameCst.tsx        |  2 +-
 rsconcept/frontend/src/dialogs/DlgShowAST.tsx          |  2 +-
 6 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/rsconcept/frontend/src/app/Footer.tsx b/rsconcept/frontend/src/app/Footer.tsx
index 4d8169a6..e22c4655 100644
--- a/rsconcept/frontend/src/app/Footer.tsx
+++ b/rsconcept/frontend/src/app/Footer.tsx
@@ -12,10 +12,9 @@ function Footer() {
   }
   return (
     <footer
-      tabIndex={-1}
       className={clsx(
         'z-navigation',
-        'w-full',
+        'mx-auto',
         'sm:px-4 sm:py-2 flex flex-col items-center gap-1',
         'text-xs sm:text-sm select-none whitespace-nowrap'
       )}
diff --git a/rsconcept/frontend/src/components/ui/Modal.tsx b/rsconcept/frontend/src/components/ui/Modal.tsx
index 789129ed..a6aaa2b3 100644
--- a/rsconcept/frontend/src/components/ui/Modal.tsx
+++ b/rsconcept/frontend/src/components/ui/Modal.tsx
@@ -89,8 +89,8 @@ function Modal({
           className={clsx('overflow-auto overscroll-contain', className)}
           style={{
             overflow: overflowVisible ? 'visible' : 'auto',
-            maxHeight: 'calc(100vh - 8rem)',
-            maxWidth: 'calc(100vw - 2rem)'
+            maxHeight: 'calc(100svh - 8rem)',
+            maxWidth: 'calc(100svw - 2rem)'
           }}
         >
           {children}
diff --git a/rsconcept/frontend/src/context/OptionsContext.tsx b/rsconcept/frontend/src/context/OptionsContext.tsx
index 94efb0c4..b02220fe 100644
--- a/rsconcept/frontend/src/context/OptionsContext.tsx
+++ b/rsconcept/frontend/src/context/OptionsContext.tsx
@@ -98,11 +98,11 @@ export const OptionsState = ({ children }: OptionsStateProps) => {
   const calculateHeight = useCallback(
     (offset: string, minimum: string = '0px') => {
       if (noNavigation) {
-        return `max(calc(100vh - (${offset})), ${minimum})`;
+        return `max(calc(100dvh - (${offset})), ${minimum})`;
       } else if (noFooter) {
-        return `max(calc(100vh - 3rem - (${offset})), ${minimum})`;
+        return `max(calc(100dvh - 3rem - (${offset})), ${minimum})`;
       } else {
-        return `max(calc(100vh - 6.75rem - (${offset})), ${minimum})`;
+        return `max(calc(100dvh - 6.75rem - (${offset})), ${minimum})`;
       }
     },
     [noNavigation, noFooter]
@@ -114,11 +114,11 @@ export const OptionsState = ({ children }: OptionsStateProps) => {
   }, [setDarkMode]);
 
   const mainHeight = useMemo(() => {
-    return !noNavigation ? 'calc(100vh - 6.75rem)' : '100vh';
+    return !noNavigation ? 'calc(100dvh - 6.75rem)' : '100dvh';
   }, [noNavigation]);
 
   const viewportHeight = useMemo(() => {
-    return !noNavigation ? 'calc(100vh - 3rem)' : '100vh';
+    return !noNavigation ? 'calc(100dvh - 3rem)' : '100dvh';
   }, [noNavigation]);
 
   return (
diff --git a/rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx b/rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx
index ac08bb2f..140bcfc8 100644
--- a/rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx
@@ -52,7 +52,7 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
           value={{ value: state.cst_type, label: labelCstType(state.cst_type) }}
           onChange={data => partialUpdate({ cst_type: data?.value ?? CstType.BASE })}
         />
-        <BadgeHelp topic={HelpTopic.CC_CONSTITUENTA} offset={16} className='max-w-[40rem] max-h-[calc(100vh-2rem)]' />
+        <BadgeHelp topic={HelpTopic.CC_CONSTITUENTA} offset={16} className='max-w-[40rem] max-h-[calc(100svh-2rem)]' />
         <TextInput
           id='dlg_cst_alias'
           dense
diff --git a/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx b/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx
index 00197ec6..2ac31154 100644
--- a/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx
@@ -60,7 +60,7 @@ function DlgRenameCst({ hideWindow, initial, onRename }: DlgRenameCstProps) {
         }}
         onChange={data => updateData({ cst_type: data?.value ?? CstType.BASE })}
       />
-      <BadgeHelp topic={HelpTopic.CC_CONSTITUENTA} offset={16} className='max-w-[40rem] max-h-[calc(100vh-2rem)]' />
+      <BadgeHelp topic={HelpTopic.CC_CONSTITUENTA} offset={16} className='max-w-[40rem] max-h-[calc(100svh-2rem)]' />
       <TextInput
         id='dlg_cst_alias'
         dense
diff --git a/rsconcept/frontend/src/dialogs/DlgShowAST.tsx b/rsconcept/frontend/src/dialogs/DlgShowAST.tsx
index 6f1d6038..de51f8cc 100644
--- a/rsconcept/frontend/src/dialogs/DlgShowAST.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgShowAST.tsx
@@ -67,7 +67,7 @@ function DlgShowAST({ hideWindow, syntaxTree, expression }: DlgShowASTProps) {
           </div>
         ) : null}
       </div>
-      <div className='relative w-[calc(100vw-6rem-2px)] h-[calc(100vh-14rem-2px)]'>
+      <div className='relative w-[calc(100vw-6rem-2px)] h-[calc(100svh-14rem-2px)]'>
         <GraphUI
           animated={false}
           nodes={nodes}