From d6e93d039d94d7db7a46d4db0a2b8d05e4c2845a Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 22 Apr 2024 10:12:45 -0500
Subject: [PATCH] Make all corners less rounded on mobile (#11068)

* make corners less rounded on mobile

* fix live dashboard classes
---
 web/src/components/camera/CameraImage.tsx      |  2 +-
 .../components/camera/ResizingCameraImage.tsx  |  2 +-
 web/src/components/card/AnimatedEventCard.tsx  |  2 +-
 web/src/components/card/ExportCard.tsx         | 12 ++++++------
 web/src/components/menu/GeneralSettings.tsx    |  8 ++++++--
 web/src/components/overlay/ExportDialog.tsx    |  4 +++-
 .../components/player/BirdseyeLivePlayer.tsx   | 16 +++++++++++-----
 web/src/components/player/HlsVideoPlayer.tsx   |  2 +-
 web/src/components/player/LivePlayer.tsx       | 12 ++++++------
 web/src/components/player/PreviewPlayer.tsx    |  8 ++++----
 web/src/components/settings/MotionTuner.tsx    |  2 +-
 web/src/components/timeline/EventSegment.tsx   |  2 +-
 web/src/pages/Exports.tsx                      |  2 +-
 web/src/pages/SubmitPlus.tsx                   |  4 ++--
 web/src/views/events/EventView.tsx             |  6 +++---
 web/src/views/live/LiveDashboardView.tsx       |  4 ++--
 web/src/views/system/CameraMetrics.tsx         |  8 ++++----
 web/src/views/system/GeneralMetrics.tsx        | 18 +++++++++---------
 web/src/views/system/StorageMetrics.tsx        |  8 ++++----
 19 files changed, 67 insertions(+), 55 deletions(-)

diff --git a/web/src/components/camera/CameraImage.tsx b/web/src/components/camera/CameraImage.tsx
index 1f2c28ade..ab0bfdf08 100644
--- a/web/src/components/camera/CameraImage.tsx
+++ b/web/src/components/camera/CameraImage.tsx
@@ -40,7 +40,7 @@ export default function CameraImage({
       {enabled ? (
         <img
           ref={imgRef}
-          className="object-contain rounded-2xl"
+          className="object-contain rounded-lg md:rounded-2xl"
           onLoad={() => {
             setHasLoaded(true);
 
diff --git a/web/src/components/camera/ResizingCameraImage.tsx b/web/src/components/camera/ResizingCameraImage.tsx
index b7a9b8369..f19c40ff3 100644
--- a/web/src/components/camera/ResizingCameraImage.tsx
+++ b/web/src/components/camera/ResizingCameraImage.tsx
@@ -100,7 +100,7 @@ export default function CameraImage({
     >
       {enabled ? (
         <canvas
-          className="rounded-2xl"
+          className="rounded-lg md:rounded-2xl"
           data-testid="cameraimage-canvas"
           height={scaledHeight}
           ref={canvasRef}
diff --git a/web/src/components/card/AnimatedEventCard.tsx b/web/src/components/card/AnimatedEventCard.tsx
index 5b77496a2..4e27ad54f 100644
--- a/web/src/components/card/AnimatedEventCard.tsx
+++ b/web/src/components/card/AnimatedEventCard.tsx
@@ -63,7 +63,7 @@ export function AnimatedEventCard({ event }: AnimatedEventCardProps) {
           }}
         >
           <div
-            className="size-full rounded cursor-pointer overflow-hidden"
+            className="size-full rounded md:rounded-lg cursor-pointer overflow-hidden"
             onClick={onOpenReview}
           >
             {previews ? (
diff --git a/web/src/components/card/ExportCard.tsx b/web/src/components/card/ExportCard.tsx
index 86ec9c7ce..f7dd7f588 100644
--- a/web/src/components/card/ExportCard.tsx
+++ b/web/src/components/card/ExportCard.tsx
@@ -104,7 +104,7 @@ export default function ExportCard({
       </Dialog>
 
       <div
-        className={`relative aspect-video bg-black rounded-2xl flex justify-center items-center ${className}`}
+        className={`relative aspect-video bg-black rounded-lg md:rounded-2xl flex justify-center items-center ${className}`}
         onMouseEnter={
           isDesktop && !exportedRecording.in_progress
             ? () => setHovered(true)
@@ -123,7 +123,7 @@ export default function ExportCard({
       >
         {hovered && (
           <>
-            <div className="absolute inset-0 z-10 bg-black bg-opacity-60 rounded-2xl" />
+            <div className="absolute inset-0 z-10 bg-black bg-opacity-60 rounded-lg md:rounded-2xl" />
             <div className="absolute top-1 right-1 flex items-center gap-2">
               <a
                 className="z-20"
@@ -172,19 +172,19 @@ export default function ExportCard({
           <>
             {exportedRecording.thumb_path.length > 0 ? (
               <img
-                className="size-full absolute inset-0 object-contain aspect-video rounded-2xl"
+                className="size-full absolute inset-0 object-contain aspect-video rounded-lg md:rounded-2xl"
                 src={exportedRecording.thumb_path.replace("/media/frigate", "")}
                 onLoad={() => setLoading(false)}
               />
             ) : (
-              <div className="absolute inset-0 bg-secondary rounded-2xl" />
+              <div className="absolute inset-0 bg-secondary rounded-lg md:rounded-2xl" />
             )}
           </>
         )}
         {loading && (
-          <Skeleton className="absolute inset-0 aspect-video rounded-2xl" />
+          <Skeleton className="absolute inset-0 aspect-video rounded-lg md:rounded-2xl" />
         )}
-        <div className="absolute bottom-0 inset-x-0 rounded-b-l z-10 h-[20%] bg-gradient-to-t from-black/60 to-transparent pointer-events-none rounded-2xl">
+        <div className="absolute bottom-0 inset-x-0 rounded-b-l z-10 h-[20%] bg-gradient-to-t from-black/60 to-transparent pointer-events-none rounded-lg md:rounded-2xl">
           <div className="flex h-full justify-between items-end mx-3 pb-1 text-white text-sm capitalize">
             {exportedRecording.name.replaceAll("_", " ")}
           </div>
diff --git a/web/src/components/menu/GeneralSettings.tsx b/web/src/components/menu/GeneralSettings.tsx
index bc45f650f..aed5f2173 100644
--- a/web/src/components/menu/GeneralSettings.tsx
+++ b/web/src/components/menu/GeneralSettings.tsx
@@ -210,7 +210,9 @@ export default function GeneralSettings({ className }: GeneralSettings) {
                   </SubItemTrigger>
                   <Portal>
                     <SubItemContent
-                      className={isDesktop ? "" : "w-[92%] rounded-2xl"}
+                      className={
+                        isDesktop ? "" : "w-[92%] rounded-lg md:rounded-2xl"
+                      }
                     >
                       <span tabIndex={0} className="sr-only" />
                       <MenuItem
@@ -280,7 +282,9 @@ export default function GeneralSettings({ className }: GeneralSettings) {
                   </SubItemTrigger>
                   <Portal>
                     <SubItemContent
-                      className={isDesktop ? "" : "w-[92%] rounded-2xl"}
+                      className={
+                        isDesktop ? "" : "w-[92%] rounded-lg md:rounded-2xl"
+                      }
                     >
                       <span tabIndex={0} className="sr-only" />
                       {colorSchemes.map((scheme) => (
diff --git a/web/src/components/overlay/ExportDialog.tsx b/web/src/components/overlay/ExportDialog.tsx
index a608528bb..60de90468 100644
--- a/web/src/components/overlay/ExportDialog.tsx
+++ b/web/src/components/overlay/ExportDialog.tsx
@@ -130,7 +130,9 @@ export default function ExportDialog({
         </Trigger>
         <Content
           className={
-            isDesktop ? "sm:rounded-2xl" : "px-4 pb-4 mx-4 rounded-2xl"
+            isDesktop
+              ? "sm:rounded-lg md:rounded-2xl"
+              : "px-4 pb-4 mx-4 rounded-lg md:rounded-2xl"
           }
         >
           <ExportContent
diff --git a/web/src/components/player/BirdseyeLivePlayer.tsx b/web/src/components/player/BirdseyeLivePlayer.tsx
index 10d578115..a14756039 100644
--- a/web/src/components/player/BirdseyeLivePlayer.tsx
+++ b/web/src/components/player/BirdseyeLivePlayer.tsx
@@ -21,12 +21,18 @@ export default function BirdseyeLivePlayer({
   let player;
   if (liveMode == "webrtc") {
     player = (
-      <WebRtcPlayer className={`rounded-2xl size-full`} camera="birdseye" />
+      <WebRtcPlayer
+        className={`rounded-lg md:rounded-2xl size-full`}
+        camera="birdseye"
+      />
     );
   } else if (liveMode == "mse") {
     if ("MediaSource" in window || "ManagedMediaSource" in window) {
       player = (
-        <MSEPlayer className={`rounded-2xl size-full`} camera="birdseye" />
+        <MSEPlayer
+          className={`rounded-lg md:rounded-2xl size-full`}
+          camera="birdseye"
+        />
       );
     } else {
       player = (
@@ -39,7 +45,7 @@ export default function BirdseyeLivePlayer({
   } else if (liveMode == "jsmpeg") {
     player = (
       <JSMpegPlayer
-        className="size-full flex justify-center rounded-2xl overflow-hidden"
+        className="size-full flex justify-center rounded-lg md:rounded-2xl overflow-hidden"
         camera="birdseye"
         width={birdseyeConfig.width}
         height={birdseyeConfig.height}
@@ -54,8 +60,8 @@ export default function BirdseyeLivePlayer({
       className={`relative flex justify-center w-full cursor-pointer ${className ?? ""}`}
       onClick={onClick}
     >
-      <div className="absolute top-0 inset-x-0 rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>
-      <div className="absolute bottom-0 inset-x-0 rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
+      <div className="absolute top-0 inset-x-0 rounded-lg md:rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>
+      <div className="absolute bottom-0 inset-x-0 rounded-lg md:rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
       <div className="size-full">{player}</div>
     </div>
   );
diff --git a/web/src/components/player/HlsVideoPlayer.tsx b/web/src/components/player/HlsVideoPlayer.tsx
index 5f0348d88..54bc8c8c9 100644
--- a/web/src/components/player/HlsVideoPlayer.tsx
+++ b/web/src/components/player/HlsVideoPlayer.tsx
@@ -164,7 +164,7 @@ export default function HlsVideoPlayer({
       >
         <video
           ref={videoRef}
-          className={`size-full bg-black rounded-2xl ${loadedMetadata ? "" : "invisible"}`}
+          className={`size-full bg-black rounded-lg md:rounded-2xl ${loadedMetadata ? "" : "invisible"}`}
           preload="auto"
           autoPlay
           controls={false}
diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index 26c8c6477..a93eb0e18 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -95,7 +95,7 @@ export default function LivePlayer({
   if (liveMode == "webrtc") {
     player = (
       <WebRtcPlayer
-        className={`rounded-2xl size-full ${liveReady ? "" : "hidden"}`}
+        className={`rounded-lg md:rounded-2xl size-full ${liveReady ? "" : "hidden"}`}
         camera={cameraConfig.live.stream_name}
         playbackEnabled={cameraActive}
         audioEnabled={playAudio}
@@ -109,7 +109,7 @@ export default function LivePlayer({
     if ("MediaSource" in window || "ManagedMediaSource" in window) {
       player = (
         <MSEPlayer
-          className={`rounded-2xl size-full ${liveReady ? "" : "hidden"}`}
+          className={`rounded-lg md:rounded-2xl size-full ${liveReady ? "" : "hidden"}`}
           camera={cameraConfig.name}
           playbackEnabled={cameraActive}
           audioEnabled={playAudio}
@@ -128,7 +128,7 @@ export default function LivePlayer({
   } else if (liveMode == "jsmpeg") {
     player = (
       <JSMpegPlayer
-        className="size-full flex justify-center rounded-2xl overflow-hidden"
+        className="size-full flex justify-center rounded-lg md:rounded-2xl overflow-hidden"
         camera={cameraConfig.name}
         width={cameraConfig.detect.width}
         height={cameraConfig.detect.height}
@@ -144,13 +144,13 @@ export default function LivePlayer({
       data-camera={cameraConfig.name}
       className={`relative flex justify-center ${liveMode == "jsmpeg" ? "size-full" : "w-full"} outline cursor-pointer ${
         activeTracking
-          ? "outline-severity_alert outline-3 rounded-2xl shadow-severity_alert"
+          ? "outline-severity_alert outline-3 rounded-lg md:rounded-2xl shadow-severity_alert"
           : "outline-0 outline-background"
       } transition-all duration-500 ${className}`}
       onClick={onClick}
     >
-      <div className="absolute top-0 inset-x-0 rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>
-      <div className="absolute bottom-0 inset-x-0 rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
+      <div className="absolute top-0 inset-x-0 rounded-lg md:rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>
+      <div className="absolute bottom-0 inset-x-0 rounded-lg md:rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
       {player}
 
       <div
diff --git a/web/src/components/player/PreviewPlayer.tsx b/web/src/components/player/PreviewPlayer.tsx
index 18237c829..8554c0669 100644
--- a/web/src/components/player/PreviewPlayer.tsx
+++ b/web/src/components/player/PreviewPlayer.tsx
@@ -238,7 +238,7 @@ function PreviewVideoPlayer({
 
   return (
     <div
-      className={`relative rounded-2xl w-full flex justify-center bg-black overflow-hidden ${onClick ? "cursor-pointer" : ""} ${className ?? ""}`}
+      className={`relative rounded-lg md:rounded-2xl w-full flex justify-center bg-black overflow-hidden ${onClick ? "cursor-pointer" : ""} ${className ?? ""}`}
       onClick={onClick}
     >
       <img
@@ -283,7 +283,7 @@ function PreviewVideoPlayer({
         )}
       </video>
       {cameraPreviews && !currentPreview && (
-        <div className="absolute inset-0 text-white rounded-2xl flex justify-center items-center">
+        <div className="absolute inset-0 text-white rounded-lg md:rounded-2xl flex justify-center items-center">
           No Preview Found
         </div>
       )}
@@ -481,11 +481,11 @@ function PreviewFramesPlayer({
     >
       <img
         ref={imgRef}
-        className={`size-full object-contain rounded-2xl bg-black`}
+        className={`size-full object-contain rounded-lg md:rounded-2xl bg-black`}
         onLoad={onImageLoaded}
       />
       {previewFrames?.length === 0 && (
-        <div className="absolute inset-x-0 top-1/2 -y-translate-1/2 bg-black text-white rounded-2xl align-center text-center">
+        <div className="absolute inset-x-0 top-1/2 -y-translate-1/2 bg-black text-white rounded-lg md:rounded-2xl align-center text-center">
           No Preview Found
         </div>
       )}
diff --git a/web/src/components/settings/MotionTuner.tsx b/web/src/components/settings/MotionTuner.tsx
index 7bcd73428..02350b070 100644
--- a/web/src/components/settings/MotionTuner.tsx
+++ b/web/src/components/settings/MotionTuner.tsx
@@ -308,7 +308,7 @@ export default function MotionTuner({
           </div>
         </div>
       ) : (
-        <Skeleton className="size-full rounded-2xl" />
+        <Skeleton className="size-full rounded-lg md:rounded-2xl" />
       )}
     </div>
   );
diff --git a/web/src/components/timeline/EventSegment.tsx b/web/src/components/timeline/EventSegment.tsx
index 7f8d0f72c..4957e474b 100644
--- a/web/src/components/timeline/EventSegment.tsx
+++ b/web/src/components/timeline/EventSegment.tsx
@@ -247,7 +247,7 @@ export function EventSegment({
               </HoverCardTrigger>
               <HoverCardPortal>
                 <HoverCardContent
-                  className="rounded-2xl w-[250px] p-2"
+                  className="rounded-lg md:rounded-2xl w-[250px] p-2"
                   side="left"
                 >
                   <img
diff --git a/web/src/pages/Exports.tsx b/web/src/pages/Exports.tsx
index f0cf5748d..6a3906388 100644
--- a/web/src/pages/Exports.tsx
+++ b/web/src/pages/Exports.tsx
@@ -113,7 +113,7 @@ function Exports() {
         <DialogContent className="max-w-7xl">
           <DialogTitle>{selected?.name}</DialogTitle>
           <video
-            className="size-full rounded-2xl"
+            className="size-full rounded-lg md:rounded-2xl"
             playsInline
             preload="auto"
             autoPlay
diff --git a/web/src/pages/SubmitPlus.tsx b/web/src/pages/SubmitPlus.tsx
index 098f0d5ff..8cfd74c90 100644
--- a/web/src/pages/SubmitPlus.tsx
+++ b/web/src/pages/SubmitPlus.tsx
@@ -182,11 +182,11 @@ export default function SubmitPlus() {
             return (
               <div
                 key={event.id}
-                className="w-full rounded-2xl aspect-video flex justify-center items-center bg-black cursor-pointer"
+                className="w-full rounded-lg md:rounded-2xl aspect-video flex justify-center items-center bg-black cursor-pointer"
                 onClick={() => setUpload(event)}
               >
                 <img
-                  className="aspect-video h-full object-contain rounded-2xl"
+                  className="aspect-video h-full object-contain rounded-lg md:rounded-2xl"
                   src={`${baseUrl}api/events/${event.id}/snapshot.jpg`}
                   loading="lazy"
                 />
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index 015507982..be6e2d8fe 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -249,7 +249,7 @@ export default function EventView({
             </div>
           </ToggleGroupItem>
           <ToggleGroupItem
-            className={`px-3 py-4 rounded-2xl ${
+            className={`px-3 py-4 rounded-lg ${
               severityToggle == "significant_motion"
                 ? ""
                 : "text-muted-foreground"
@@ -891,7 +891,7 @@ function MotionReview({
                 {motionData ? (
                   <>
                     <PreviewPlayer
-                      className={`rounded-2xl ${spans} ${grow}`}
+                      className={`rounded-lg md:rounded-2xl ${spans} ${grow}`}
                       camera={camera.name}
                       timeRange={currentTimeRange}
                       startTime={previewStart}
@@ -917,7 +917,7 @@ function MotionReview({
                   </>
                 ) : (
                   <Skeleton
-                    className={`rounded-2xl size-full ${spans} ${grow}`}
+                    className={`rounded-lg md:rounded-2xl size-full ${spans} ${grow}`}
                   />
                 )}
               </div>
diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx
index c8ddd1822..7cd6bbcd6 100644
--- a/web/src/views/live/LiveDashboardView.tsx
+++ b/web/src/views/live/LiveDashboardView.tsx
@@ -175,7 +175,7 @@ export default function LiveDashboardView({
       )}
 
       <div
-        className={`mt-2 px-2 grid ${layout == "grid" ? "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4" : ""} gap-2 md:gap-4 *:rounded-2xl *:bg-black`}
+        className={`mt-2 px-2 grid ${layout == "grid" ? "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4" : ""} gap-2 md:gap-4`}
       >
         {includeBirdseye && birdseyeConfig?.enabled && (
           <BirdseyeLivePlayer
@@ -198,7 +198,7 @@ export default function LiveDashboardView({
             <LivePlayer
               cameraRef={cameraRef}
               key={camera.name}
-              className={grow}
+              className={`${grow} rounded-lg md:rounded-2xl bg-black`}
               windowVisible={
                 windowVisible && visibleCameras.includes(camera.name)
               }
diff --git a/web/src/views/system/CameraMetrics.tsx b/web/src/views/system/CameraMetrics.tsx
index 54b6debd5..2b005df8f 100644
--- a/web/src/views/system/CameraMetrics.tsx
+++ b/web/src/views/system/CameraMetrics.tsx
@@ -189,7 +189,7 @@ export default function CameraMetrics({
       <div className="text-muted-foreground text-sm font-medium">Overview</div>
       <div className="grid grid-cols-1 md:grid-cols-3">
         {statsHistory.length != 0 ? (
-          <div className="p-2.5 bg-background_alt rounded-2xl">
+          <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
             <div className="mb-5">DPS</div>
             <CameraLineGraph
               graphId="overall-stats"
@@ -200,7 +200,7 @@ export default function CameraMetrics({
             />
           </div>
         ) : (
-          <Skeleton className="w-full h-32" />
+          <Skeleton className="w-full rounded-lg md:rounded-2xl h-32" />
         )}
       </div>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -214,7 +214,7 @@ export default function CameraMetrics({
                   </div>
                   <div key={camera.name} className="grid sm:grid-cols-2 gap-2">
                     {Object.keys(cameraCpuSeries).includes(camera.name) ? (
-                      <div className="p-2.5 bg-background_alt rounded-2xl">
+                      <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
                         <div className="mb-5">CPU</div>
                         <CameraLineGraph
                           graphId={`${camera.name}-cpu`}
@@ -230,7 +230,7 @@ export default function CameraMetrics({
                       <Skeleton className="size-full aspect-video" />
                     )}
                     {Object.keys(cameraFpsSeries).includes(camera.name) ? (
-                      <div className="p-2.5 bg-background_alt rounded-2xl">
+                      <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
                         <div className="mb-5">DPS</div>
                         <CameraLineGraph
                           graphId={`${camera.name}-dps`}
diff --git a/web/src/views/system/GeneralMetrics.tsx b/web/src/views/system/GeneralMetrics.tsx
index 7d2d5fc5a..c62924732 100644
--- a/web/src/views/system/GeneralMetrics.tsx
+++ b/web/src/views/system/GeneralMetrics.tsx
@@ -334,7 +334,7 @@ export default function GeneralMetrics({
           className={`w-full mt-4 grid grid-cols-1 gap-2 ${detTempSeries == undefined ? "sm:grid-cols-3" : "sm:grid-cols-4"}`}
         >
           {statsHistory.length != 0 ? (
-            <div className="p-2.5 bg-background_alt rounded-2xl">
+            <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
               <div className="mb-5">Detector Inference Speed</div>
               {detInferenceTimeSeries.map((series) => (
                 <ThresholdBarGraph
@@ -349,12 +349,12 @@ export default function GeneralMetrics({
               ))}
             </div>
           ) : (
-            <Skeleton className="w-full aspect-video" />
+            <Skeleton className="w-full rounded-lg md:rounded-2xl aspect-video" />
           )}
           {statsHistory.length != 0 ? (
             <>
               {detTempSeries && (
-                <div className="p-2.5 bg-background_alt rounded-2xl">
+                <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
                   <div className="mb-5">Detector Temperature</div>
                   {detTempSeries.map((series) => (
                     <ThresholdBarGraph
@@ -374,7 +374,7 @@ export default function GeneralMetrics({
             <Skeleton className="w-full aspect-video" />
           )}
           {statsHistory.length != 0 ? (
-            <div className="p-2.5 bg-background_alt rounded-2xl">
+            <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
               <div className="mb-5">Detector CPU Usage</div>
               {detCpuSeries.map((series) => (
                 <ThresholdBarGraph
@@ -392,7 +392,7 @@ export default function GeneralMetrics({
             <Skeleton className="w-full aspect-video" />
           )}
           {statsHistory.length != 0 ? (
-            <div className="p-2.5 bg-background_alt rounded-2xl">
+            <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
               <div className="mb-5">Detector Memory Usage</div>
               {detMemSeries.map((series) => (
                 <ThresholdBarGraph
@@ -429,7 +429,7 @@ export default function GeneralMetrics({
             </div>
             <div className=" mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
               {statsHistory.length != 0 ? (
-                <div className="p-2.5 bg-background_alt rounded-2xl">
+                <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
                   <div className="mb-5">GPU Usage</div>
                   {gpuSeries.map((series) => (
                     <ThresholdBarGraph
@@ -449,7 +449,7 @@ export default function GeneralMetrics({
               {statsHistory.length != 0 ? (
                 <>
                   {gpuMemSeries && (
-                    <div className="p-2.5 bg-background_alt rounded-2xl">
+                    <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
                       <div className="mb-5">GPU Memory</div>
                       {gpuMemSeries.map((series) => (
                         <ThresholdBarGraph
@@ -477,7 +477,7 @@ export default function GeneralMetrics({
         </div>
         <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-2">
           {statsHistory.length != 0 ? (
-            <div className="p-2.5 bg-background_alt rounded-2xl">
+            <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
               <div className="mb-5">Process CPU Usage</div>
               {otherProcessCpuSeries.map((series) => (
                 <ThresholdBarGraph
@@ -495,7 +495,7 @@ export default function GeneralMetrics({
             <Skeleton className="w-full aspect-tall" />
           )}
           {statsHistory.length != 0 ? (
-            <div className="p-2.5 bg-background_alt rounded-2xl">
+            <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl">
               <div className="mb-5">Process Memory Usage</div>
               {otherProcessMemSeries.map((series) => (
                 <ThresholdBarGraph
diff --git a/web/src/views/system/StorageMetrics.tsx b/web/src/views/system/StorageMetrics.tsx
index f1a8f8eb4..bb32d4ff0 100644
--- a/web/src/views/system/StorageMetrics.tsx
+++ b/web/src/views/system/StorageMetrics.tsx
@@ -45,7 +45,7 @@ export default function StorageMetrics({
     <div className="size-full mt-4 flex flex-col overflow-y-auto">
       <div className="text-muted-foreground text-sm font-medium">Overview</div>
       <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
-        <div className="p-2.5 bg-background_alt rounded-2xl flex-col">
+        <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl flex-col">
           <div className="mb-5">Recordings</div>
           <StorageGraph
             graphId="general-recordings"
@@ -53,7 +53,7 @@ export default function StorageMetrics({
             total={totalStorage.total}
           />
         </div>
-        <div className="p-2.5 bg-background_alt rounded-2xl flex-col">
+        <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl flex-col">
           <div className="mb-5">/tmp/cache</div>
           <StorageGraph
             graphId="general-cache"
@@ -61,7 +61,7 @@ export default function StorageMetrics({
             total={stats.service.storage["/tmp/cache"]["total"]}
           />
         </div>
-        <div className="p-2.5 bg-background_alt rounded-2xl flex-col">
+        <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl flex-col">
           <div className="mb-5">/dev/shm</div>
           <StorageGraph
             graphId="general-shared-memory"
@@ -75,7 +75,7 @@ export default function StorageMetrics({
       </div>
       <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-2">
         {Object.keys(cameraStorage).map((camera) => (
-          <div className="p-2.5 bg-background_alt rounded-2xl flex-col">
+          <div className="p-2.5 bg-background_alt rounded-lg md:rounded-2xl flex-col">
             <div className="mb-5 capitalize">{camera.replaceAll("_", " ")}</div>
             <StorageGraph
               graphId={`${camera}-storage`}