fix: flows title on dashboard are truncating too soon#8696
Conversation
dosubot
Bot
added
the
size:S
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughStyling adjustments were made to the header and list components in the main page of the frontend. The header's button container spacing was modified by removing a negative margin class, and the list component's flow name and timestamp layout were updated for improved flexbox behavior and truncation. Changes
Suggested labels
Suggested reviewers
✨ Finishing Touches🧪 Generate Unit Tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/frontend/src/pages/MainPage/components/list/index.tsx (2)
159-170: Expose full flow name on hover for better UXNice flex-box rewrite; truncation now works reliably.
However, once the name is ellipsised the user has no way to see the full string. A lightweight improvement is to surface the full name via thetitleattribute:-<span - className="truncate" - data-testid={`flow-name-${flowData.id}`} -> +<span + className="truncate" + title={flowData.name} + data-testid={`flow-name-${flowData.id}`} +>Adds zero JS and helps both desktop and screen-reader users.
171-175: Use semantic<time>element for the “edited” timestampFor accessibility and machine parsing (e.g. browser extensions, crawlers) wrap the relative text in a
<time>tag with the ISO date indateTime:-<span className="truncate"> - Edited {timeElapsed(flowData.updated_at)} ago -</span> +<time + className="truncate" + dateTime={new Date(flowData.updated_at).toISOString()} +> + Edited {timeElapsed(flowData.updated_at)} ago +</time>Keeps visual output intact while improving semantics.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/frontend/src/pages/MainPage/components/header/index.tsx(1 hunks)src/frontend/src/pages/MainPage/components/list/index.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
`src/frontend/**/*.{ts,tsx,js,jsx}`: All React and TypeScript/JavaScript source files for the frontend must reside under src/frontend/ and use .ts, .tsx, .js, or .jsx extensions.
src/frontend/**/*.{ts,tsx,js,jsx}: All React and TypeScript/JavaScript source files for the frontend must reside under src/frontend/ and use .ts, .tsx, .js, or .jsx extensions.
src/frontend/src/pages/MainPage/components/header/index.tsxsrc/frontend/src/pages/MainPage/components/list/index.tsx
`src/frontend/src/pages/**/*`: Page-level React components must be placed under src/frontend/src/pages/.
src/frontend/src/pages/**/*: Page-level React components must be placed under src/frontend/src/pages/.
src/frontend/src/pages/MainPage/components/header/index.tsxsrc/frontend/src/pages/MainPage/components/list/index.tsx
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Validate PR
- GitHub Check: autofix
🔇 Additional comments (1)
src/frontend/src/pages/MainPage/components/header/index.tsx (1)
194-196: Confirm negative-margin removal does not break horizontal alignment
-mr-3was dropped and agap-2was introduced.
While this simplifies the layout, the parent container still starts withw-0, so any mis-alignment will only be visible after thew-36transition fires. Please sanity-check the updated spacing in narrow break-points (esp. when the “New Flow” button collapses), as the previous negative margin compensated for the button’s icon padding.No code change required if visual QA passes.
deon-sanchez
changed the title
github-actions
Bot
added
bug
* fix: Adjust header component styles for improved layout consistency * fix: Update ListComponent styles for improved layout and readability
3 participants
This pull request includes updates to improve the styling and layout of components on the
MainPage. The changes focus on enhancing responsiveness, fixing layout inconsistencies, and improving the user interface for better readability and usability.Header Component Updates:
-mr-3class in theHeaderComponent, simplifying the layout logic for better maintainability.List Component Updates:
line-clamp-1class with a more responsiveflex-wraplayout, allowing better handling of long text and improving responsiveness.flow-name-divcontainer to ensure it truncates properly while maintaining flexibility withmin-w-0andflex-shrinkfor better adaptability in different screen sizes.truncateclass to the "Edited" timestamp text, ensuring it doesn't overflow and remains readable within constrained spaces.FIX
BUG
Summary by CodeRabbit