Use Grid to model OrderTile

We can create a grid that has two columns:

- The first one is set to `max-content`.
- The second one is set to `auto`.

This will make the first columns as wide as the widest row and the
second column will take up the remainder of the space given by the
parent container.

frontend/src/components/OrderTile.tsx

@@ -1,4 +1,4 @@
-import { Box, HStack, Text, VStack } from "@chakra-ui/react";
+import { Box, Grid, Text, VStack } from "@chakra-ui/react";
 import React from "react";
 import { Order } from "./Types";
 
@@ -19,50 +19,28 @@ function OrderTile(
                 <Box bg="blue.800" w="100%">
                     <Text padding={2} color={"white"} fontWeight={"bold"}>Current CFD Sell Order</Text>
                 </Box>
-                <VStack padding={5} spacing={5} align={"stretch"}>
-                    <HStack>
-                        <Text width={labelWidth}>ID</Text>
-                        <Text
-                            overflow="hidden"
-                            textOverflow="ellipsis"
-                            whiteSpace="nowrap"
-                            _hover={{ overflow: "visible" }}
-                        >
-                            {order.id}
-                        </Text>
-                    </HStack>
-                    <HStack>
-                        <Text width={labelWidth}>Trading Pair</Text>
-                        <Text>{order.trading_pair}</Text>
-                    </HStack>
-                    <HStack>
-                        <Text width={labelWidth}>Price</Text>
-                        <Text>{order.price}</Text>
-                    </HStack>
-                    <HStack>
-                        <Text width={labelWidth}>Min Quantity</Text>
-                        <Text>{order.min_quantity}</Text>
-                    </HStack>
-                    <HStack>
-                        <Text width={labelWidth}>Max Quantity</Text>
-                        <Text>{order.max_quantity}</Text>
-                    </HStack>
-                    <HStack>
-                        <Text width={labelWidth}>Leverage</Text>
-                        <Text>{order.leverage}</Text>
-                    </HStack>
-                    <HStack>
-                        <Text width={labelWidth}>Liquidation Price</Text>
-                        <Text
-                            overflow="hidden"
-                            textOverflow="ellipsis"
-                            whiteSpace="nowrap"
-                            _hover={{ overflow: "visible" }}
-                        >
-                            {order.liquidation_price}
-                        </Text>
-                    </HStack>
-                </VStack>
+                <Grid gridTemplateColumns="max-content auto" padding={5} rowGap={2}>
+                    <Text width={labelWidth}>ID</Text>
+                    <Text whiteSpace="nowrap">{order.id}</Text>
+
+                    <Text width={labelWidth}>Trading Pair</Text>
+                    <Text>{order.trading_pair}</Text>
+
+                    <Text width={labelWidth}>Price</Text>
+                    <Text>{order.price}</Text>
+
+                    <Text width={labelWidth}>Min Quantity</Text>
+                    <Text>{order.min_quantity}</Text>
+
+                    <Text width={labelWidth}>Max Quantity</Text>
+                    <Text>{order.max_quantity}</Text>
+
+                    <Text width={labelWidth}>Leverage</Text>
+                    <Text>{order.leverage}</Text>
+
+                    <Text width={labelWidth}>Liquidation Price</Text>
+                    <Text whiteSpace="nowrap">{order.liquidation_price}</Text>
+                </Grid>
             </VStack>
         </Box>
     );