fix: Mobile-responsive square insight card

At smaller screen widths, the square insight card wraps into a single column, but doesn't fill the available space. This change effectively converts flex-wrapped squares into a column of squares that fill the available width. Uses CSS aspect-ratio to ensure squares.
ExpediaGroup · Feb 11, 2022 · 08d3c46 · 08d3c46
1 parent a1bd7fc
commit 08d3c46
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 6 deletions.
diff --git a/...components/insight-connection-card/components/square-insight-card/square-insight-card.tsx b/...components/insight-connection-card/components/square-insight-card/square-insight-card.tsx
@@ -43,15 +43,15 @@ export const SquareInsightCard = ({ insightEdge, options, ...props }: InsightCon
   const insight = insightEdge.node;
 
   return (
-    <LinkBox key={insight.id + '-' + insight.fullName}>
+    <LinkBox key={insight.id + '-' + insight.fullName} alignSelf="stretch">
       <VStack
         as={Card}
         bg={bgColor}
         p="1rem"
-        height={{ base: '16rem', md: '17rem', lg: '18rem', '2xl': '20rem' }}
-        width={{ base: '16rem', md: '17rem', lg: '18rem', '2xl': '20rem' }}
+        width={{ base: 'unset', sm: '16rem', md: '17rem', lg: '18rem', '2xl': '20rem' }}
         align="stretch"
         overflow="hidden"
+        sx={{ aspectRatio: '1' }}
         _hover={{ boxShadow: 'lg' }}
         {...props}
       >

diff --git a/...nd/src/components/insight-list/components/insight-list-skeleton/insight-list-skeleton.tsx b/...nd/src/components/insight-list/components/insight-list-skeleton/insight-list-skeleton.tsx
@@ -14,9 +14,32 @@
  * limitations under the License.
  */
 
-import { Skeleton } from '@chakra-ui/react';
+import { Skeleton, Wrap } from '@chakra-ui/react';
 
 export const InsightListSkeleton = ({ count = 3, options }) => {
+  // Special handling for Square
+  if (options.layout === 'square') {
+    return (
+      <Wrap
+        spacing="1rem"
+        direction={{ base: 'column', sm: 'row' }}
+        sx={{
+          '> ul': {
+            flexWrap: { base: 'nowrap', sm: 'wrap' }
+          }
+        }}
+      >
+        {new Array(count * 2).fill(1).map((value, index) => (
+          <Skeleton
+            key={`search-results-skeleton-${index}`}
+            sx={{ aspectRatio: '1' }}
+            width={{ base: 'unset', sm: '16rem', md: '17rem', lg: '18rem', '2xl': '20rem' }}
+          />
+        ))}
+      </Wrap>
+    );
+  }
+
   let layoutProps = {};
   switch (options.layout) {
     case 'square':

diff --git a/packages/frontend/src/components/insight-list/insight-list.tsx b/packages/frontend/src/components/insight-list/insight-list.tsx
@@ -28,9 +28,19 @@ const EdgeContainer = ({ edges, options }) => {
   switch (options.layout) {
     case 'square':
       return (
-        <Wrap spacing="1rem" pb="1rem">
+        <Wrap
+          spacing="1rem"
+          pb="1rem"
+          direction={{ base: 'column', sm: 'row' }}
+          sx={{
+            '> ul': {
+              // Disable wrap at small screen sizes
+              flexWrap: { base: 'nowrap', sm: 'wrap' }
+            }
+          }}
+        >
           {edges.map((edge) => (
-            <WrapItem key={edge.node.id}>
+            <WrapItem key={edge.node.id} flexDirection={{ base: 'column', sm: 'row' }}>
               <InsightConnectionCard insightEdge={edge} options={options} />
             </WrapItem>
           ))}