From ae2753b69561e36abc13cfd494408b9246d1016e Mon Sep 17 00:00:00 2001
From: thatmattlove <matt@stunninglyclear.com>
Date: Sat, 17 Feb 2024 16:19:31 -0500
Subject: [PATCH] fix location card layout

---
 hyperglass/ui/components/location-card.tsx  |  3 +-
 hyperglass/ui/components/query-location.tsx | 46 ++++++++++++++++-----
 2 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/hyperglass/ui/components/location-card.tsx b/hyperglass/ui/components/location-card.tsx
index 4970130..6a56447 100644
--- a/hyperglass/ui/components/location-card.tsx
+++ b/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',
diff --git a/hyperglass/ui/components/query-location.tsx b/hyperglass/ui/components/query-location.tsx
index 8d8db04..793bdb6 100644
--- a/hyperglass/ui/components/query-location.tsx
+++ b/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,13 +114,16 @@ export const QueryLocation = (props: QueryLocationProps): JSX.Element => {
 
   if (element === 'cards') {
     return (
-      <Wrap align="flex-start" justify={{ base: 'center', lg: 'space-between' }} shouldWrapChildren>
-        {options.map(group => (
-          <VStack key={group.label} align="center">
-            <chakra.h3 fontSize={{ base: 'sm', md: 'md' }} alignSelf="flex-start" opacity={0.5}>
-              {group.label}
-            </chakra.h3>
-            {group.options.map(opt => {
+      <>
+        {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}
@@ -131,9 +134,30 @@ export const QueryLocation = (props: QueryLocationProps): JSX.Element => {
                 />
               );
             })}
-          </VStack>
-        ))}
-      </Wrap>
+          </Wrap>
+        ) : (
+          <>
+            {options.map(group => (
+              <Stack key={group.label} align="center">
+                <chakra.h3 fontSize={{ base: 'sm', md: 'md' }} alignSelf="flex-start" opacity={0.5}>
+                  {group.label}
+                </chakra.h3>
+                {group.options.map(opt => {
+                  return (
+                    <LocationCard
+                      key={opt.label}
+                      option={opt}
+                      onChange={handleCardChange}
+                      hasError={noOverlap}
+                      defaultChecked={form.queryLocation.includes(opt.value)}
+                    />
+                  );
+                })}
+              </Stack>
+            ))}
+          </>
+        )}
+      </>
     );
   } else if (element === 'select') {
     return (