make hardware mobile responsive

Author: Roshan-D

client/src/components/home/HomeContainer.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { apiUrl, ErrorScreen, LoadingScreen, Service, useAuth } from "@hex-labs/core";
-import { Flex } from "@chakra-ui/react";
+import { Flex, Stack } from "@chakra-ui/react";
 import { Navigate } from "react-router-dom";
 import useAxios from "axios-hooks";
 
@@ -27,10 +27,10 @@ const HomeContainer: React.FC = props => {
   }
 
   return (
-    <Flex dir="row" gap={6} p="8" justify="space-around">
+    <Stack direction={{ base: "column", sm: "row" }} gap={6} p="8" justify="space-around">
       <NewHardwareList />
       {user && <RequestedList requests={data} />}
-    </Flex>
+    </Stack>
   );
 };
 

client/src/components/home/NewHardwareList.tsx

@@ -54,9 +54,9 @@ const NewHardwareList = () => {
     );
 
   return (
-    <Flex w="45%" flexDir="column">
+    <Flex flexDir="column">
       <Heading mb={4}>Inventory</Heading>
-      <Flex gap="10px" flexDir="column">
+      <Flex gap="10px" flexDir={{ base: "column", sm: "row" }}>
         <Flex flexDir="row" gap={2}>
           {profile.roles.admin && (
             <Link to="/admin/categories/new">

client/src/components/home/RequestedList.tsx

@@ -55,8 +55,12 @@ const RequestCard = ({ r, statuses, requestDeleteMutation }: any) => {
 };
 
 const RequestedList = ({ requests }: RequestedListProps) => {
-  const [{ data: requestData, loading, error}, requestRefetch] = useAxios(apiUrl(Service.HARDWARE, "/hardware-requests"));
-  const [{ data: itemData, loading: itemLoading, error: itemError}, itemRefetch] = useAxios(apiUrl(Service.HARDWARE, "/items"));
+  const [{ data: requestData, loading, error }, requestRefetch] = useAxios(
+    apiUrl(Service.HARDWARE, "/hardware-requests")
+  );
+  const [{ data: itemData, loading: itemLoading, error: itemError }, itemRefetch] = useAxios(
+    apiUrl(Service.HARDWARE, "/items")
+  );
   const [userRequests, setUserRequests] = useState(requests);
   const toast = useToast();
   if (loading) {
@@ -77,11 +81,10 @@ const RequestedList = ({ requests }: RequestedListProps) => {
       });
     } catch (e: any) {
       handleAxiosError(e);
-    }
-    finally {
+    } finally {
       requestRefetch();
       itemRefetch();
-      setUserRequests(requestData!.data as Request[])
+      setUserRequests(requestData!.data as Request[]);
     }
   };
   const statuses = (status: RequestStatus): JSX.Element => {
@@ -163,7 +166,7 @@ const RequestedList = ({ requests }: RequestedListProps) => {
   };
 
   return (
-    <Box w="45%">
+    <Box>
       <Heading mb="4">My Requests</Heading>
       <Flex
         borderRadius="4px"
@@ -200,4 +203,4 @@ const RequestedList = ({ requests }: RequestedListProps) => {
   );
 };
 
-export default RequestedList;
+export default RequestedList;

client/src/components/inventory/HardwareItem.tsx

@@ -151,7 +151,7 @@ const HardwareItem = ({ item, requestsEnabled, preview, outOfStock }: HardwareIt
               handleRequestAdd(newRequest);
             }}
           >
-            {outOfStock ? "Out of stock" : `Request ${requestedNum} items`}
+            {outOfStock ? "Out of stock" : `Request ${requestedNum}`}
           </Button>
         </Flex>
       </Flex>