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.

Sign up for GitHub

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

Jump to bottom

fix: mobile insights header layout break #795

Merged
merged 3 commits into from
Jan 24, 2023
Merged

fix: mobile insights header layout break #795

merged 3 commits into from
Jan 24, 2023

Conversation

OgDev-01
Copy link
Contributor

What type of PR is this? (check all applicable)

  • 🍕 Feature
  • 🐛 Bug Fix
  • 📝 Documentation Update
  • 🎨 Style
  • 🧑‍💻 Code Refactor
  • 🔥 Performance Improvements
  • ✅ Test
  • 🤖 Build
  • 🔁 CI
  • 📦 Chore (Release)
  • ⏩ Revert

Description

This PR:

  • fixes some minor CSS styling bugs in the InsightsHeader component
  • made the scatter chart hover card display with conditionally
  • Adds truncate to insights page name to prevent layout break when the page name is lengthy

The main cause of the layout break was a min-w-full class name on the hub layout contain... and change to w-full fixed the issue, as min-w seems to ignore the parent's container's width in this case

Related Tickets & Documents

Fixes #769

Mobile & Desktop Screenshots/Recordings

Before

image

After

image

Added tests?

  • 👍 yes
  • 🙅 no, because they aren't needed
  • 🙋 no, because I need help

Added to documentation?

  • 📜 README.md
  • 📓 docs.opensauced.pizza
  • 🍕 dev.to/opensauced
  • 📕 storybook
  • 🙅 no documentation needed

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

@netlify
Copy link

netlify bot commented Jan 24, 2023 •
edited
Loading

✅ Deploy Preview for oss-insights ready!

Name Link
🔨 Latest commit c6771c5
🔍 Latest deploy log https://app.netlify.com/sites/oss-insights/deploys/63cf71a35123cc00090ebbfb
😎 Deploy Preview https://deploy-preview-795--oss-insights.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Jan 24, 2023 •
edited
Loading

✅ Deploy Preview for design-insights ready!

Name Link
🔨 Latest commit c6771c5
🔍 Latest deploy log https://app.netlify.com/sites/design-insights/deploys/63cf71a368cf7700086361e4
😎 Deploy Preview https://deploy-preview-795--design-insights.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@OgDev-01 OgDev-01 requested a review from bdougie January 24, 2023 05:50
@OgDev-01 OgDev-01 added the needs review PRs that need review from core engineering team label Jan 24, 2023
@brandonroberts brandonroberts removed the needs review PRs that need review from core engineering team label Jan 24, 2023
@brandonroberts brandonroberts merged commit 0bc2f0b into beta Jan 24, 2023
@brandonroberts brandonroberts deleted the 769-mobile-dashboard branch January 24, 2023 14:05
github-actions bot pushed a commit that referenced this pull request Jan 24, 2023
@OgDev-01 @open-sauced
chore(minor): release 1.25.0-beta.6 on beta channel [skip ci]
98d51f6 
## [1.25.0-beta.6](v1.25.0-beta.5...v1.25.0-beta.6) (2023-01-24)

### 🍕 Features

