From 45fe53705575f4c916a2e0015e376f130fbabe8c Mon Sep 17 00:00:00 2001 From: Dhruv <91935072+dhruvdabhi101@users.noreply.github.com> Date: Thu, 11 Jul 2024 11:45:49 +0530 Subject: [PATCH] Update Mobile Navigation bar css for better usage (#6209) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes #5744 ## Description - Made Navigation Bar fixed in Mobile screens. - Added `margin-bottom` so, last entries doesn't get hidden. Screenshot 2024-07-10 at 11 58 50 PM Screenshot 2024-07-10 at 11 59 06 PM --------- Co-authored-by: Félix Malfait --- .../src/loading/components/LeftPanelSkeletonLoader.tsx | 4 ++-- .../src/loading/components/UserOrMetadataLoader.tsx | 2 +- .../modules/ui/feedback/dialog-manager/components/Dialog.tsx | 4 ++-- .../twenty-front/src/modules/ui/layout/page/BlankLayout.tsx | 4 ++-- .../twenty-front/src/modules/ui/layout/page/DefaultLayout.tsx | 4 ++-- packages/twenty-front/src/pages/auth/Authorize.tsx | 4 ++-- 6 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx b/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx index e1f73257f..a6caf8861 100644 --- a/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx +++ b/packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx @@ -1,6 +1,6 @@ -import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; import styled from '@emotion/styled'; import { motion } from 'framer-motion'; +import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; import { ANIMATION, BACKGROUND_LIGHT, GRAY_SCALE } from 'twenty-ui'; import { DESKTOP_NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/DesktopNavDrawerWidths'; @@ -18,7 +18,7 @@ const StyledItemsContainer = styled.div` gap: 32px; margin-bottom: auto; overflow-y: auto; - height: calc(100vh - 32px); + height: calc(100dvh - 32px); min-width: 216px; max-width: 216px; `; diff --git a/packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx b/packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx index d4d078619..da129175e 100644 --- a/packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx +++ b/packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx @@ -11,7 +11,7 @@ const StyledContainer = styled.div` display: flex; flex-direction: row; gap: 12px; - height: 100vh; + height: 100dvh; min-width: ${DESKTOP_NAV_DRAWER_WIDTHS.menu}px; width: 100%; padding: 12px 8px 12px; diff --git a/packages/twenty-front/src/modules/ui/feedback/dialog-manager/components/Dialog.tsx b/packages/twenty-front/src/modules/ui/feedback/dialog-manager/components/Dialog.tsx index 905bbe033..90e0a4d22 100644 --- a/packages/twenty-front/src/modules/ui/feedback/dialog-manager/components/Dialog.tsx +++ b/packages/twenty-front/src/modules/ui/feedback/dialog-manager/components/Dialog.tsx @@ -1,6 +1,6 @@ -import { useCallback } from 'react'; import styled from '@emotion/styled'; import { motion } from 'framer-motion'; +import { useCallback } from 'react'; import { Key } from 'ts-key-enum'; import { Button } from '@/ui/input/button/components/Button'; @@ -13,7 +13,7 @@ const StyledDialogOverlay = styled(motion.div)` align-items: center; background: ${({ theme }) => theme.background.overlay}; display: flex; - height: 100vh; + height: 100dvh; justify-content: center; left: 0; position: fixed; diff --git a/packages/twenty-front/src/modules/ui/layout/page/BlankLayout.tsx b/packages/twenty-front/src/modules/ui/layout/page/BlankLayout.tsx index 7836cd39d..ab2e3eba7 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/BlankLayout.tsx +++ b/packages/twenty-front/src/modules/ui/layout/page/BlankLayout.tsx @@ -1,12 +1,12 @@ -import { Outlet } from 'react-router-dom'; import { css, Global, useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import { Outlet } from 'react-router-dom'; const StyledLayout = styled.div` background: ${({ theme }) => theme.background.noisy}; display: flex; flex-direction: column; - height: 100vh; + height: 100dvh; position: relative; scrollbar-width: 4px; width: 100%; diff --git a/packages/twenty-front/src/modules/ui/layout/page/DefaultLayout.tsx b/packages/twenty-front/src/modules/ui/layout/page/DefaultLayout.tsx index d347a23d9..a41e79142 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/DefaultLayout.tsx +++ b/packages/twenty-front/src/modules/ui/layout/page/DefaultLayout.tsx @@ -1,7 +1,7 @@ -import { Outlet } from 'react-router-dom'; import { css, Global, useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { AnimatePresence, LayoutGroup, motion } from 'framer-motion'; +import { Outlet } from 'react-router-dom'; import { AuthModal } from '@/auth/components/Modal'; import { CommandMenu } from '@/command-menu/components/CommandMenu'; @@ -21,7 +21,7 @@ const StyledLayout = styled.div` background: ${({ theme }) => theme.background.noisy}; display: flex; flex-direction: column; - height: 100vh; + height: 100dvh; position: relative; scrollbar-color: ${({ theme }) => theme.border.color.medium}; scrollbar-width: 4px; diff --git a/packages/twenty-front/src/pages/auth/Authorize.tsx b/packages/twenty-front/src/pages/auth/Authorize.tsx index 611e265d4..20be8c501 100644 --- a/packages/twenty-front/src/pages/auth/Authorize.tsx +++ b/packages/twenty-front/src/pages/auth/Authorize.tsx @@ -1,6 +1,6 @@ +import styled from '@emotion/styled'; import { useEffect, useState } from 'react'; import { useNavigate, useSearchParams } from 'react-router-dom'; -import styled from '@emotion/styled'; import { AppPath } from '@/types/AppPath'; import { MainButton } from '@/ui/input/button/components/MainButton'; @@ -14,7 +14,7 @@ const StyledContainer = styled.div` display: flex; align-items: center; flex-direction: column; - height: 100vh; + height: 100dvh; justify-content: center; width: 100%; `;