Using input group for allowed and block instance buttons. (#2905)

- Fixes #2888
This commit is contained in:
Dessalines 2025-01-13 23:19:03 -05:00 committed by GitHub
parent ebb06cdeaf
commit 17af839c74
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -701,6 +701,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
{I18NextService.i18n.t(key)}
</label>
<div className="d-flex justify-content-between align-items-center">
<div className="input-group ms-2">
<input
type="text"
placeholder="instance.tld"
@ -712,9 +713,8 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
/>
<button
type="button"
className="btn btn-sm bg-success ms-2"
className="btn bg-success"
onClick={linkEvent(key, this.handleAddInstance)}
style={"width: 2rem; height: 2rem;"}
tabIndex={
-1 /* Making this untabble because handling enter key in text input makes keyboard support for this button redundant */
}
@ -725,6 +725,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
/>
</button>
</div>
</div>
{selectedInstances && selectedInstances.length > 0 && (
<ul className="mt-3 list-unstyled w-100 d-flex flex-column justify-content-around align-items-center">
{selectedInstances.map(instance => (
@ -738,7 +739,6 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
<button
id={instance}
type="button"
style={"width: 2rem; height: 2rem;"}
className="btn btn-sm bg-danger"
onClick={linkEvent(
{ key, instance },