🐛 fix browser compatibility and footer

src/App.tsx

@@ -5,11 +5,13 @@ import Fallback from "./pages/Fallback";
 import { ThemeProvider } from "@mui/material/styles";
 import AppTheme from "./utils/AppTheme";
 import AppRouter from "./utils/AppRouter";
+import { CssBaseline } from "@mui/material";
 
 const app = () => {
   return (
     <div>
       <ThemeProvider theme={AppTheme}>
+        <CssBaseline />
         <RouterProvider router={AppRouter} fallbackElement={<Fallback />} />
       </ThemeProvider>
     </div>

src/components/layout/components/Footer.tsx

@@ -37,6 +37,7 @@ const handleBackToTop = () => {
 };
 
 const currentYear = dayjs(new Date()).year();
+const version = import.meta.env.VITE_APP_VERSION;
 
 const Footer: FC = () => {
   return (
@@ -171,7 +172,8 @@ const Footer: FC = () => {
           <Grid container>
             <Grid item xs={6}>
               <Typography color="#000" fontSize={fontSize.subscription}>
-                @IMOS {currentYear}
+                Copyright © {currentYear}. All rights reserved. Version :{" "}
+                {version}
               </Typography>
             </Grid>
             <Grid

src/pages/landing-page/subpages/smartpanel/SmartPanel.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback, useRef } from "react";
+import { FC, useCallback, useMemo, useRef } from "react";
 import ImageList from "@mui/material/ImageList";
 import ImageListItem from "@mui/material/ImageListItem";
 import Box from "@mui/material/Box";
@@ -7,21 +7,30 @@ import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
 import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
 import { color, gap } from "../../../../styles/constants";
 import {
-  DEFAULT_CARD_SIZE,
-  DEFAULT_GAP,
+  SMART_PANEL_CARD_SIZE,
+  SMART_PANEL_GAP,
   ITEM_DATA,
   ItemType,
   SCROLL_DISTANCE,
   SMART_PANEL_HEIGHT,
   SMART_PANEL_WIDTH,
 } from "./constants";
-import { getItemCols, getItemRows } from "./utils";
+import {
+  calculateImageListWidth,
+  calculateTotalCols,
+  getItemCols,
+  getItemRows,
+} from "./utils";
 import SmallCard from "./components/SmallCard";
 import MediumCard from "./components/MediumCard";
 import LargeCard from "./components/LargeCard";
 
 const SmartPanel: FC = () => {
   const boxRef = useRef<HTMLDivElement>(null);
+
+  const imageListTotalCols = useMemo(() => calculateTotalCols(ITEM_DATA), []);
+  const imageListWidth = useMemo(() => calculateImageListWidth(ITEM_DATA), []);
+
   const handleScroll = useCallback(
     (scrollOffset: number) => {
       if (boxRef && boxRef.current) {
@@ -60,7 +69,7 @@ const SmartPanel: FC = () => {
       >
         <ImageList
           sx={{
-            width: "fit-content",
+            width: imageListWidth,
             height: SMART_PANEL_HEIGHT,
             m: 0,
             p: 0,
@@ -71,9 +80,9 @@ const SmartPanel: FC = () => {
             "scrollbar-width": "none",
           }}
           variant="quilted"
-          cols={18}
-          rowHeight={DEFAULT_CARD_SIZE}
-          gap={DEFAULT_GAP}
+          cols={imageListTotalCols}
+          rowHeight={SMART_PANEL_CARD_SIZE}
+          gap={SMART_PANEL_GAP}
         >
           {ITEM_DATA.map((item) => (
             <ImageListItem
@@ -82,9 +91,10 @@ const SmartPanel: FC = () => {
               rows={getItemRows(item.type)}
               sx={{
                 width:
-                  item.type === ItemType.small
-                    ? DEFAULT_CARD_SIZE
-                    : getItemCols(item.type) * DEFAULT_CARD_SIZE + DEFAULT_GAP,
+                  item.type === ItemType.Small
+                    ? SMART_PANEL_CARD_SIZE
+                    : getItemCols(item.type) * SMART_PANEL_CARD_SIZE +
+                      SMART_PANEL_GAP,
               }}
             >
               {item.type === "small" && <SmallCard cardData={item} />}

src/pages/landing-page/subpages/smartpanel/components/CardContainer.tsx

@@ -20,6 +20,7 @@ const CardContainer: FC<CardContainerProps> = ({
       flexDirection: "column",
       justifyContent: "center",
       alignItems: "center",
+      overflow: "hidden",
       bgcolor: color.white.twoTenTransparent,
       border: `${border.xs} ${color.brightBlue.semiTransparentDark}`,
       color: "#fff",

src/pages/landing-page/subpages/smartpanel/constants.ts

@@ -23,20 +23,15 @@ import iconVessel from "@/assets/smartPanelIcons/icon_vessel.png";
 import iconGeoscientific from "@/assets/smartPanelIcons/icon_geoscientific.png";
 import imgVisualTools from "@/assets/smartPanelIcons/img_visual_tools.png";
 import iconLocation from "@/assets/smartPanelIcons/icon_location.png";
+import { calculateImageListWidth } from "./utils";
+
+export const SMART_PANEL_GAP = 12;
 
-export const SMART_PANEL_WIDTH = 840;
 export const SMART_PANEL_HEIGHT = 180;
 
+// if this constant changed, we may need modify utils accordingly
 const SMART_PANEL_ROWS = 2;
 
-const CARD_BORDER = 1;
-export const DEFAULT_GAP = 12;
-export const DEFAULT_CARD_SIZE =
-  (SMART_PANEL_HEIGHT - DEFAULT_GAP * (SMART_PANEL_ROWS - 1)) /
-    SMART_PANEL_ROWS -
-  CARD_BORDER * 2;
-export const SCROLL_DISTANCE = SMART_PANEL_WIDTH / 2 + DEFAULT_GAP;
-
 export interface CardData {
   title: string;
   icon?: string;
@@ -49,137 +44,149 @@ export interface ItemData extends CardData {
 }
 
 export enum ItemType {
-  small = "small",
-  medium = "medium",
-  large = "large",
+  Small = "small",
+  Medium = "medium",
+  Large = "large",
 }
 
 export const ITEM_DATA: ItemData[] = [
   {
-    type: ItemType.medium,
+    type: ItemType.Medium,
     title: "Get Started",
     image: imgGetStarted,
   },
   {
-    type: ItemType.small,
+    type: ItemType.Small,
     title: "All Topics",
     icon: iconAllTopics,
   },
   {
-    type: ItemType.large,
+    type: ItemType.Large,
     title: "Surface Waves",
     image: imgSurfaceWaves,
     additionalInfo: ["Surface Temperature", "Current Velocity", "Salinity"],
   },
   {
-    type: ItemType.small,
+    type: ItemType.Small,
     title: "Reef",
     icon: iconReef,
   },
   {
-    type: ItemType.small,
+    type: ItemType.Small,
     title: "Satellite",
     icon: iconLocation,
   },
   {
-    type: ItemType.medium,
+    type: ItemType.Medium,
     title: "Popular Search",
     image: imgPopularSearch,
   },
   {
-    type: ItemType.large,
+    type: ItemType.Large,
     title: "Ocean Current",
     image: imgOceanCurrent,
     additionalInfo: ["Four-hour SST", "Ocean Colour", "Adjusted Sea Level"],
   },
   {
-    type: ItemType.small,
+    type: ItemType.Small,
     title: "Environment",
     icon: iconEnvironment,
   },
   {
-    type: ItemType.small,
+    type: ItemType.Small,
     title: "Climate",
     icon: iconClimate,
   },
   {
-    type: ItemType.small,
+    type: ItemType.Small,
     title: "Moorings",
     icon: iconMoorings,
   },
   {
-    type: ItemType.small,
+    type: ItemType.Small,
     title: "Gliders",
     icon: iconGlider,
   },
   {
-    type: ItemType.small,
+    type: ItemType.Small,
     title: "AUV",
     icon: iconAUV,
   },
   {
-    type: ItemType.medium,
+    type: ItemType.Medium,
     title: "Contributing Data",
     image: imgContributingData,
   },
   {
-    type: ItemType.small,
+    type: ItemType.Small,
     title: "Tutorials",
     icon: iconTutorials,
   },
   {
-    type: ItemType.small,
+    type: ItemType.Small,
     title: "Location",
     icon: iconLocation,
   },
   {
-    type: ItemType.small,
+    type: ItemType.Small,
     title: "Ocean Biota",
     icon: iconOceanBiota,
   },
   {
-    type: ItemType.medium,
+    type: ItemType.Medium,
     title: "Explore on Map",
     image: imgExploreOnMap,
   },
   {
-    type: ItemType.small,
+    type: ItemType.Small,
     title: "Fishery",
     icon: iconFishery,
   },
   {
-    type: ItemType.small,
+    type: ItemType.Small,
     title: "Tourism",
     icon: iconTourism,
   },
   {
-    type: ItemType.small,
+    type: ItemType.Small,
     title: "Animal Tracking",
     icon: iconAnimalTracking,
   },
   {
-    type: ItemType.small,
+    type: ItemType.Small,
     title: "Tide",
     icon: iconTide,
   },
   {
-    type: ItemType.medium,
+    type: ItemType.Medium,
     title: "Visualisation Tools",
     image: imgVisualTools,
   },
   {
-    type: ItemType.small,
+    type: ItemType.Small,
     title: "Argo",
     icon: iconArgo,
   },
   {
-    type: ItemType.small,
+    type: ItemType.Small,
     title: "Vessel",
     icon: iconVessel,
   },
   {
-    type: ItemType.small,
+    type: ItemType.Small,
     title: "Geoscientific",
     icon: iconGeoscientific,
   },
 ];
+
+export const SMART_PANEL_CARD_SIZE =
+  (SMART_PANEL_HEIGHT - SMART_PANEL_GAP * (SMART_PANEL_ROWS - 1)) /
+  SMART_PANEL_ROWS;
+
+// the smart panel width will be the half width of the full image list width for now
+// if the full width is too large, should divide into a smaller size
+// to keep the smart panel width in a proper size
+export const SMART_PANEL_WIDTH =
+  calculateImageListWidth(ITEM_DATA) / 2 + SMART_PANEL_GAP / 2;
+
+export const SCROLL_DISTANCE = SMART_PANEL_WIDTH / 2 + SMART_PANEL_GAP;

src/pages/landing-page/subpages/smartpanel/utils.ts

@@ -1,11 +1,17 @@
-import { ItemType } from "./constants";
+// All the utils are based on const SMART_PANEL_ROWS = 2
+import {
+  SMART_PANEL_CARD_SIZE,
+  SMART_PANEL_GAP,
+  ItemData,
+  ItemType,
+} from "./constants";
 
 export const getItemRows = (type: ItemType): number => {
   switch (type) {
-    case ItemType.small:
-    case ItemType.medium:
+    case ItemType.Small:
+    case ItemType.Medium:
       return 1;
-    case ItemType.large:
+    case ItemType.Large:
       return 2;
     default:
       return 1;
@@ -14,12 +20,53 @@ export const getItemRows = (type: ItemType): number => {
 
 export const getItemCols = (type: ItemType): number => {
   switch (type) {
-    case ItemType.small:
+    case ItemType.Small:
       return 1;
-    case ItemType.medium:
-    case ItemType.large:
+    case ItemType.Medium:
+    case ItemType.Large:
       return 2;
     default:
       return 1;
   }
 };
+
+export const calculateTotalCols = (items: ItemData[]): number => {
+  // Count the number of each card type
+  const cardCounts = items.reduce(
+    (counts, item) => {
+      counts[item.type]++;
+      return counts;
+    },
+    { [ItemType.Large]: 0, [ItemType.Medium]: 0, [ItemType.Small]: 0 }
+  );
+
+  let totalCols = 0;
+
+  // Calculate cols for large cards
+  totalCols += cardCounts[ItemType.Large] * 2;
+
+  // Calculate cols for medium cards
+  totalCols += Math.floor(cardCounts[ItemType.Medium] / 2) * 2;
+
+  // Handle remaining medium card and small cards
+  let remainingSmallCards = cardCounts[ItemType.Small];
+  if (cardCounts[ItemType.Medium] % 2 > 0 && remainingSmallCards >= 2) {
+    totalCols += 2;
+    remainingSmallCards -= 2;
+  } else if (cardCounts[ItemType.Medium] % 2 > 0) {
+    totalCols += 2;
+  }
+
+  // Handle remaining small cards
+  if (remainingSmallCards > 0) {
+    totalCols += Math.ceil(remainingSmallCards / 2);
+  }
+
+  return totalCols;
+};
+
+export const calculateImageListWidth = (items: ItemData[]): number => {
+  const totalCols = calculateTotalCols(items);
+  // Calculate width based on total columns, card size, and gaps
+  return totalCols * SMART_PANEL_CARD_SIZE + (totalCols - 1) * SMART_PANEL_GAP;
+};