In "Create Knowledge Page," during Step One, the section overflows its parent container and does not shrink.

[tdawn0-0]

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.15.3

Cloud or Self Hosted

Self Hosted (Source)

Steps to reproduce

Open the 'Create Knowledge Page' and proceed to Step One. Reduce the browser window width. In Step One, the section overflows its parent container. I've identified the issue, which seems to be that the container for the file-uploader component is fixed at 640px in width. I have already fixed this problem in my forked repository and am ready to submit a pull request whenever you're available.

✔️ Expected Behavior

The file-uploader component should scale properly with the browser dimensions.

❌ Actual Behavior

This breaks the responsive layout of the page.

[dosubot[bot]]

Hello, @tdawn0-0! I'm here to help you with any bugs, questions, or contributions. Let's work together to resolve this issue.

To address the issue where the file-uploader component overflows its parent container during Step One, you can modify the CSS to ensure it fits within its container. The problem arises because the container is fixed at 640px in width. You can adjust the CSS to make the component responsive by using percentage-based widths or media queries.

Here's a suggested CSS modification:

/* index.module.css */
.fileUploaderContainer {
  width: 100%; /* Ensure the container takes full width of its parent */
  max-width: 640px; /* Set a maximum width */
  overflow: hidden; /* Prevent content from overflowing */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

Apply this class to the container of the FileUploader component in the JSX:

<div className={s.fileUploaderContainer}>
  <FileUploader
    fileList={files}
    titleClassName={!shouldShowDataSourceTypeList ? 'mt-[30px] !mb-[44px] !text-lg !font-semibold !text-gray-900' : undefined}
    prepareFileList={updateFileList}
    onFileListUpdate={updateFileList}
    onFileUpdate={updateFile}
    onPreview={updateCurrentFile}
    notSupportBatchUpload={notSupportBatchUpload}
  />
</div>

This should help maintain the responsive layout by ensuring the file-uploader component does not exceed the boundaries of its parent container ^[1].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}