Repository: streamlit/streamlit
File: frontend/lib/src/components/widgets/DataFrame/menus/ColumnVisibilityMenu.tsx (TypeScript)

Code before:
                        ])
                      }
                    } else {
                      hideColumn(column.id)
                    }
                  }}
                />
              )
            })}
          </div>
        </div>
      )}
      isOpen={isOpen}
      onClickOutside={onClose}
      onClick={() => (isOpen ? onClose() : undefined)}
      onEsc={onClose}
      ignoreBoundary={false}
      overrides={{
        Body: {
          props: {
            "data-testid": "stDataFrameColumnVisibilityMenu",
          },
          style: () => {
            const lightBackground = hasLightBackgroundColor(theme)
            return {
              borderTopLeftRadius: theme.radii.default,
              borderTopRightRadius: theme.radii.default,
              borderBottomLeftRadius: theme.radii.default,
              borderBottomRightRadius: theme.radii.default,

              paddingTop: "0 !important",
              paddingBottom: "0 !important",
              paddingLeft: "0 !important",
              paddingRight: "0 !important",

              backgroundColor: "transparent",
              // Always use same border width - in light mode, match background
              // so we don't need to adjust for pixel shifts
              borderWidth: theme.sizes.borderWidth,
              borderStyle: "solid",
              borderColor: lightBackground
                ? theme.colors.bgColor
                : theme.colors.borderColor,
              // Only show shadow in light mode
              boxShadow: lightBackground
                ? theme.shadows.popover
                : theme.shadows.none,
              // Clip scrollbar within rounded corners
              overflow: "hidden",
            }
          },

Review comment (refactor):
**suggestion (non-blocking):**  There seems to be a good amount of duplicated styling code across these components, which can become a maintenance burden. It would be nice if we could centralize the definitions of these styles into a helper function (or a few helper functions). 

Code after:
                        ])
                      }
                    } else {
                      hideColumn(column.id)
                    }
                  }}
                />
              )
            })}
          </div>
        </div>
      )}
      isOpen={isOpen}
      onClickOutside={onClose}
      onClick={() => (isOpen ? onClose() : undefined)}
      onEsc={onClose}
      ignoreBoundary={false}
      overrides={{
        Body: {
          props: {
            "data-testid": "stDataFrameColumnVisibilityMenu",
          },
          style: () => ({
            ...getPopoverContainerStyle(theme),
            paddingTop: "0 !important",
            paddingBottom: "0 !important",
            paddingLeft: "0 !important",
            paddingRight: "0 !important",
            backgroundColor: "transparent",
            // Clip scrollbar within rounded corners
            overflow: "hidden",
          }),
        },
        Inner: {
          style: () => ({
            backgroundColor: theme.colors.bgColor,
            color: theme.colors.bodyText,
            fontSize: theme.fontSizes.sm,
            fontWeight: theme.fontWeights.normal,
            minWidth: theme.sizes.minMenuWidth,
            maxWidth: `calc(${theme.sizes.minMenuWidth} * 2)`,
            // No scroll here - handled by content div so scrollbar is clipped
            paddingTop: "0 !important",
            paddingBottom: "0 !important",
            paddingLeft: "0 !important",
            paddingRight: "0 !important",
          }),
        },
      }}
    >
      {<div>{children}</div>}