reactjs - Adding Button to Grid widens my Paper in Material Design - how to stop?

Question

I am puzzled! I had a nice looking layout where everything was aligned nicely. I added another button to a grid item and it pushed everything out of whack! There was plenty of space but it still made the whole main section wider.

I've included my code below but have clearly labelled the offending button code section that makes it wider, using ******* so you can see where the problematic addition is.

Any idea why just adding that button made the whole main area wider?

    return (
      <>
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <BrowserRouter>
            <Header />
            
          </BrowserRouter>
        </ThemeProvider>

        <ThemeProvider theme={theme}>
          <Grid container justify="center">
            <Box pt={3}>
              <Paper>
                <Box pl={3} pr={3} pb={3} pt={3}>
                  <Grid container spacing={0}>
                    <Grid item xs={6}>
                      <Typography variant="h6" gutterBottom={false}>
                        Keyword Processor
                      </Typography>
                    </Grid>

                    <Grid item xs={6}>
                      {/* ********* Offending code section ********** */}
                      <Button
                        color={
                          this.state.sorttypeStatus === 'default'
                            ? 'primary'
                            : 'secondary'
                        }
                        onClick={this.handleSortDefault}
                      >
                        DEFAULT
                      </Button>
                      {/* ********* Offending code section ********** */}
                      <Button
                        color={
                          this.state.sorttypeStatus === 'alpha'
                            ? 'primary'
                            : 'secondary'
                        }
                        onClick={this.handleSortAlpha}
                      >
                        A-Z
                      </Button>
                      <Button
                        color={
                          this.state.sorttypeStatus === 'length'
                            ? 'primary'
                            : 'secondary'
                        }
                        onClick={this.handleSortLength}
                      >
                        LENGTH
                      </Button>
                    </Grid>

                    <Grid container spacing={2}>
                      <Grid item xs={6}>
                        <TextField
                          label="Input Keywords"
                          fullWidth
                          multiline
                          rows={10}
                          variant="outlined"
                          margin="normal"
                          onChange={this.handleInputText}
                          defaultValue={defaultInputText}
                        />

                        <Box m={1}>
                          <Button
                            variant="contained"
                            color="primary"
                            onClick={this.inputToOutput}
                          >
                            Parse
                          </Button>

                          <Button variant="outlined" color="secondary">
                            Clear
                          </Button>
                        </Box>

                        <br />
                        <Checkboxes
                          handleDedupe={this.handleDedupe}
                          handleRemoveNumbers={this.handleRemoveNumbers}
                          handleConvertToLowercase={
                            this.handleConvertToLowercase
                          }
                          handleOneWordPerLine={this.handleOneWordPerLine}
                          handleAddCommas={this.handleAddCommas}
                          handleAddCommasSpace={this.handleAddCommasSpace}
                          handleStartWords={this.handleStartWords}
                          handleEndWords={this.handleEndWords}
                        />
                      </Grid>
                      <Grid item xs={6}>
                        <TextField
                          label="Output Keywords"
                          fullWidth
                          multiline
                          rows={30}
                          variant="outlined"
                          margin="normal"
                          value={this.state.outputText}
                        />
                        <Button
                          variant="contained"
                          color="primary"
                          mt={5}
                          onClick={this.clearOutput}
                        >
                          Copy
                        </Button>
                        <Button
                          variant="outlined"
                          color="secondary"
                          mt={5}
                          onClick={this.clearOutput}
                        >
                          Clear
                        </Button>
                      </Grid>
                    </Grid>
                  </Grid>
                </Box>
              </Paper>
            </Box>
          </Grid>
        </ThemeProvider>
      </>
    );
  }
}```

question from:https://stackoverflow.com/questions/65902776/adding-button-to-grid-widens-my-paper-in-material-design-how-to-stop

Answer 1

Waitting for answers