avoid weird layouts

js/app/components/ui/cards.tsx

···
         $gtXxl={{
           minWidth: layoutHorizontal ? "62.5%" : "100%",
         }}
-        maxHeight="76%"
-        aspectRatio={16 / 9}
+        maxHeight="76.5%"
         borderRadius={borderRadius}
         overflow="hidden"
         position="relative"
         alignSelf={layoutHorizontal ? "auto" : "center"}
+        backgroundColor={"green"}
       >
         <Image
           source={{ uri: thumbnailUrl, width: 160, height: 90 }}
           style={{ width: "100%", height: "100%", aspectRatio: 16 / 9 }}
-          resizeMode="cover"
+          resizeMode="stretch"
         />
         {isLive && (
           <XStack

js/app/components/ui/container.tsx

···
   sm: 440,
   md: 660,
   lg: 740,
-  xl: 860,
+  xl: 800,
   twoXl: 1260,
   threeXl: 1660,
 };

js/app/src/screens/home.tsx

···
 function getHomeScreenCols(media: UseMediaState): number {
   if (media.gtXxl) {
     return 4;
-  } else if (media.gtLg) {
+  } else if (media.gtXl) {
     return 3;
   } else if (media.gtMd) {
     return 2;
···
   } = useAppSelector(selectRecentSegments);
   const dispatch = useAppDispatch();
   const [manualRefresh, setManualRefresh] = useState(false);
-  const [useMockData, setUseMockData] = useState(false);
+  const [useMockData, setUseMockData] = useState(true);
 
   const segments = useMockData ? fakeSegs : realSegments;
   const media = useMedia();
···
             f={1}
             justifyContent="center"
             alignItems="center"
-            minHeight="90vh"
+            minHeight="90%"
             paddingVertical={42}
           >
             <Image