实现相邻组件相互独立：解决FilterStatusCode组件拉伸干扰邻接组件的页面布局问题

Hey, let's tackle that layout problem where your FilterStatusCode component is pushing around the Filter and LinkedTable when users add too many tags. Here's a practical fix using Material-UI's layout tools and smart styling:

Core Idea #

We need to add hard constraints to the FilterStatusCode's container so it can't infinitely stretch, while making sure its internal content behaves well when it hits those limits. We'll also adjust the Grid layout to ensure both sections (left filter and right content) respect each other's space.

Step-by-Step Implementation #

1. Adjust Grid Structure & Props #

The original Grid setup didn't define clear width rules for the FilterStatusCode section, letting it expand uncontrollably. Let's fix that with responsive width props and overflow controls:

return(
  <Grid sx={ContainerStyle}>
    <StyledBreadcrumbs deviceId={props.deviceId} />
    {/* Remove fixed height, let layout adapt to content */}
    <Grid container spacing={1} sx={{ width: '100%', overflow: 'hidden' }}>
      {/* Assign responsive widths and max constraint to left section */}
      <Grid xs={12} sm={5} lg={3} sx={StyleTableContainer}>
        <CardContent>
          {/* Add overflow to Table to contain inner content */}
          <Table sx={{ overflow: 'auto' }}>
            <TableBody>
              <TableRow>
                <TableCell sx={{ padding: 0, overflow: 'hidden' }}>
                  <FilterStatusCode 
                    isExpanded={isFilterStatusCodeExpanded} 
                    setIsExpanded={setIsFilterStatusCodeExpanded} 
                    setCodes={props.setCodes} 
                  />
                </TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </CardContent>
      </Grid>
      {/* Let right section take remaining space, add min-width to prevent squeezing */}
      <Grid container sx={{ ...StyleFilterAndLinkedTable, flexGrow: 1, overflow: 'auto', minWidth: '300px' }}>
        <Filter pageName='Device list' showBackToButton={false} showFilter={true} />
        {!isNaN(amountOfPages) && !isNaN(amountOfItems) ? (
          <LinkedTable filterData={filterData} applyFilter={applyFilter} />
        ) : ''}
      </Grid>
    </Grid>
  </Grid>
);

2. Update Style Definitions #

Modify the StyleTableContainer to add a maximum width and overflow behavior, so the component can't stretch beyond a reasonable size:

const ContainerStyle = {
  backgroundColor: '#f6f7f9',
  minHeight: 'calc(100vh - 112px)',
}
const StyleTableContainer = {
  padding: '20px 10px 0px 30px',
  minWidth: '300px',
  maxWidth: '400px', // Cap the maximum width to prevent overflow
  overflow: 'auto', // Show scrollbar when content exceeds container size
}
const StyleFilterAndLinkedTable = {
  padding: '0px 0px 0px 30px',
}

3. Optional (But Recommended): Optimize FilterStatusCode Internals #

Since you already have an isExpanded state, use it to control the height of the TagInput container. This gives users control over seeing all tags without breaking the layout:

// Inside your FilterStatusCode component
<div sx={{ 
  maxHeight: isExpanded ? 'none' : '150px', 
  overflowY: 'auto',
  transition: 'max-height 0.3s ease-in-out'
}}>
  {/* Your TagInput component goes here */}
</div>

Why This Works #

• Max Width + Overflow: The left container can't grow beyond 400px, and any extra content will scroll internally instead of pushing other components.
• Flex Grow: The right section automatically takes up all remaining space, so it won't get squeezed by the left filter.
• Responsive Grid: The xs/sm/lg props ensure the layout adapts nicely to different screen sizes.

内容的提问来源于stack exchange，提问作者Paul