fix firefox widget css

src/contents/components/firefoxWidgetStyle.module.css

@@ -11,6 +11,7 @@
 
 .widgetContainer {
   width: calc(100% - 20px);
+  max-width: 1200px;
   display: block;
   background-color: #fff7;
   backdrop-filter: blur(6px);

src/contents/menuWidget.tsx

@@ -2,6 +2,7 @@ import createCache from "@emotion/cache";
 import { CacheProvider } from "@emotion/react";
 import styleText from "data-text:./components/firefoxWidgetStyle.module.css";
 import type { PlasmoCSConfig } from "plasmo";
+import { isFirefox } from "./util/functions";
 
 export const config: PlasmoCSConfig = {
   matches: ["https://scombz.shibaura-it.ac.jp/*"],
@@ -17,7 +18,7 @@ const styleCache = createCache({
 });
 
 export const getStyle = () => {
-  if (process.env.PLASMO_BROWSER === "firefox") {
+  if (isFirefox()) {
     const style = document.createElement("style");
     style.textContent = styleText;
     return style;
@@ -27,7 +28,7 @@ export const getStyle = () => {
 };
 
 const MenuWidget = () => {
-  if (process.env.PLASMO_BROWSER === "firefox") {
+  if (isFirefox()) {
     // eslint-disable-next-line @typescript-eslint/no-var-requires
     const MenuWidgetFirefox = require("./components/menuWidgetFirefox").default;
     return (

src/contents/util/functions.ts

@@ -63,7 +63,7 @@ export const serializeData = (data): string => {
  *
  */
 export const isFirefox = (): boolean => {
-  return navigator.userAgent.toLowerCase().includes("firefox");
+  return process.env.PLASMO_BROWSER === "firefox";
 };
 
 /**

src/popup/index.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useState } from "react";
 import { MultiPageTimeTable } from "./components/MultiPageTimeTable";
 import theme from "~/theme";
 import type { Task } from "~contents/types/task";
+import { isFirefox } from "~contents/util/functions";
 import { defaultSaves, type Saves } from "~settings";
 
 const openOptions = () => {
@@ -57,26 +58,16 @@ const IndexPopup = () => {
 
   return (
     <ThemeProvider theme={theme}>
-      <Box
-        width={376}
-        maxWidth={376}
-        overflow={process.env.PLASMO_BROWSER === "firefox" && "hidden"}
-        textAlign="center"
-        mt={process.env.PLASMO_BROWSER !== "firefox" && 1}
-      >
+      <Box width={376} maxWidth={376} overflow={isFirefox() && "hidden"} textAlign="center" mt={!isFirefox() && 1}>
         <Grid>
           <img
             src={chrome.runtime.getURL("assets/scombz_utilities.svg")}
-            width={process.env.PLASMO_BROWSER === "firefox" ? 200 : 240}
+            width={isFirefox() ? 200 : 240}
             alt="ScombZ Utilites"
           />
         </Grid>
 
-        <Box
-          mt={process.env.PLASMO_BROWSER === "firefox" ? 0.5 : 1}
-          mb={process.env.PLASMO_BROWSER === "firefox" ? 0.5 : 2}
-          mx={2}
-        >
+        <Box mt={isFirefox() ? 0.5 : 1} mb={isFirefox() ? 0.5 : 2} mx={2}>
           <Box>
             <MultiPageTimeTable
               courses={saves.scombzData.timetable}
@@ -98,7 +89,7 @@ const IndexPopup = () => {
           sx={{
             background: theme.palette.grey[300],
           }}
-          width={process.env.PLASMO_BROWSER === "firefox" ? "100%" : "100vw"}
+          width={isFirefox() ? "100%" : "100vw"}
           px={1.5}
           py={0.5}
           m={process.env.PLASMO_BROWSER !== "firefox" && -1}