langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-21 03:55:25 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

[UI/UX] Optimize "Powered by Dify" footer height in Embedded Chatbot #20868

New Issue
Closed
opened 2026-02-21 20:09:30 -05:00 by yindo · 1 comment
yindo commented 2026-02-21 20:09:30 -05:00
Owner
Copy Link
Copy Source

Originally created by @libingtong on GitHub (Dec 8, 2025).

Self Checks

  • I have read the Contributing Guide and Language Policy.
  • I have searched for existing issues search for existing issues, including closed ones.
  • I confirm that I am using English to submit this report, otherwise it will be closed.
  • Please do not modify this template :) and fill in all the required fields.

1. Is this request related to a challenge you're experiencing? Tell me about your story.

Currently, in the embedded chatbox mode, the "Powered by Dify" footer at the bottom has a fixed height of 60px. Visually, this area appears too tall and takes up unnecessary vertical space, looking somewhat like a detached "patch" at the bottom of the chat interface.

2. Additional context or comments

Suggested Change

I suggest reducing the height of the footer from 60px to 20px to make the interface look cleaner and more compact.

Implementation Details

The specific changes should be made in web/app/components/base/chat/embedded-chatbot/index.tsx:

1. Adjust main container height calculation (Line 53):
Change the height calculation to reserve less space for the footer.

// Before
isMobile ? 'h-[calc(100vh_-_60px)] shadow-xs' : 'h-[100vh] bg-chatbot-bg',

// After
isMobile ? 'h-[calc(100vh_-_20px)] shadow-xs' : 'h-[100vh] bg-chatbot-bg',

2. Adjust the footer container height (Line 76):
Change the CSS class for the footer height.

// Before
<div className='flex h-[60px] shrink-0 items-center pl-2'

// After
<div className='flex h-[20px] shrink-0 items-center pl-2'

3. Can you help us with this feature?

  • I am interested in contributing to this feature.
Originally created by @libingtong on GitHub (Dec 8, 2025). ### Self Checks - [x] I have read the [Contributing Guide](https://github.com/langgenius/dify/blob/main/CONTRIBUTING.md) and [Language Policy](https://github.com/langgenius/dify/issues/1542). - [x] I have searched for existing issues [search for existing issues](https://github.com/langgenius/dify/issues), including closed ones. - [x] I confirm that I am using English to submit this report, otherwise it will be closed. - [x] Please do not modify this template :) and fill in all the required fields. ### 1. Is this request related to a challenge you're experiencing? Tell me about your story. Currently, in the embedded chatbox mode, the "Powered by Dify" footer at the bottom has a fixed height of 60px. Visually, this area appears too tall and takes up unnecessary vertical space, looking somewhat like a detached "patch" at the bottom of the chat interface. ### 2. Additional context or comments ### Suggested Change I suggest reducing the height of the footer from **60px** to **20px** to make the interface look cleaner and more compact. ### Implementation Details The specific changes should be made in `web/app/components/base/chat/embedded-chatbot/index.tsx`: **1. Adjust main container height calculation (Line 53):** Change the height calculation to reserve less space for the footer. ```typescript // Before isMobile ? 'h-[calc(100vh_-_60px)] shadow-xs' : 'h-[100vh] bg-chatbot-bg', ``` ```typescript // After isMobile ? 'h-[calc(100vh_-_20px)] shadow-xs' : 'h-[100vh] bg-chatbot-bg', ```` **2. Adjust the footer container height (Line 76):** Change the CSS class for the footer height. ```tsx // Before <div className='flex h-[60px] shrink-0 items-center pl-2' ```` ```tsx // After <div className='flex h-[20px] shrink-0 items-center pl-2' ``` ### 3. Can you help us with this feature? - [x] I am interested in contributing to this feature.
yindo added the 💪 enhancement label 2026-02-21 20:09:30 -05:00
yindo closed this issue 2026-02-21 20:09:30 -05:00
yindo commented 2026-02-21 20:09:30 -05:00
Author
Owner
Copy Link
Copy Source

@dosubot[bot] commented on GitHub (Jan 8, 2026):

Hi, @libingtong. I'm Dosu, and I'm helping the Dify team manage their backlog and am marking this issue as stale.

Issue Summary:

  • You suggested reducing the "Powered by Dify" footer height in the embedded chatbot from 60px to 20px for a cleaner appearance.
  • The change involves updating height calculations and CSS in the embedded-chatbot/index.tsx file.
  • You expressed willingness to contribute code to implement this adjustment.
  • There has been no further discussion or updates on this issue since it was opened.

What's Next:

  • Please let me know if this issue is still relevant with the latest version of Dify by commenting here.
  • If I don’t hear back within 15 days, I will automatically close this issue.

Thanks for your understanding and contribution!

@dosubot[bot] commented on GitHub (Jan 8, 2026): Hi, @libingtong. I'm [Dosu](https://dosu.dev), and I'm helping the Dify team manage their backlog and am marking this issue as stale. **Issue Summary:** - You suggested reducing the "Powered by Dify" footer height in the embedded chatbot from 60px to 20px for a cleaner appearance. - The change involves updating height calculations and CSS in the embedded-chatbot/index.tsx file. - You expressed willingness to contribute code to implement this adjustment. - There has been no further discussion or updates on this issue since it was opened. **What's Next:** - Please let me know if this issue is still relevant with the latest version of Dify by commenting here. - If I don’t hear back within 15 days, I will automatically close this issue. Thanks for your understanding and contribution!
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label 💪 enhancement
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#20868
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?