Add nested object has full-height and full-width button

[RoelWKramer]

Prerequisites

• I have searched the existing issues
• I understand that providing a SSCCE example is tremendously useful to the maintainers.
• I have read the documentation
• Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

react-bootstrap

Version

6.0.0-beta11

Current Behavior

With 6.0.0-beta11 an d react-bootstrap i have a problem with remove button (and add button) sizes.

I created a schema which contains nested objects. The delete buttons are huge, they seem to fill 100% of the space they are in. I played around in the developer toolbar in safari. when i remove d-grid in one of the parent divs the button is smaller, but it is still mis-aligned.

Mis alignment is another issue, as you can see in the screenshots. But I found another bug report for that (although that was on version 5).

I also tried it with an array of nested objects, that seems to be alright, except for the add button. That one is full width as well.

I played around with some css, the ArrayTemplate and such. I am not a frontend developer however, the more I fiddle with it, the worse it gets. So I removed all my customizations.

I have no extra stylesheets loaded whatsoever.

With the default theme it seems to be better.

Expected Behavior

I expect the button to be not full size, but something more reasonable.

Steps To Reproduce

I want to create a link to the playground with my examples, but there is not an easy way to share that.

Just load these examples:

Object with nested object example
deployment.json
deployment.schema.json

Array with objects example
user.json
user.schema.json

This is my package.json
package.json

Environment

- OS: MacOS Sequoia
- Node:v23.6.1
- npm: 10.9.2
- Browser: Safari 18.5 / Chrome 138.0.7204.93

Anything else?

No response

[heath-freenome]

@RoelWKramer Sounds like you have a good handle on how to fix the theme. Feel free to provide a PR with the changes

[RoelWKramer]

I wish I could, I am just not a frontend engineer, nor a UX engineer. I can share what I tried though.

This was one of the attempts. When I am at home I'll have a look at a few branches I have not on this machine.

/**
 * AddButton is like the one in AddButton.tsx, but with the style attribute removed. 
 * The original AddButton has 'style={{ width: '100%' }}' specified, which is not good-looking.
 */
function AddButton<T = never, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = never>({
  registry,
  ...props
}: IconButtonProps<T, S, F>) {
    const {translateString} = registry;
    // Button does not support the uiSchema property
    delete props.uiSchema
    return (
        <Button
            {...props}
            className={`${props.className} btn-sm`}
            title={translateString(TranslatableString.AddItemButton)}
        >
            <BsPlus/>
        </Button>
    );
 }

[heath-freenome]

Another approach you can try, since all of our buttons have marker classes on them, is to provide a custom stylesheet to manipulate the css for those marker classes to fix them? The marker class names start with rjsf- so if you search the buttons implementations you should be able to find the ones that you need to update.

[heath-freenome]

@nickgros Do you have an idea how to fix bootstrap for this example?