fix location card layout

hyperglass/ui/components/location-card.tsx

@@ -17,9 +17,8 @@ const LocationCardWrapper = motionChakra('div', {
   baseStyle: {
     py: 4,
     px: 6,
-    w: '100%',
     minW: 'xs',
-    maxW: 'sm',
+    maxW: 'md',
     mx: 'auto',
     shadow: 'sm',
     rounded: 'lg',

hyperglass/ui/components/query-location.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { Wrap, VStack, Flex, chakra } from '@chakra-ui/react';
+import { Wrap, Stack, Flex, chakra } from '@chakra-ui/react';
 import { useFormContext } from 'react-hook-form';
 import { Select, LocationCard } from '~/components';
 import { useConfig } from '~/context';
@@ -114,9 +114,31 @@ export const QueryLocation = (props: QueryLocationProps): JSX.Element => {
 
   if (element === 'cards') {
     return (
-      <Wrap align="flex-start" justify={{ base: 'center', lg: 'space-between' }} shouldWrapChildren>
+      <>
+        {options.length === 1 ? (
+          <Wrap
+            p={{ lg: 4 }}
+            align="flex-start"
+            shouldWrapChildren
+            spacing={{ base: 4, lg: 8 }}
+            justify={{ base: 'center', lg: 'flex-start' }}
+          >
+            {options[0].options.map(opt => {
+              return (
+                <LocationCard
+                  key={opt.label}
+                  option={opt}
+                  onChange={handleCardChange}
+                  hasError={noOverlap}
+                  defaultChecked={form.queryLocation.includes(opt.value)}
+                />
+              );
+            })}
+          </Wrap>
+        ) : (
+          <>
             {options.map(group => (
-          <VStack key={group.label} align="center">
+              <Stack key={group.label} align="center">
                 <chakra.h3 fontSize={{ base: 'sm', md: 'md' }} alignSelf="flex-start" opacity={0.5}>
                   {group.label}
                 </chakra.h3>
@@ -131,9 +153,11 @@ export const QueryLocation = (props: QueryLocationProps): JSX.Element => {
                     />
                   );
                 })}
-          </VStack>
+              </Stack>
             ))}
-      </Wrap>
+          </>
+        )}
+      </>
     );
   } else if (element === 'select') {
     return (