* add `UserSettings` component to design system ([#788](#788)) ([dd9cabd](dd9cabd)), closes [#783](#783)

### 🐛 Bug Fixes

* mobile insights header layout break ([#795](#795)) ([0bc2f0b](0bc2f0b)), closes [#769](#769)
@github-actions
Copy link
Contributor

🎉 This PR is included in version 1.25.0-beta.6 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

github-actions bot pushed a commit that referenced this pull request Jan 30, 2023
@brandonroberts @open-sauced
chore(minor): release 1.25.0 [skip ci]
cb25b0f 
## [1.25.0](v1.24.0...v1.25.0) (2023-01-30)

### 🧑‍💻 Code Refactoring

* Renamed the ContributorTable to PullRequestTable ([#779](#779)) ([694d213](694d213)), closes [#681](#681)

### 🐛 Bug Fixes

* add fix for Storybook usage with Next 13 ([#792](#792)) ([bb10b2b](bb10b2b)), closes [/github.com/vercel/next.js/issues/36417#issuecomment-1117360509](https://github.com/open-sauced//github.com/vercel/next.js/issues/36417/issues/issuecomment-1117360509)
* correct repositories empty list message ([#778](#778)) ([18b7393](18b7393)), closes [#777](#777)
* make repositories table styles more responsive ([#773](#773)) ([fe5c6f5](fe5c6f5)), closes [#724](#724)
* mobile insights header layout break ([#795](#795)) ([0bc2f0b](0bc2f0b)), closes [#769](#769)
* remove usage of next/legacy/image ([#793](#793)) ([9264ffb](9264ffb))
* revert [#778](#778) ([f6e30e1](f6e30e1))
* use correct avatar URL for caching  ([#800](#800)) ([726f11b](726f11b)), closes [#757](#757) [#746](#746)

### 🍕 Features

* add `PullRequestSocialCard` component to design system ([#774](#774)) ([04600c2](04600c2)), closes [#716](#716)
* add `UserSettings` component to design system ([#788](#788)) ([dd9cabd](dd9cabd)), closes [#783](#783)
* set insight repo limit based on role ([#813](#813)) ([9e998f1](9e998f1))
* update to Next 13.1.x ([#758](#758)) ([72c2b64](72c2b64)), closes [#753](#753)
@github-actions
Copy link
Contributor

🎉 This PR is included in version 1.25.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

brandonroberts added a commit that referenced this pull request Jan 30, 2023
@brandonroberts
chore(minor): release 1.25.0 [skip ci] (#818)
050a4b4 
* v1.25.0-beta.10 -> production (#815)

* chore(minor): release 1.25.0 [skip ci]

## [1.25.0](v1.24.0...v1.25.0) (2023-01-30)

### 🧑‍💻 Code Refactoring

* Renamed the ContributorTable to PullRequestTable ([#779](#779)) ([694d213](694d213)), closes [#681](#681)

### 🐛 Bug Fixes

* add fix for Storybook usage with Next 13 ([#792](#792)) ([bb10b2b](bb10b2b)), closes [/github.com/vercel/next.js/issues/36417#issuecomment-1117360509](https://github.com/open-sauced//github.com/vercel/next.js/issues/36417/issues/issuecomment-1117360509)
* correct repositories empty list message ([#778](#778)) ([18b7393](18b7393)), closes [#777](#777)
* make repositories table styles more responsive ([#773](#773)) ([fe5c6f5](fe5c6f5)), closes [#724](#724)
* mobile insights header layout break ([#795](#795)) ([0bc2f0b](0bc2f0b)), closes [#769](#769)
* remove usage of next/legacy/image ([#793](#793)) ([9264ffb](9264ffb))
* revert [#778](#778) ([f6e30e1](f6e30e1))
* use correct avatar URL for caching  ([#800](#800)) ([726f11b](726f11b)), closes [#757](#757) [#746](#746)

### 🍕 Features

* add `PullRequestSocialCard` component to design system ([#774](#774)) ([04600c2](04600c2)), closes [#716](#716)
* add `UserSettings` component to design system ([#788](#788)) ([dd9cabd](dd9cabd)), closes [#783](#783)
* set insight repo limit based on role ([#813](#813)) ([9e998f1](9e998f1))
* update to Next 13.1.x ([#758](#758)) ([72c2b64](72c2b64)), closes [#753](#753)
ElpisHelle added a commit to ElpisHelle/next.js-tailwindcss that referenced this pull request Aug 17, 2023
@ElpisHelle
chore(minor): release 1.25.0-beta.6 on beta channel [skip ci]
e08fc50 
## [1.25.0-beta.6](open-sauced/app@v1.25.0-beta.5...v1.25.0-beta.6) (2023-01-24)

### 🍕 Features

* add `UserSettings` component to design system ([#788](open-sauced/app#788)) ([dd9cabd](open-sauced/app@dd9cabd)), closes [#783](open-sauced/app#783)

### 🐛 Bug Fixes

* mobile insights header layout break ([#795](open-sauced/app#795)) ([0bc2f0b](open-sauced/app@0bc2f0b)), closes [#769](open-sauced/app#769)
ElpisHelle added a commit to ElpisHelle/next.js-tailwindcss that referenced this pull request Aug 17, 2023
@ElpisHelle
chore(minor): release 1.25.0 [skip ci]
5967c0e 
## [1.25.0](open-sauced/app@v1.24.0...v1.25.0) (2023-01-30)

### 🧑‍💻 Code Refactoring

* Renamed the ContributorTable to PullRequestTable ([#779](open-sauced/app#779)) ([694d213](open-sauced/app@694d213)), closes [#681](open-sauced/app#681)

### 🐛 Bug Fixes

* add fix for Storybook usage with Next 13 ([#792](open-sauced/app#792)) ([bb10b2b](open-sauced/app@bb10b2b)), closes [/github.com/vercel/next.js/issues/36417#issuecomment-1117360509](https://github.com/open-sauced//github.com/vercel/next.js/issues/36417/issues/issuecomment-1117360509)
* correct repositories empty list message ([#778](open-sauced/app#778)) ([18b7393](open-sauced/app@18b7393)), closes [#777](open-sauced/app#777)
* make repositories table styles more responsive ([#773](open-sauced/app#773)) ([fe5c6f5](open-sauced/app@fe5c6f5)), closes [#724](open-sauced/app#724)
* mobile insights header layout break ([#795](open-sauced/app#795)) ([0bc2f0b](open-sauced/app@0bc2f0b)), closes [#769](open-sauced/app#769)
* remove usage of next/legacy/image ([#793](open-sauced/app#793)) ([9264ffb](open-sauced/app@9264ffb))
* revert [#778](open-sauced/app#778) ([f6e30e1](open-sauced/app@f6e30e1))
* use correct avatar URL for caching  ([#800](open-sauced/app#800)) ([726f11b](open-sauced/app@726f11b)), closes [#757](open-sauced/app#757) [#746](open-sauced/app#746)

### 🍕 Features

* add `PullRequestSocialCard` component to design system ([#774](open-sauced/app#774)) ([04600c2](open-sauced/app@04600c2)), closes [#716](open-sauced/app#716)
* add `UserSettings` component to design system ([#788](open-sauced/app#788)) ([dd9cabd](open-sauced/app@dd9cabd)), closes [#783](open-sauced/app#783)
* set insight repo limit based on role ([#813](open-sauced/app#813)) ([9e998f1](open-sauced/app@9e998f1))
* update to Next 13.1.x ([#758](open-sauced/app#758)) ([72c2b64](open-sauced/app@72c2b64)), closes [#753](open-sauced/app#753)
ElpisHelle added a commit to ElpisHelle/next.js-tailwindcss that referenced this pull request Aug 17, 2023
@ElpisHelle
chore(minor): release 1.25.0 [skip ci] (#818)
0be6ac4 
* v1.25.0-beta.10 -> production (#815)

* chore(minor): release 1.25.0 [skip ci]

## [1.25.0](open-sauced/app@v1.24.0...v1.25.0) (2023-01-30)

### 🧑‍💻 Code Refactoring

* Renamed the ContributorTable to PullRequestTable ([#779](open-sauced/app#779)) ([694d213](open-sauced/app@694d213)), closes [#681](open-sauced/app#681)

### 🐛 Bug Fixes

* add fix for Storybook usage with Next 13 ([#792](open-sauced/app#792)) ([bb10b2b](open-sauced/app@bb10b2b)), closes [/github.com/vercel/next.js/issues/36417#issuecomment-1117360509](https://github.com/open-sauced//github.com/vercel/next.js/issues/36417/issues/issuecomment-1117360509)
* correct repositories empty list message ([#778](open-sauced/app#778)) ([18b7393](open-sauced/app@18b7393)), closes [#777](open-sauced/app#777)
* make repositories table styles more responsive ([#773](open-sauced/app#773)) ([fe5c6f5](open-sauced/app@fe5c6f5)), closes [#724](open-sauced/app#724)
* mobile insights header layout break ([#795](open-sauced/app#795)) ([0bc2f0b](open-sauced/app@0bc2f0b)), closes [#769](open-sauced/app#769)
* remove usage of next/legacy/image ([#793](open-sauced/app#793)) ([9264ffb](open-sauced/app@9264ffb))
* revert [#778](open-sauced/app#778) ([f6e30e1](open-sauced/app@f6e30e1))
* use correct avatar URL for caching  ([#800](open-sauced/app#800)) ([726f11b](open-sauced/app@726f11b)), closes [#757](open-sauced/app#757) [#746](open-sauced/app#746)

### 🍕 Features

* add `PullRequestSocialCard` component to design system ([#774](open-sauced/app#774)) ([04600c2](open-sauced/app@04600c2)), closes [#716](open-sauced/app#716)
* add `UserSettings` component to design system ([#788](open-sauced/app#788)) ([dd9cabd](open-sauced/app@dd9cabd)), closes [#783](open-sauced/app#783)
* set insight repo limit based on role ([#813](open-sauced/app#813)) ([9e998f1](open-sauced/app@9e998f1))
* update to Next 13.1.x ([#758](open-sauced/app#758)) ([72c2b64](open-sauced/app@72c2b64)), closes [#753](open-sauced/app#753)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@brandonroberts brandonroberts brandonroberts approved these changes

@0-vortex 0-vortex Awaiting requested review from 0-vortex

@bdougie bdougie Awaiting requested review from bdougie

Assignees
No one assigned
Labels
released on @beta released
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

bug: Mobile view broken for main dashboard
2 participants
@OgDev-01 @brandonroberts