From 34c7b09ea9667fc65129bdb3d8eb6d7824395edd Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Wed, 20 Jul 2022 19:15:15 -0400
Subject: [PATCH] fix(striker-ui): make empty drop area content responsive

---
 striker-ui/components/NetworkInitForm.tsx | 25 ++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/striker-ui/components/NetworkInitForm.tsx b/striker-ui/components/NetworkInitForm.tsx
index d000ed2c..467cbaa7 100644
--- a/striker-ui/components/NetworkInitForm.tsx
+++ b/striker-ui/components/NetworkInitForm.tsx
@@ -216,7 +216,8 @@ const createNetworkInterfaceTableColumns = (
 
 const NetworkInitForm: FC = () => {
   const theme = useTheme();
-  const bplg = useMediaQuery(theme.breakpoints.up('lg'));
+  const breakpointMedium = useMediaQuery(theme.breakpoints.up('md'));
+  const breakpointLarge = useMediaQuery(theme.breakpoints.up('lg'));
 
   const [dragMousePosition, setDragMousePosition] = useState<{
     x: number;
@@ -446,7 +447,7 @@ const NetworkInitForm: FC = () => {
             '& > *': {
               marginBottom: '1em',
               marginTop: '1em',
-              minWidth: '10em',
+              minWidth: '13em',
               width: '25%',
             },
 
@@ -490,7 +491,7 @@ const NetworkInitForm: FC = () => {
 
                         setNetworkInputs([...networkInputs]);
                       },
-                      renderValue: bplg
+                      renderValue: breakpointLarge
                         ? undefined
                         : (value) =>
                             `${String(
@@ -521,6 +522,17 @@ const NetworkInitForm: FC = () => {
                     const { networkInterfaceUUID = '' } =
                       networkInterface ?? {};
 
+                    const emptyDropAreaContent = breakpointMedium ? (
+                      <BodyText text="Drop to add interface." />
+                    ) : (
+                      <MUIAddIcon
+                        sx={{
+                          alignSelf: 'center',
+                          color: GREY,
+                        }}
+                      />
+                    );
+
                     return (
                       <MUIBox
                         key={`network-${inputUUID}-link-${linkNumber}`}
@@ -538,7 +550,10 @@ const NetworkInitForm: FC = () => {
                           },
                         }}
                       >
-                        <BodyText text={linkName} />
+                        <BodyText
+                          sx={{ whiteSpace: 'nowrap' }}
+                          text={linkName}
+                        />
                         <DropArea
                           onMouseUp={createDropMouseUpHandler?.call(
                             null,
@@ -562,7 +577,7 @@ const NetworkInitForm: FC = () => {
                               }}
                             />
                           ) : (
-                            <BodyText text="Drop to add interface." />
+                            emptyDropAreaContent
                           )}
                         </DropArea>
                       </MUIBox>