From d8719ac9088f63df0224572f45279d207550037e Mon Sep 17 00:00:00 2001
From: Skander Mzali <skanderm@gmail.com>
Date: Wed, 17 Apr 2024 11:21:07 -0700
Subject: [PATCH] Update icon size based on breakpoints instead of js media
 queries

---
 .../Player/DetectionCategoryButton.tsx           | 16 +++++++---------
 ui/src/components/Player/DetectionDialog.tsx     |  2 +-
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/ui/src/components/Player/DetectionCategoryButton.tsx b/ui/src/components/Player/DetectionCategoryButton.tsx
index de0e9d90..3f6e70fb 100644
--- a/ui/src/components/Player/DetectionCategoryButton.tsx
+++ b/ui/src/components/Player/DetectionCategoryButton.tsx
@@ -1,4 +1,4 @@
-import { Box, useMediaQuery, useTheme } from "@mui/material";
+import { Box } from "@mui/material";
 import type { StaticImageData } from "next/legacy/image";
 import Image from "next/legacy/image";
 
@@ -9,8 +9,6 @@ export default function DetectionCategoryButton({
   icon: StaticImageData;
   title: string;
 }) {
-  const theme = useTheme();
-  const isDesktop = useMediaQuery(theme.breakpoints.up("sm"));
   return (
     <Box
       sx={{
@@ -19,12 +17,12 @@ export default function DetectionCategoryButton({
         alignItems: "center",
       }}
     >
-      <Image
-        src={icon.src}
-        alt={`${title} icon`}
-        width={isDesktop ? 100 : 20}
-        height={isDesktop ? 100 : 20}
-      />
+      <Box sx={{ display: { xs: "block", sm: "none" } }}>
+        <Image src={icon.src} alt={`${title} icon`} width={20} height={20} />
+      </Box>
+      <Box sx={{ display: { xs: "none", sm: "block" } }}>
+        <Image src={icon.src} alt={`${title} icon`} width={100} height={100} />
+      </Box>
       {title}
     </Box>
   );
diff --git a/ui/src/components/Player/DetectionDialog.tsx b/ui/src/components/Player/DetectionDialog.tsx
index 53e80652..2aef63ab 100644
--- a/ui/src/components/Player/DetectionDialog.tsx
+++ b/ui/src/components/Player/DetectionDialog.tsx
@@ -184,7 +184,7 @@ export default function DetectionDialog({
                   component={Paper}
                   sx={{
                     "&&&": {
-                      marginX: [1, 5],
+                      marginX: [1, 2],
                       marginY: [1, 0],
                       borderRadius: 1,
                       overflow: "visible",