🧩 style: Agent Side Panel Layout and Consistency Fixes#12676
Merged
Conversation
…for improved layout * Adjusted padding in ActionsPanel, ModelPanel, and AdvancedPanel components to enhance visual consistency and layout. * Changed `py-4` to `pt-2` in the main container of each panel to reduce vertical spacing and improve overall design aesthetics.
* Changed text size in the MCPTool component to `text-sm` for better readability and consistency across the UI. * This adjustment enhances the user experience by ensuring that text is appropriately sized for various display settings.
…, and AgentPanel components * Updated the layout in ActionsInput to improve flex properties and ensure better responsiveness. * Refined the structure of ActionsPanel for a more consistent visual hierarchy and added accessibility features. * Adjusted the AgentPanel form layout for improved usability and streamlined component integration. * Changed text size in Dropdown component to `text-sm` for better readability across the UI.
…iveness * Updated the layout of the ActionsInput component to enhance flex properties and ensure better responsiveness. * Adjusted the textarea styling for improved usability and consistency in design. * Removed commented-out code related to example functionality to clean up the component structure.
danny-avila
changed the title
Contributor
There was a problem hiding this comment.
Pull request overview
UI/layout tweaks to address minor styling issues across dropdowns and the Agents side panel, primarily by normalizing text sizing and adjusting flex/spacing for panel content.
Changes:
- Add consistent
text-smstyling to dropdown popovers and MCP tool headers. - Refine Agents side panel layout (flex structure, padding/margins) for AgentPanel, Model/Advanced panels, and Actions flow.
- Improve Actions editor layout to better fill available height (flex + min-height adjustments, textarea sizing).
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/client/src/components/Dropdown.tsx | Adds text-sm to dropdown popover styling for consistent menu typography. |
| client/src/components/SidePanel/Agents/ModelPanel.tsx | Adjusts panel container sizing/padding to align with updated side panel layout. |
| client/src/components/SidePanel/Agents/MCPTool.tsx | Adds text-sm to MCP accordion header row for consistent typography. |
| client/src/components/SidePanel/Agents/AgentPanel.tsx | Refactors form/container flex layout to better distribute space with footer. |
| client/src/components/SidePanel/Agents/Advanced/AdvancedPanel.tsx | Updates Advanced panel container structure/padding and spacing. |
| client/src/components/SidePanel/Agents/ActionsPanel.tsx | Restructures Actions panel layout to be full-height flex with improved spacing. |
| client/src/components/SidePanel/Agents/ActionsInput.tsx | Refines Actions input/editor layout to be flex-based with adjustable textarea sizing. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+93
to
+97
| <button | ||
| type="button" | ||
| className="btn btn-neutral relative" | ||
| onClick={() => { | ||
| setActivePanel(Panel.builder); |
There was a problem hiding this comment.
The back navigation button is icon-only and currently has no accessible name. Add an aria-label (and optionally set ChevronLeft to aria-hidden) so screen readers can announce the control meaningfully.
Comment on lines
+113
to
+116
| disabled={isEphemeralAgent(agent_id) || !action.action_id} | ||
| className="btn btn-neutral border-token-border-light relative h-9 rounded-lg font-medium" | ||
| > | ||
| <TrashIcon className="text-red-500" /> |
There was a problem hiding this comment.
The delete (trash) button is icon-only and lacks an accessible name. Add an aria-label (and consider aria-hidden on the icon) so assistive tech can identify this as the delete-action control.
Suggested change
| disabled={isEphemeralAgent(agent_id) || !action.action_id} | |
| className="btn btn-neutral border-token-border-light relative h-9 rounded-lg font-medium" | |
| > | |
| <TrashIcon className="text-red-500" /> | |
| aria-label={localize('com_ui_delete_action')} | |
| disabled={isEphemeralAgent(agent_id) || !action.action_id} | |
| className="btn btn-neutral border-token-border-light relative h-9 rounded-lg font-medium" | |
| > | |
| <TrashIcon aria-hidden="true" className="text-red-500" /> |
* Introduced a new utility function `isSingleLineCode` to streamline the logic for determining if code is a single line. * Updated references in the `MarkdownCode` and `MarkdownCodeNoExecution` components to use the new utility function for improved readability and maintainability. * Enhanced the `processChildren` function in the Markdown editor to handle non-code elements more effectively.
Owner
Author
|
@codex review |
|
Codex Review: Didn't find any major issues. Another round soon, please! ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. Codex can also answer questions or update the PR. Try commenting "@codex address that feedback". |
krgokul
pushed a commit
to syedhabib39/LibreChat
that referenced
this pull request
Apr 20, 2026
…2676) * style: Update padding in ActionsPanel, ModelPanel, and AdvancedPanel for improved layout * Adjusted padding in ActionsPanel, ModelPanel, and AdvancedPanel components to enhance visual consistency and layout. * Changed `py-4` to `pt-2` in the main container of each panel to reduce vertical spacing and improve overall design aesthetics. * style: Update text size in MCPTool component for improved accessibility * Changed text size in the MCPTool component to `text-sm` for better readability and consistency across the UI. * This adjustment enhances the user experience by ensuring that text is appropriately sized for various display settings. * style: Enhance layout and accessibility in ActionsInput, ActionsPanel, and AgentPanel components * Updated the layout in ActionsInput to improve flex properties and ensure better responsiveness. * Refined the structure of ActionsPanel for a more consistent visual hierarchy and added accessibility features. * Adjusted the AgentPanel form layout for improved usability and streamlined component integration. * Changed text size in Dropdown component to `text-sm` for better readability across the UI. * style: Refactor layout in ActionsInput component for improved responsiveness * Updated the layout of the ActionsInput component to enhance flex properties and ensure better responsiveness. * Adjusted the textarea styling for improved usability and consistency in design. * Removed commented-out code related to example functionality to clean up the component structure. * refactor: Simplify single line code detection in MarkdownComponents * Introduced a new utility function `isSingleLineCode` to streamline the logic for determining if code is a single line. * Updated references in the `MarkdownCode` and `MarkdownCodeNoExecution` components to use the new utility function for improved readability and maintainability. * Enhanced the `processChildren` function in the Markdown editor to handle non-code elements more effectively.
krgokul
pushed a commit
to syedhabib39/LibreChat
that referenced
this pull request
Apr 21, 2026
…2676) * style: Update padding in ActionsPanel, ModelPanel, and AdvancedPanel for improved layout * Adjusted padding in ActionsPanel, ModelPanel, and AdvancedPanel components to enhance visual consistency and layout. * Changed `py-4` to `pt-2` in the main container of each panel to reduce vertical spacing and improve overall design aesthetics. * style: Update text size in MCPTool component for improved accessibility * Changed text size in the MCPTool component to `text-sm` for better readability and consistency across the UI. * This adjustment enhances the user experience by ensuring that text is appropriately sized for various display settings. * style: Enhance layout and accessibility in ActionsInput, ActionsPanel, and AgentPanel components * Updated the layout in ActionsInput to improve flex properties and ensure better responsiveness. * Refined the structure of ActionsPanel for a more consistent visual hierarchy and added accessibility features. * Adjusted the AgentPanel form layout for improved usability and streamlined component integration. * Changed text size in Dropdown component to `text-sm` for better readability across the UI. * style: Refactor layout in ActionsInput component for improved responsiveness * Updated the layout of the ActionsInput component to enhance flex properties and ensure better responsiveness. * Adjusted the textarea styling for improved usability and consistency in design. * Removed commented-out code related to example functionality to clean up the component structure. * refactor: Simplify single line code detection in MarkdownComponents * Introduced a new utility function `isSingleLineCode` to streamline the logic for determining if code is a single line. * Updated references in the `MarkdownCode` and `MarkdownCodeNoExecution` components to use the new utility function for improved readability and maintainability. * Enhanced the `processChildren` function in the Markdown editor to handle non-code elements more effectively.
jcbartle
pushed a commit
to jcbartle/LibreChat
that referenced
this pull request
May 11, 2026
…2676) * style: Update padding in ActionsPanel, ModelPanel, and AdvancedPanel for improved layout * Adjusted padding in ActionsPanel, ModelPanel, and AdvancedPanel components to enhance visual consistency and layout. * Changed `py-4` to `pt-2` in the main container of each panel to reduce vertical spacing and improve overall design aesthetics. * style: Update text size in MCPTool component for improved accessibility * Changed text size in the MCPTool component to `text-sm` for better readability and consistency across the UI. * This adjustment enhances the user experience by ensuring that text is appropriately sized for various display settings. * style: Enhance layout and accessibility in ActionsInput, ActionsPanel, and AgentPanel components * Updated the layout in ActionsInput to improve flex properties and ensure better responsiveness. * Refined the structure of ActionsPanel for a more consistent visual hierarchy and added accessibility features. * Adjusted the AgentPanel form layout for improved usability and streamlined component integration. * Changed text size in Dropdown component to `text-sm` for better readability across the UI. * style: Refactor layout in ActionsInput component for improved responsiveness * Updated the layout of the ActionsInput component to enhance flex properties and ensure better responsiveness. * Adjusted the textarea styling for improved usability and consistency in design. * Removed commented-out code related to example functionality to clean up the component structure. * refactor: Simplify single line code detection in MarkdownComponents * Introduced a new utility function `isSingleLineCode` to streamline the logic for determining if code is a single line. * Updated references in the `MarkdownCode` and `MarkdownCodeNoExecution` components to use the new utility function for improved readability and maintainability. * Enhanced the `processChildren` function in the Markdown editor to handle non-code elements more effectively.
This file contains hidden or 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
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.
Summary
I fixed layout and styling inconsistencies across the Agent side panel, improved markdown code block detection to handle edge cases, and cleaned up dead code.
AgentPanelform layout fromh-auto flex-shrink-0toflex flex-1 flex-col, wrapping panel content in aflex-1container so the footer stays anchored at the bottom regardless of content height.ActionsPanelto use amin-h-full flex-colinner wrapper, separating the header/auth section from theActionsInputso the schema textarea and save button fill remaining vertical space naturally.ActionsInputto use flex-based sizing (flex-1 min-h-0) instead of the fixedh-96textarea height, making the schema input resizable (resize-y) with amin-h-[12rem]floor and pinning the save button to the bottom withmt-auto.ActionsInputandActionsPanel.ModelPanel,AdvancedPanel, andActionsPanelheaders frompy-4/py-6topt-2for tighter, more consistent spacing across all sub-panels.min-h-[50vh]fromModelPanelandmin-h-[40vh]/scrollbar-gutter-stablefromAdvancedPanel, letting both panels size naturally within the parent flex container.text-smto theDropdownpopover andMCPToolaccordion row to match the font size used elsewhere in the side panel.isSingleLineCodeutility inMarkdownComponentsthat correctly handleschildrenpassed as an array of strings (not just a single string), fixing false negatives in single-line code detection for bothcodeandcodeNoExecutioncomponents.processChildrento skip cloning of non-HTML-string elements andcodeelements, preventing unintended re-processing of React component nodes.Change Type
Testing
Dropdownpopovers andMCPToolaccordion items render with consistenttext-smfont sizing.isSingleLineCodecorrectly distinguishes single-line from multi-line code blocks.Test Configuration:
Checklist