diff --git a/src/auth/ha-auth-form-string.ts b/src/auth/ha-auth-form-string.ts index 2955f1f8fbe0..aead80ac3e2d 100644 --- a/src/auth/ha-auth-form-string.ts +++ b/src/auth/ha-auth-form-string.ts @@ -26,14 +26,13 @@ export class HaAuthFormString extends HaFormString { } ha-auth-form-string ha-icon-button { position: absolute; - top: 1em; - right: 12px; - --mdc-icon-button-size: 24px; - color: var(--secondary-text-color); - } - ha-auth-form-string ha-icon-button { + top: 8px; + right: 8px; inset-inline-start: initial; - inset-inline-end: 12px; + inset-inline-end: 8px; + --mdc-icon-button-size: 40px; + --mdc-icon-size: 20px; + color: var(--secondary-text-color); direction: var(--direction); } @@ -63,7 +62,7 @@ export class HaAuthFormString extends HaFormString { .validationMessage=${this.schema.required ? "Required" : undefined} @input=${this._valueChanged} @change=${this._valueChanged} - > + > ${this.renderIcon()} `; diff --git a/src/components/ha-form/ha-form-string.ts b/src/components/ha-form/ha-form-string.ts index 3118fcf948a1..d7d4236bbc5e 100644 --- a/src/components/ha-form/ha-form-string.ts +++ b/src/components/ha-form/ha-form-string.ts @@ -138,15 +138,13 @@ export class HaFormString extends LitElement implements HaFormElement { } ha-icon-button { position: absolute; - top: 1em; - right: 12px; - --mdc-icon-button-size: 24px; - color: var(--secondary-text-color); - } - - ha-icon-button { + top: 8px; + right: 8px; inset-inline-start: initial; - inset-inline-end: 12px; + inset-inline-end: 8px; + --mdc-icon-button-size: 40px; + --mdc-icon-size: 20px; + color: var(--secondary-text-color); direction: var(--direction); } `; diff --git a/src/components/ha-selector/ha-selector-text.ts b/src/components/ha-selector/ha-selector-text.ts index 2c89b3c58894..c3e2b969e4ff 100644 --- a/src/components/ha-selector/ha-selector-text.ts +++ b/src/components/ha-selector/ha-selector-text.ts @@ -111,13 +111,13 @@ export class HaTextSelector extends LitElement { } ha-icon-button { position: absolute; - top: 10px; - right: 10px; - --mdc-icon-button-size: 36px; + top: 8px; + right: 8px; + inset-inline-start: initial; + inset-inline-end: 8px; + --mdc-icon-button-size: 40px; --mdc-icon-size: 20px; color: var(--secondary-text-color); - inset-inline-start: initial; - inset-inline-end: 10px; direction: var(--direction); } `;