Pad input text when FlashOn icon is showing

5 years ago · d52239d0d2
2 changed files with 10 additions and 2 deletions
--- a/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
@ -51,7 +51,7 @@
  }
 </script>

-<div class="control">
+<div class="control" class:disabled>
  <Combobox
    {label}
    {disabled}
@ -121,4 +121,8 @@
    background-color: var(--spectrum-global-color-gray-50);
    border-color: var(--spectrum-alias-border-color-hover);
  }
+
+  .control:not(.disabled) :global(.spectrum-Textfield-input) {
+    padding-right: 40px;
+  }
 </style>
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@ -36,7 +36,7 @@
  }
 </script>

-<div class="control">
+<div class="control" class:disabled>
  <Input
    {label}
    {disabled}
@ -103,4 +103,8 @@
    background-color: var(--spectrum-global-color-gray-50);
    border-color: var(--spectrum-alias-border-color-hover);
  }
+
+  .control:not(.disabled) :global(.spectrum-Textfield-input) {
+    padding-right: 40px;
+  }
 </style>