[front] - chore: make InputBar sticky #6275
Open
+108
−163
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
JulesBelveze
force-pushed
the
chore/make-input-sticky
branch
2 times, most recently
from
60bbf6e
to
d4d5462
Compare
|
Main challenge is that one the layout is slightly broken and a adding The current implementation achieves the intent however the scroll bar is not on the edge of the window (cf screenshot) 
See below picture of the unwanted div 
EDIT: this has been solved by allowing the outer div to expand to the full width and constraining the inner div. |
JulesBelveze
force-pushed
the
chore/make-input-sticky
branch
from
d4d5462
to
3a14f3c
Compare
flvndvd
reviewed
Jul 30, 2024
| @@ -492,7 +492,7 @@ function SlackIntegrationDrawer({ | |||
| hasChanged={false} | |||
| variant="side-sm" | |||
| > | |||
| <div className="pt-8"> | |||
| <div className="w-full max-w-4xl pt-8"> | |||
There was a problem hiding this comment.
Can we add pt-8 in here:
dust/front/components/sparkle/AppLayout.tsx
Line 192 in dff04e3
There was a problem hiding this comment.
☝️ Meant for other places where pt-8 makes sense.
| @@ -48,7 +48,7 @@ export function DropzoneContainer({ | |||
| return ( | |||
| <div | |||
| {...getRootProps()} | |||
| className="flex h-full w-full flex-col items-center" | |||
| className="flex h-full w-full flex-col items-center overflow-y-auto" | |||
There was a problem hiding this comment.
Not sure to understand why we need this one?
| @@ -188,8 +185,8 @@ export default function AppLayout({ | |||
|
|
|||
| <div | |||
| className={classNames( | |||
| "flex h-[calc(100%-5rem)] w-full flex-col", | |||
JulesBelveze
force-pushed
the
chore/make-input-sticky
branch
from
7804c7b
to
f55c90a
Compare
- Adjust sticky positioning in AssistantInputBar to avoid overlap with other elements - Enable scrolling for content in DropzoneContainer to manage overflow properly - Ensure the main content container in AppLayout allows for horizontal overflow - Add top padding on the Developers tools page for better visual alignment - Fix layout inconsistencies on Workspace Assistants page by adding top padding - Address overflow issues in managed data sources view for better content accessibility - Improve layout on public URLs, static data sources, members, and subscription pages by adding top padding for consistency
- Removed the automatic scrolling and element visibility check on assistant click - Simplified the agent selection on click to directly call the click handler without additional logic [conversation] - refactor: remove unused IntersectionObserver for input mention - The IntersectionObserver related to the assistant input is no longer necessary and has been removed [misc] - fix: ensure full height utilization in Dropzone container - Adjusted styling to allow Dropzone container to use full height for its elements [pages] - style: add padding to top of new app creation page - Introduced top padding to improve the visual layout of the new app creation page
…ehavior - Apply consistent maximum width to main content containers across various components for a unified look - Set overflow behavior on assistant list to only clip in the y-direction for better content handling
- Ensure full height is applied to the subscription plan container on small screens for styling consistency
- Fixed the bottom border property for a consistent UI in the input bar component - Improved positioning for sticky input bar on larger screens with responsive top alignment
- Removed unnecessary wrappers to simplify the React component trees - Updated class names to improve CSS consistency across components - Adjusted page layouts for better content alignment and spacing - Updated button handling for Slack integration and data-source connection to improve UX - Fixed inconsistent use of design tokens for font sizes and element spacing - Enhanced responsiveness of components to work better on various screen sizes - Streamlined the elements in assistants and developers tools pages for better readability
- Remove `h-full` css class to maintain consistent container size across components - Standardize `overflow-y-auto` to improve scroll behavior and layout structure
- Prevent horizontal overflow in the main content's flex wrapper div to ensure a cleaner layout - Allow vertical scrolling within the main content area to facilitate content navigation when content exceeds the viewport height
…ayout mode - Add center alignment for content in wide mode, ensuring it remains visually balanced on the page [front/pages/w] - refactor: remove overflow-y-clip for better content flow - Remove unnecessary overflow clip for workspace assistants, allowing for a smoother content expansion
JulesBelveze
force-pushed
the
chore/make-input-sticky
branch
from
403451b
to
ecf5faa
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR makes the
InputBarsticky and addresses various UI layout and overflow issues across multiple pages. It also streamlines scrolling and agent click handling in the assistant conversation component.Risk
Breaking UI
Deploy Plan
front-edgefront