fix(mobile): account for address bar height

wallet-dm · Feb 11, 2024 · fb85e02 · fb85e02
1 parent fe5aaf0
commit fb85e02
Show file tree

Hide file tree

Showing 8 changed files with 11 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="h-screen w-screen bg-white" lang="en">
+<html class="h-dvh w-screen bg-white" lang="en">
   <head>
     <meta name="description" content="Chat via XMTP" />
     <link rel="icon" href="/favicon.ico" />

diff --git a/src/component-library/components/Error/Error.tsx b/src/component-library/components/Error/Error.tsx
@@ -17,7 +17,7 @@ export const Error = ({ errorText, onConnect }: ErrorProps) => {
   const { t } = useTranslation();
 
   return (
-    <div className="bg-white flex flex-col justify-center items-center max-w-sm text-center m-auto w-screen p-4 h-screen">
+    <div className="bg-white flex flex-col justify-center items-center max-w-sm text-center m-auto w-screen p-4 h-dvh">
       <ExclamationIcon className="text-red-600" width={82} />
       <div className="mt-2">
         <h1 className="text-4xl font-bold p-4 pt-0">

diff --git a/src/component-library/components/HeaderDropdown/HeaderDropdown.tsx b/src/component-library/components/HeaderDropdown/HeaderDropdown.tsx
@@ -51,8 +51,9 @@ export const HeaderDropdown = ({
             data-testid={testId}
             type="button"
             className={classNames(
-              "text-lg mr-2 cursor-pointer",
+              "mr-2 cursor-pointer truncate",
               activeTab === name ? "font-bold" : "",
+              isMobileView ? "text-md" : "text-lg",
             )}
             onClick={() => {
               setActiveTab(name as ActiveTab);

diff --git a/src/component-library/components/OnboardingStep/OnboardingStep.tsx b/src/component-library/components/OnboardingStep/OnboardingStep.tsx
@@ -51,7 +51,7 @@ export const OnboardingStep = ({
     const { header, subheader, cta, subtext, disconnect_tip } = stepInfo;
 
     return (
-      <div className="bg-white flex flex-col justify-around items-center max-w-sm text-center m-auto w-screen p-4 h-screen">
+      <div className="bg-white flex flex-col justify-around items-center max-w-sm text-center m-auto w-screen p-4 h-dvh">
         {isLoading ? (
           <Spinner />
         ) : (

diff --git a/src/component-library/components/SideNav/SideNav.tsx b/src/component-library/components/SideNav/SideNav.tsx
@@ -147,7 +147,7 @@ const SideNav = ({
         "flex-col",
         "justify-between",
         "items-center",
-        "h-screen",
+        "h-dvh",
         "bg-white",
         isOpen ? "px-6" : "px-3",
         "border-r",

diff --git a/src/component-library/pages/ErrorPage/ErrorPage.tsx b/src/component-library/pages/ErrorPage/ErrorPage.tsx
@@ -20,7 +20,7 @@ export const ErrorPage = ({
   const { t } = useTranslation();
 
   return (
-    <div className="bg-white h-screen max-w-sm flex flex-col justify-center items-center m-auto text-center">
+    <div className="bg-white h-dvh max-w-sm flex flex-col justify-center items-center m-auto text-center">
       {icon}
       <div className="text-4xl font-bold mb-4">
         {header || t("status_messaging.error_1_header")}

diff --git a/src/pages/inbox.tsx b/src/pages/inbox.tsx
@@ -132,7 +132,7 @@ const Inbox: React.FC<{ children?: React.ReactNode }> = () => {
           (!recipientAddress && !startedFirstMessage) ? (
             <>
               <SideNavController />
-              <div className="flex flex-col w-full h-screen overflow-y-auto md:w-[350px]">
+              <div className="flex flex-col w-full h-dvh overflow-y-auto md:w-[350px]">
                 <HeaderDropdownController />
                 <ConversationListController
                   setStartedFirstMessage={setStartedFirstMessage}
@@ -144,7 +144,7 @@ const Inbox: React.FC<{ children?: React.ReactNode }> = () => {
         {size[0] > TAILWIND_MD_BREAKPOINT ||
         recipientAddress ||
         startedFirstMessage ? (
-          <div className="flex w-full flex-col h-screen overflow-hidden">
+          <div className="flex w-full flex-col h-dvh overflow-hidden">
             {!conversations.length &&
             !loadingConversations &&
             !startedFirstMessage ? (
@@ -154,7 +154,7 @@ const Inbox: React.FC<{ children?: React.ReactNode }> = () => {
               />
             ) : (
               // Full container including replies
-              <div className="flex h-screen">
+              <div className="flex h-dvh">
                 <div className="h-full w-full flex flex-col justify-between">
                   {activeMessage && selectedConversation ? (
                     <div className="h-full overflow-auto">

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -48,7 +48,7 @@ const OnboardingPage = () => {
   }, [status]);
 
   return (
-    <div className={classNames("h-screen", "w-full", "overflow-auto")}>
+    <div className={classNames("h-dvh", "w-full", "overflow-auto")}>
       <OnboardingStep
         step={step}
         isLoading={isLoading}