Make all corners less rounded on mobile (#11068)

* make corners less rounded on mobile

* fix live dashboard classes

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);
 

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}

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 ? (

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>

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) => (

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

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>
   );

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}

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

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>
       )}

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>
   );

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