Mobile view

webapp/src/components/NameManagerDialog/NameManagerDialog.tsx

@@ -173,7 +173,7 @@ function NameManagerDialog(properties: NameManagerDialogProperties) {
           onClick={() => setEditingNameIndex(-1)}
           variant="contained"
           disableElevation
-          sx={{ textTransform: "none" }}
+          sx={{ textTransform: "none", minWidth: "fit-content" }}
           startIcon={<Plus size={16} />}
           disabled={editingNameIndex > -2}
         >
@@ -184,11 +184,15 @@ function NameManagerDialog(properties: NameManagerDialogProperties) {
   );
 }
 
-const StyledDialog = styled(Dialog)(() => ({
+const StyledDialog = styled(Dialog)(({ theme }) => ({
   "& .MuiPaper-root": {
     height: "400px",
     minHeight: "200px",
     minWidth: "620px",
+    maxWidth: "90%",
+    [theme.breakpoints.down("sm")]: {
+      minWidth: "90%",
+    },
   },
 }));
 

webapp/src/components/NameManagerDialog/NamedRangeActive.tsx

@@ -128,12 +128,16 @@ const StyledBox = styled(Box)`
   width: auto;
   padding: 10px 20px 10px 12px;
   box-shadow: 0 -1px 0 ${theme.palette.grey[300]};
+
+  @media (max-width: 600px) {
+    padding: 12px;
+  }
 `;
 
 const StyledTextField = styled(TextField)(() => ({
   "& .MuiInputBase-root": {
     height: "36px",
-    width: "161.67px",
+    width: "100%",
     margin: 0,
     fontFamily: "Inter",
     fontSize: "12px",