Merge pull request #1109 from nextstrain/fix-login-button-on-mobile-962

Fix login button on mobile [#962]
nextstrain · Jan 15, 2025 · d862472 · d862472
2 parents 40be39b + fe047d4
commit d862472
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/static-site/components/nav/nav-logo.tsx b/static-site/components/nav/nav-logo.tsx
@@ -37,9 +37,11 @@ const LogoType = (): React.ReactElement => {
   );
 
   return (
-    <a href="/" className={styles.wordmark}>
-      {rainbowTitle}
-      {groupsApp && <SubTitle />}
-    </a>
+    <div className={styles.responsiveTitle}>
+      <a href="/" className={styles.wordmark}>
+        {rainbowTitle}
+        {groupsApp && <SubTitle />}
+      </a>
+    </div>
   );
 };
diff --git a/static-site/components/nav/styles.module.css b/static-site/components/nav/styles.module.css
@@ -1,3 +1,9 @@
+@media (max-width: 768px) {
+  .responsiveTitle {
+    display: none;
+  }
+}
+
 .nav {
   align-items: center;
   display: flex;

diff --git a/static-site/src/components/nav-bar/index.tsx b/static-site/src/components/nav-bar/index.tsx
@@ -105,14 +105,21 @@ const NavBar = ({ minified }: {
     const SubTitle = styled.div`
       color: black;
     `;
+    const ResponsiveTitle = styled.div`
+      @media (max-width: 768px) {
+        display: none;
+      }
+    `;
+
     return (
       minified ?
         <div/>
         :
         <a href="/">
-          {rainbowTitle}
-          {groupsApp &&
-            <SubTitle>Groups Server</SubTitle>}
+          <ResponsiveTitle>
+            {rainbowTitle}
+            {groupsApp && <SubTitle>Groups Server</SubTitle>}
+          </ResponsiveTitle>
         </a>
     );
   }