small screen fit for info card elements #407
Conversation
✅ Deploy Preview for cell-catalog ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
I'm just noticing now, but the designs don't have the icons for this buttons, which will help on the sizing |
|
@meganrm yeah, but the mobile designs section historically was "disease catalog" and the normal/disease order buttons have divergent designs. I assumed the differences between normal and disease buttons would hold in tablet/mobile sizing, I can check with Travis. I did implement some things (like centering text) that match the disease catalog because it just was obviously more appropriate, and I dropped the second icon on the smallest sizes. Dropping the big icons would be much simpler though if thats what UX wants |
There was a problem hiding this comment.
Pull request overview
This PR improves mobile and tablet responsive styling for the cell line info card's extra large order buttons to prevent overflow on smaller screens.
Changes:
- Adjusted font sizes and button dimensions for mobile viewports
- Added tablet-specific media query to center button content
- Hidden linkout icon on mobile screens to save space
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/style/cell-line-info-card.module.css | Added responsive styles for tablet and mobile breakpoints, including font size adjustments, button sizing, and icon visibility |
| src/components/CellLineInfoCard/CellLineInfoCardBase.tsx | Added className to LinkOutIcon component to enable mobile hiding |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| {label} | ||
| </h2> | ||
| <LinkOutIcon /> | ||
| <LinkOutIcon className={linkoutIcon}/> |
There was a problem hiding this comment.
Missing space before the closing tag. Should be className={linkoutIcon} />.
| <LinkOutIcon className={linkoutIcon}/> | |
| <LinkOutIcon className={linkoutIcon} /> |
There was a problem hiding this comment.
did you run format on this?
Oh you're right, I missed these section : https://www.figma.com/design/kMIJN6BoOkXIhnVUruIHNT/Website-allencell.org?node-id=5913-8084&t=Kif8KdISF5j1Owr7-0, but our implementation doesn't actually match this design. " Each button has it’s icon to the left and is left justified with the external link button right justified." |
Not sure I follow this comment, but I do think that at full screen widths we match the current designs, and I got a sign off from Travis on this PR via Slack (centering and dropping icons on tablet sizing, etc) |
rugeli
left a comment
rugeli
left a comment
There was a problem hiding this comment.
The info card looks great on both iPhone and Android! I did noticed some overflow issues in the tab buttons, but I'm assuming we're working on that next.
…to fix/mobile-large-button
Problem
Small fix for mobile styling on the "extra large order buttons"
Can refine this or seek UX input but it prevents obvious overflow
Screenshots (optional):