Merge pull request #277 from IntersectMBO/fix/user-profile-button-ove…

…rlaps-background-behind fix: User Profile button overlaps background behind
IntersectMBO · Aug 19, 2024 · c12c048 · c12c048
2 parents f4d1081 + 1cd04cd
commit c12c048
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/frontend/src/components/molecules/UserProfileButton.tsx b/frontend/src/components/molecules/UserProfileButton.tsx
@@ -78,7 +78,7 @@ export default function UserProfileButton({
             "aria-labelledby": "basic-button",
           }}
           PaperProps={{
-            style: { backgroundColor: "transparent", boxShadow: "none" },
+            style: { boxShadow: "none" },
           }}
         >
           <Grid

diff --git a/frontend/src/components/organisms/Constitution/Constitution.tsx b/frontend/src/components/organisms/Constitution/Constitution.tsx
@@ -3,7 +3,7 @@
 import { Card } from "@molecules";
 import { Box, Divider, Grid } from "@mui/material";
 import { MDXRemote } from "next-mdx-remote";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import {
   Code,
   Heading1,
@@ -23,14 +23,22 @@ import { ContentWrapper } from "@/components/atoms";
 import { NotFound } from "../NotFound";
 import { PageTitleTabs } from "../PageTitleTabs";
 import { isAnyAdminRole } from "@utils";
+import { useScreenDimension } from "@hooks";
 
 export function Constitution({ constitution, metadata }: ConstitutionProps) {
+  const { isMobile } = useScreenDimension();
   const { userSession } = useAppContext();
   const [isOpen, setIsOpen] = useState(true);
   const [tab, setTab] = useState("revisions");
   const { openModal } = useModal();
   const t = useTranslations("Constitution");
 
+  useEffect(() => {
+    if (isMobile) {
+      setIsOpen(false);
+    }
+  }, [isMobile]);
+
   const onCompare = (
     target: Omit<ConstitutionMetadata, "version" | "url" | "blake2b">
   ) => {