Responsive Stacks

gistfile1.txt

<div>
            {loading ? (
                <Flex align="center" sx={{ py: 5 }}>
                    <Loading size="large" color="#ccc" />
                </Flex>
            ) : null}
            { (
                <Stack spacing={3}>
                    <Text as="div">
                            <a onClick={() => navigate(-1)}>Return to your breach list</a>
                    </Text>

                    <HighlightBox
                        bg={colors.background}
                        sx={{
                            p: 3,
                            fontSize: 18,
                            lineHeight: 1.4,
                            textAlign: "left",
                            mb: 0,
                        }}
                    >
                            <Stack isInline={true} alignItems="center">
                            <Stack flex={1}>
                                <Text fontWeight="600" as="h2" sx={{ m: 0 }}>
                                    {breach.name}
                                </Text>

                                <Text fontWeight="400" size="xs" as="div">
                                    Breached on {format(parseISO(breach.date), "MMMM d, yyyy")}
                                </Text>
                                </Stack>
                                <Stack isInline={true}>

                                {
                                    !isActionBusy &&
                                    <div>
                                        {isAddedToHistory &&
                                            <a href="#" onClick={(evt) => { evt.preventDefault(); handleRemoveFromMyHistory(); }}>Remove from my history </a>
                                        }
                                        {!isAddedToHistory &&
                                            <a href="#" onClick={(evt) => { evt.preventDefault(); handleAddToMyHistory(); }}>Add to my history </a>
                                        }
                                    </div>
                                    || <Loading size="small" color="#ccc" /> 
                                }
                                    </Stack>
                        </Stack>
                        </HighlightBox>

              <Stack direction={["column", "row"]}>
                   <Stack spacing={2} flex={1} className="mar--lg">
                        <h3>This breach leaked:</h3>
                        <div className="mar--lg">
                            <ul className="mar-x--lg" sx={{ fontSize: 14, mb: 0 }}>
                                {breach.credentials.map((credential) => {
                                    return (
                                        <li key={credential.id} sx={{ mb: 2 }} style={{ listStyle: "disc" }}>
                                            {credential.description}
                                        </li>
                                    );
                                })}
                            </ul>
                        </div>
                    </Stack>
                    <Stack direction={["column", "row"]} spacing={3}>
                        <Box flex={1}>
                            <Card variant="flat">
                                <CardBanner>Here are the risks caused by this breach</CardBanner>
                                <HarmCard breach={breach} />
                            </Card>
                        </Box>

                        <Box flex={1}>
                            <ActionsCard actions={breach.actions} />
                        </Box>
                            </Stack>
                        </Stack>

                </Stack>
                )}
        </div>