Skip to content

Conversation

@sem22-dev
Copy link

@sem22-dev sem22-dev commented Mar 17, 2025

Description

This PR fixes an issue with the side banner toggle button in the code editor component. Previously, when hovering over the toggle button, the ChevronLeftIcon and "Side Content hi" text were stacking vertically, causing an inconsistent and visually disruptive transition. The fix ensures all elements maintain horizontal alignment during the hover state transition.

Changes

  • Added a flex row container to properly align the icon and text horizontally
  • Added whitespace-nowrap to the text to prevent wrapping
  • Maintained existing transition animations while fixing the alignment issues
  • Ensured consistent appearance throughout the hover transition

Video Evidence

  • Before :
Screen.Recording.2025-03-18.at.1.24.36.AM.webm
  • After - Fix Demonstration:
Screen.Recording.2025-03-18.at.1.25.09.AM.webm

Issue(s)

  • Fixes #2552

Testing

  • Tested hover behavior across different screen sizes
  • Verified transitions remain smooth
  • Confirmed text remains horizontally aligned with the icon during all states

Fixed issue where ChevronLeftIcon and text were stacking vertically during hover transition.
Added proper flex container to maintain horizontal alignment and improved text display.

Signed-off-by: sem22-dev <thotjj22@gmail.com>
Signed-off-by: sem22-dev <thotjj22@gmail.com>
@sem22-dev
Copy link
Author

sem22-dev commented Mar 17, 2025

@Aditya-eddy , fixed the sidebar tag alignment for keploy/keploy#2552 . Tags are horizontal now. Please review!

@Aditya-eddy Aditya-eddy self-requested a review March 24, 2025 10:23
@sem22-dev sem22-dev closed this by deleting the head repository Apr 8, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant