diff --git a/ui/js/component/publishForm/view.jsx b/ui/js/component/publishForm/view.jsx
index 16323f28a..3a2416644 100644
--- a/ui/js/component/publishForm/view.jsx
+++ b/ui/js/component/publishForm/view.jsx
@@ -542,7 +542,6 @@ class PublishForm extends React.PureComponent {
{
diff --git a/ui/scss/component/_file-selector.scss b/ui/scss/component/_file-selector.scss
index 31dc20d81..8172da203 100644
--- a/ui/scss/component/_file-selector.scss
+++ b/ui/scss/component/_file-selector.scss
@@ -1,3 +1,8 @@
+.form-field--file,
+.form-field--directory {
+ width: 100%;
+}
+
.file-selector {
display: flex;
}
@@ -11,4 +16,8 @@
.file-selector__path {
font-size: 14px;
+ flex-grow: 2;
+ .input-copyable {
+ width: 100%;
+ }
}
diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss
index 8fc120787..0021efe86 100644
--- a/ui/scss/component/_form-field.scss
+++ b/ui/scss/component/_form-field.scss
@@ -27,19 +27,22 @@
input[type="text"].input-copyable {
background: var(--input-bg);
- border-bottom: var(--input-border-size) solid var(--input-border-color);
color: var(--input-color);
line-height: 1;
padding-top: $spacing-vertical * 1/3;
padding-bottom: $spacing-vertical * 1/3;
- width: var(--input-width);
padding-left: 5px;
padding-right: 5px;
width: 100%;
- &:focus {
- border-color: var(--color-primary);
- background: none !important;
- }
+}
+
+input[readonly] {
+ border-bottom: 1px dashed var(--input-border-color) !important;
+}
+
+input[readonly]:focus {
+ background: var(--input-bg) !important;
+ border-bottom: 1px dashed var(--input-border-color !important);
}
.form-field {
@@ -81,9 +84,6 @@ input[type="text"].input-copyable {
-webkit-appearance: none;
background: var(--input-bg);
color: var(--input-color);
- &[readonly] {
- background-color: var(--input-bg);
- }
}
input[type="text"],