Character not visible in input variable

Self Checks

[X] This is only for bug report, if you would like to ask a question, please head to Discussions.
[X] I have searched for existing issues search for existing issues, including closed ones.
[X] I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
[X] [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:）
[X] Please do not modify this template :) and fill in all the required fields.

Dify version

0.8.0

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

create a input with os name & then use the code block with it in the input variable field.
shows o. but it should be os.

✔️ Expected Behavior

should be os in the input variable field.

❌ Actual Behavior

is o. in the input variable field.

@echosonusharma Hello! I'm here to assist you with any bugs, questions, or contributions. Let's get this issue sorted out together.

The issue you're experiencing, where only "o" is visible instead of "os" in the input variable field, is likely due to the CSS styles applied to the input field. Specifically, the max-width style of 11px is too small to display the entire text.

To resolve this, you can adjust the max-width property to a larger value. Here is an example of how you might modify the CSS:

.input-variable-field {
  max-width: 100%; /* or any appropriate value */
}

Ensure that the class applied to your input field does not have restrictive width settings. You can inspect the element in your browser's developer tools and adjust the styles accordingly.

If the issue persists, you might want to check other CSS properties that could be affecting the input field's display, such as padding, margin, or overflow.

For reference, the default CSS styles for input fields in the Dify codebase are:

For text input fields:

.w-full
.px-3
.text-sm
.leading-8
.text-gray-900
.border-0
.rounded-lg
.grow
.h-8
.bg-gray-50
.focus\:outline-none
.focus\:ring-1
.focus\:ring-inset
.focus\:ring-gray-200

For number input fields:

.w-full
.px-3
.text-sm
.leading-8
.text-gray-900
.border-0
.rounded-lg
.grow
.h-8
.bg-gray-50
.focus\:outline-none
.focus\:ring-1
.focus\:ring-inset
.focus\:ring-gray-200

For paragraph (textarea) fields:

.w-full
.px-3
.py-1
.text-sm
.leading-\[18px\]
.text-gray-900
.border-0
.rounded-lg
.grow
.h-\[120px\]
.bg-gray-50
.focus\:outline-none
.focus\:ring-1
.focus\:ring-inset
.focus\:ring-gray-200

Adjusting these styles should help ensure that the input field displays the text correctly ^[1].

To continue talking to Dosu, mention @dosu.

langgenius / dify