-
Notifications
You must be signed in to change notification settings - Fork 364
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: [M3-8142] - Alignment Regression Of The IP Address Inside Node Pools Table #10599
Conversation
Coverage Report: ❌ |
@@ -100,7 +100,7 @@ export const NodeTable = React.memo((props: Props) => { | |||
<TableSortCell | |||
sx={(theme) => ({ | |||
...theme.applyTableHeaderStyles, | |||
width: '15%', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These changes are an improvement, but I'm still seeing the wrapping at very narrow viewport widths (i.e., mobile screens).
Screen.Recording.2024-06-21.at.11.33.46.AM.mov
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I was able to fix it by changing lines 114-117 of NodeRow.tsx
like so:
<div style={{ whiteSpace: 'nowrap' }}>
<CopyTooltip copyableText text={displayIP} />
<StyledCopyTooltip text={displayIP} />
</div>
Using whiteSpace: 'no-wrap'
ensures these elements will never wrap.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@hkhalil-akamai I believe the viewport width at which you reduced to in your video is somewhere in the 500px range and I was looking at the 600px breakpoint. In any event, I like the change you suggested better. We don't have to introduce a <div>
element, we can just pass the noWrap
prop set to true
on the <TableCell>
component.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
IP Address and copy icon do not wrap as the viewport width shrinks ✅
packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeRow.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good, left some final feedback
packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/NodeRow.tsx
Outdated
Show resolved
Hide resolved
@@ -88,7 +88,7 @@ export const NodeTable = React.memo((props: Props) => { | |||
<TableSortCell | |||
sx={(theme) => ({ | |||
...theme.applyTableHeaderStyles, | |||
width: '25%', | |||
width: '35%', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Even though the noWrap
sorts out the alignment problem, I think the new widths you had before better fit the content (status column is wide)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've replaced the widths again.
…ools Table (linode#10599) * Fix alignment issue of the IP Address in Node Pools table * Add changeset * Implement PR feedback * More PR feedback * Comment out gecko2 mock flags causing clone-linode spec to fail
Description 📝
Fixes the the vertical alignment of the IP Address inside of the Node Pools table.
Changes 🔄
List any change relevant to the reviewer.
background-color: transparent
css property on thecopy
icon in order to show the cause of the visual bug.Updated the row width percentage values, allowing theIP Address
column more room since some addresses will cause the text to wrap. TheStatus
column does not need as much room and the values in these change maintain a similar proportion as before.noWrap
prop set totrue
on the<TableCell>
for the IP Address column to prevent longer addresses from wrapping thecopy
icon and resulting in vertical alignment discrepancies.Preview 📷
before-fix.mov
after-fix.mov
How to test 🧪
Preview
video to ensure consistent results.Verification steps
(How to verify changes)
As an Author I have considered 🤔
Check all that apply