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-7331] - VPC and StackScript details overflow #9887

Merged
merged 8 commits into from
Nov 15, 2023

Conversation

coliu-akamai
Copy link
Contributor

@coliu-akamai coliu-akamai commented Nov 8, 2023

Description + notes on some changes 📝

  • Fixes the overflow bug on the VPC and StackScript details page
  • Fixes cutoff searchbar on VPC details page
    • note: placeholder text so far still gets larger when the screen gets smaller (consistent across all searchbars) -- currently forcing a default width of the searchbar on the VPC details page as a result + Also updated the margin for the searchbar and Create Subnet button in the VPCSubnetsTable, due to adding the flex-wrap property so that the search bar and button don't squash each other on smaller screens. this is an alternate fix compared to trying to decrease the placeholder text font (think I just need to target the correct mui classes, but was having trouble with it -- will still look into it)

Preview 📷

Before After
image image
Before After
image image

How to test 🧪

Prerequisites

(How to setup test environment)

  • With VPC admin tags, using the prod env (or dev env), make sure you have a VPC. Give it a long, one word description
  • Create a stackscript and also give it a long description

Reproduction steps

  • Notice how the description overflows for both VPC and StackScript
  • Notice how the searchbar placeholder text gets cutoff

Verification steps

  • Confirm description text is now broken up for VPC and StackScript description for a very long single word
  • Confirm VPC and StackScript description work normally without a single very long word
  • Confirm search bar text no longer gets cutoff on small screens

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

@coliu-akamai coliu-akamai added the VPC Relating to VPC project label Nov 8, 2023
@coliu-akamai coliu-akamai self-assigned this Nov 8, 2023
@coliu-akamai coliu-akamai marked this pull request as ready for review November 8, 2023 22:02
@coliu-akamai coliu-akamai requested a review from a team as a code owner November 8, 2023 22:02
@coliu-akamai coliu-akamai requested review from mjac0bs and carrillo-erik and removed request for a team November 8, 2023 22:02
Copy link
Contributor

@mjac0bs mjac0bs 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 fixing both of these! Confirmed that the description field now wraps rather than overflows on StackScript details and VPC details. Search bar placeholder text is no longer cut off.

StackScripts ✅ VPC ✅
Screenshot 2023-11-14 at 12 58 19 PM Screenshot 2023-11-14 at 12 58 48 PM

I think extending the width of the search bar is fine. It seems like there's some default styling for the MUI TextField component that is setting that font size to 1rem at smaller viewports and that would need to get overridden to go that styling route, but I couldn't make it happy either.

packages/manager/.changeset/pr-9887-fixed-1699470171696.md Outdated Show resolved Hide resolved
@mjac0bs mjac0bs added the Add'tl Approval Needed Waiting on another approval! label Nov 14, 2023
Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>
@coliu-akamai coliu-akamai added Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! labels Nov 15, 2023
@coliu-akamai coliu-akamai merged commit 1d3e0d0 into linode:develop Nov 15, 2023
11 checks passed
@coliu-akamai coliu-akamai deleted the fix-m3-7331 branch December 19, 2023 04:56
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! VPC Relating to VPC project
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants