Skip to content
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-7592] - Fix misalignment of Cluster Summary at small desktop screen sizes #10531

Merged

Conversation

mjac0bs
Copy link
Contributor

@mjac0bs mjac0bs commented May 30, 2024

Description 📝

The Cluster Summary section needs some padding on the left-hand side at breakpoints between 1280px and tablet view (960px).

Changes 🔄

  • Changed the breakpoint from md to 1280, which is when the checkout bar is no longer visually a sidebar. This happens before we hit the tablet breakpoint.

Target release date 🗓️

6/10

Preview 📷

Before After
Screenshot 2024-05-29 at 4 09 59 PM
Screen.Recording.2024-05-29.at.4.26.28.PM.mov

How to test 🧪

Reproduction steps

(How to reproduce the issue, if applicable)

  • Use the dev tools to set screen size < 1280 and >= 960
  • Go to https://cloud.linode.com/kubernetes/create
  • Observe the Cluster Summary section is too close to the edge of the paper and doesn't align with the rest of the form

Verification steps

(How to verify changes)

  • With your screen at the same size, go to https://localhost:3000/kubernetes/create
  • Confirm the Cluster Summary section is left and right aligned with the other form sections on the page in when resizing from desktop to tablet view
  • Confirm there aren't any unintended styling regressions

As an Author I have considered 🤔

Check all that apply

  • 👀 Doing a self review
  • ❔ Our contribution guidelines
  • 🤏 Splitting feature into small PRs
  • ➕ Adding a changeset
  • 🧪 Providing/Improving test coverage
  • 🔐 Removing all sensitive information from the code and PR description
  • 🚩 Using a feature flag to protect the release
  • 👣 Providing comprehensive reproduction steps
  • 📑 Providing or updating our documentation
  • 🕛 Scheduling a pair reviewing session
  • 📱 Providing mobile support
  • ♿ Providing accessibility support

@mjac0bs mjac0bs self-assigned this May 30, 2024
@mjac0bs mjac0bs requested a review from a team as a code owner May 30, 2024 15:55
@mjac0bs mjac0bs requested review from bnussman-akamai and abailly-akamai and removed request for a team May 30, 2024 15:55
Copy link

github-actions bot commented May 30, 2024

Coverage Report:
Base Coverage: 82.34%
Current Coverage: 82.34%

Copy link
Contributor

@jdamore-linode jdamore-linode left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @mjac0bs! Was able to reproduce the issue in prod and confirm that your changes fix it. Tried to mess around with different viewports, etc., and everything looked good

@mjac0bs mjac0bs added the Add'tl Approval Needed Waiting on another approval! label May 31, 2024
Copy link
Contributor

@abailly-akamai abailly-akamai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the fix!

@mjac0bs mjac0bs added Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! labels May 31, 2024
@mjac0bs mjac0bs merged commit 0e2d367 into linode:develop May 31, 2024
18 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Approved Multiple approvals and ready to merge!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants