Made text on buttons in SectionTableBody not wrap #998
Conversation
There was a problem hiding this comment.
Thanks for submitting this PR (sorry for the slow review)! This styling problem has been bugging me for ages, so really appreciate the work here.
I've left some comments regarding styling/the specific CSS we're using. Also, make sure that the buttons end up scrolling when overflowing (like how the rows scroll rather than overflow their section)
Also, the original issue also mentions fixing the Department and School cards SchoolDeptCard. If you'd like, you can break that out into a separate PR (make sure to note that on the original issue), or to bring that into this PR as well!
apps/antalmanac/src/components/RightPane/SectionTable/CourseInfoBar.tsx
Outdated
Show resolved
Hide resolved
| > | ||
| {`${deptCode} ${courseNumber} | ${courseTitle}`} | ||
| <span | ||
| style={{ whiteSpace: 'nowrap', overflow: 'hidden', textAlign: 'left' }} |
There was a problem hiding this comment.
| style={{ whiteSpace: 'nowrap', overflow: 'hidden', textAlign: 'left' }} | |
| style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', }} |
No need to align text left, but we do want there to be visual indicator of overflow, which we can do with textOverflow: 'ellipsis'
apps/antalmanac/src/components/RightPane/SectionTable/CourseInfoButton.tsx
Outdated
Show resolved
Hide resolved
apps/antalmanac/src/components/RightPane/SectionTable/CourseInfoBar.tsx
Outdated
Show resolved
Hide resolved
Co-authored-by: Kevin Wu <[email protected]>
Co-authored-by: Kevin Wu <[email protected]>
Co-authored-by: Kevin Wu <[email protected]>
|
Hey, just checking in on this PR! Is it ready for re-review or are you still working on it @dlacuata ? |
Oh yes I am still working on it, sorry for the delay, I was on vacation for a few weeks and wasn't able to work on it then. I will be on it ASAP though! |
Summary
Made text on buttons in the SectionTableBody not wrap to prevent resizing
Test Plan
Made sure buttons didn't resize when they shrink under a certain min-width. Text will not wrap and the overflow will be hidden for long course names
Issues
Closes #729