fix: update avatar style to remain aligned with the input field #1037

Anush008 · 2023-03-22T07:15:48Z

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

Description

This PR intends to fix the avatar misalignment in https://insights.opensauced.pizza/feed.

Related Tickets & Documents

Closes #1035.

Mobile & Desktop Screenshots/Recordings

Before the patch:

After the patch:

Added tests?

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

Added to documentation?

netlify · 2023-03-22T07:15:53Z

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	`be0067d`
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/641b1973e917ab000894baae
😎 Deploy Preview	https://deploy-preview-1037--design-insights.netlify.app
📱 Preview on mobile	Toggle 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 · 2023-03-22T07:15:54Z

✅ Deploy Preview for oss-insights ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`be0067d`
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/641b1973f029080008a21a69
😎 Deploy Preview	https://deploy-preview-1037--oss-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

0-vortex

LGTM, what about the lg size?

Anush008 · 2023-03-22T07:44:31Z

LGTM, what about the lg size?

Do you mean why the lg size? That was set before I started, intending it to be hidden for smaller devices. However, now that you've mentioned it, I think it wouldn't hurt to make it visible for smaller screens too.

0-vortex · 2023-03-22T07:46:47Z

LGTM, what about the lg size?

Do you mean why the lg size? That was set before I started, intending it to be hidden for smaller devices. However, now that you've mentioned it, I think it wouldn't hurt to make it visible for smaller screens too.

Good reasoning but that is not what lg-inline does now. Tailwind aggregates from mobile first, so that class is changing the layout on lg screens. My question is if you accounted/tested on that particular screen size 🍕

Anush008 · 2023-03-22T08:21:52Z

LGTM, what about the lg size?

Do you mean why the lg size? That was set before I started, intending it to be hidden for smaller devices. However, now that you've mentioned it, I think it wouldn't hurt to make it visible for smaller screens too.

Good reasoning but that is not what lg-inline does now. Tailwind aggregates from mobile first, so that class is changing the layout on lg screens. My question is if you accounted/tested on that particular screen size 🍕

I am not quite sure if I'm getting what you mean. The breakpoint lg applies the layout for larger screens with viewport width 1024px or higher, correct? So, the avatar will only be visible for lg screens, since it is hidden by default for smaller screens. I've tested the changes for lg screen sizes after applying the patch, they look aligned as expected.

Anush008 · 2023-03-22T10:54:14Z

To add to this, the screenshots are from an lg sized screen. Maybe the cropping of the images caused the confusion.

OgDev-01

LGTM 🍕

OgDev-01 · 2023-03-22T12:45:45Z

Just noticed this

OgDev-01 · 2023-03-22T12:46:20Z

I believe we still want the avatar at the top when the inputs are open

OgDev-01 · 2023-03-22T12:52:40Z

Like this i mean

Anush008 · 2023-03-22T15:09:48Z

Input not in focus:

Input in focus:

OgDev-01 · 2023-03-22T15:18:16Z

Great! 👍

## [1.37.0-beta.2](v1.37.0-beta.1...v1.37.0-beta.2) (2023-03-22) ### 🐛 Bug Fixes * update avatar style to remain aligned with the input field ([#1037](#1037)) ([2374f20](2374f20))

github-actions · 2023-03-22T16:47:47Z

🎉 This PR is included in version 1.37.0-beta.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

## [1.37.0](v1.36.0...v1.37.0) (2023-03-24) ### 🧑‍💻 Code Refactoring * Deleted unused hooks, removed unused exports and imports ([#1028](#1028)) ([7b2bda2](7b2bda2)) ### 🍕 Features * add teams UI for the design system ([#994](#994)) ([499d08e](499d08e)) * added active styles to navbar links ([#1016](#1016)) ([c25c0a3](c25c0a3)), closes [#697](#697) * create collaboration Ui components ([#1006](#1006)) ([19ff5a7](19ff5a7)) * replace react toast to radix ([#933](#933)) ([3e000be](3e000be)) * update top nav menu to be more responsive on mobile ([#1029](#1029)) ([90c1e4a](90c1e4a)), closes [#866](#866) ### 🐛 Bug Fixes * updated footer file to update the year dynamically ([#1040](#1040)) ([c766d95](c766d95)) * add a check for proper URL in avatarURL prop ([#1009](#1009)) ([a425279](a425279)) * center text inside upgrade access button ([#1027](#1027)) ([cf3f6cb](cf3f6cb)), closes [#1024](#1024) * close highlight dialog when clicking outside its container ([#999](#999)) ([1bc90bb](1bc90bb)) * make delete standout ([#1026](#1026)) ([9c68287](9c68287)) * make insights hub layout inconsistent on larger screens ([#1046](#1046)) ([daaf6d1](daaf6d1)) * refresh highlights list on update and delete ([#1034](#1034)) ([bf2d951](bf2d951)) * remove dialog layout overlap on single highlight view ([#1047](#1047)) ([ea836e8](ea836e8)) * update avatar style to remain aligned with the input field ([#1037](#1037)) ([2374f20](2374f20))

## [1.37.0-beta.2](open-sauced/app@v1.37.0-beta.1...v1.37.0-beta.2) (2023-03-22) ### 🐛 Bug Fixes * update avatar style to remain aligned with the input field ([#1037](open-sauced/app#1037)) ([2374f20](open-sauced/app@2374f20))

## [1.37.0](open-sauced/app@v1.36.0...v1.37.0) (2023-03-24) ### 🧑‍💻 Code Refactoring * Deleted unused hooks, removed unused exports and imports ([#1028](open-sauced/app#1028)) ([7b2bda2](open-sauced/app@7b2bda2)) ### 🍕 Features * add teams UI for the design system ([#994](open-sauced/app#994)) ([499d08e](open-sauced/app@499d08e)) * added active styles to navbar links ([#1016](open-sauced/app#1016)) ([c25c0a3](open-sauced/app@c25c0a3)), closes [#697](open-sauced/app#697) * create collaboration Ui components ([#1006](open-sauced/app#1006)) ([19ff5a7](open-sauced/app@19ff5a7)) * replace react toast to radix ([#933](open-sauced/app#933)) ([3e000be](open-sauced/app@3e000be)) * update top nav menu to be more responsive on mobile ([#1029](open-sauced/app#1029)) ([90c1e4a](open-sauced/app@90c1e4a)), closes [#866](open-sauced/app#866) ### 🐛 Bug Fixes * updated footer file to update the year dynamically ([#1040](open-sauced/app#1040)) ([c766d95](open-sauced/app@c766d95)) * add a check for proper URL in avatarURL prop ([#1009](open-sauced/app#1009)) ([a425279](open-sauced/app@a425279)) * center text inside upgrade access button ([#1027](open-sauced/app#1027)) ([cf3f6cb](open-sauced/app@cf3f6cb)), closes [#1024](open-sauced/app#1024) * close highlight dialog when clicking outside its container ([#999](open-sauced/app#999)) ([1bc90bb](open-sauced/app@1bc90bb)) * make delete standout ([#1026](open-sauced/app#1026)) ([9c68287](open-sauced/app@9c68287)) * make insights hub layout inconsistent on larger screens ([#1046](open-sauced/app#1046)) ([daaf6d1](open-sauced/app@daaf6d1)) * refresh highlights list on update and delete ([#1034](open-sauced/app#1034)) ([bf2d951](open-sauced/app@bf2d951)) * remove dialog layout overlap on single highlight view ([#1047](open-sauced/app#1047)) ([ea836e8](open-sauced/app@ea836e8)) * update avatar style to remain aligned with the input field ([#1037](open-sauced/app#1037)) ([2374f20](open-sauced/app@2374f20))

fix: Used flex-col to align avatar with the input field

daa3d31

0-vortex approved these changes Mar 22, 2023

View reviewed changes

OgDev-01 approved these changes Mar 22, 2023

View reviewed changes

brandonroberts added the requested changes label Mar 22, 2023

Anush008 added 2 commits March 22, 2023 20:05

Merge branch 'beta' into avatar-patch

a78c2c1

fix: Updated the misalignment patch to use pt

be0067d

Anush008 changed the title ~~fix: Used flex-col to align avatar with the input field~~ fix: Used pt to align avatar with the input field Mar 22, 2023

OgDev-01 added ready-to-merge and removed requested changes labels Mar 22, 2023

brandonroberts changed the title ~~fix: Used pt to align avatar with the input field~~ fix: update avatar style to remain aligned with the input field Mar 22, 2023

brandonroberts merged commit 2374f20 into open-sauced:beta Mar 22, 2023

github-actions bot added the released on @beta label Mar 22, 2023

Anush008 deleted the avatar-patch branch March 22, 2023 17:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: update avatar style to remain aligned with the input field #1037

fix: update avatar style to remain aligned with the input field #1037

Anush008 commented Mar 22, 2023 •

edited

Loading

netlify bot commented Mar 22, 2023 •

edited

Loading

netlify bot commented Mar 22, 2023 •

edited

Loading

0-vortex left a comment

Anush008 commented Mar 22, 2023

0-vortex commented Mar 22, 2023

Anush008 commented Mar 22, 2023 •

edited

Loading

Anush008 commented Mar 22, 2023 •

edited

Loading

OgDev-01 left a comment

OgDev-01 commented Mar 22, 2023

OgDev-01 commented Mar 22, 2023

OgDev-01 commented Mar 22, 2023

Anush008 commented Mar 22, 2023

OgDev-01 commented Mar 22, 2023

github-actions bot commented Mar 22, 2023

fix: update avatar style to remain aligned with the input field #1037

fix: update avatar style to remain aligned with the input field #1037

Conversation

Anush008 commented Mar 22, 2023 • edited Loading

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

Description

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings

Added tests?

Added to documentation?

netlify bot commented Mar 22, 2023 • edited Loading

✅ Deploy Preview for design-insights ready!

netlify bot commented Mar 22, 2023 • edited Loading

✅ Deploy Preview for oss-insights ready!

0-vortex left a comment

Choose a reason for hiding this comment

Anush008 commented Mar 22, 2023

0-vortex commented Mar 22, 2023

Anush008 commented Mar 22, 2023 • edited Loading

Anush008 commented Mar 22, 2023 • edited Loading

OgDev-01 left a comment

Choose a reason for hiding this comment

OgDev-01 commented Mar 22, 2023

OgDev-01 commented Mar 22, 2023

OgDev-01 commented Mar 22, 2023

Anush008 commented Mar 22, 2023

Input not in focus:

Input in focus:

OgDev-01 commented Mar 22, 2023

github-actions bot commented Mar 22, 2023

Anush008 commented Mar 22, 2023 •

edited

Loading

netlify bot commented Mar 22, 2023 •

edited

Loading

netlify bot commented Mar 22, 2023 •

edited

Loading

Anush008 commented Mar 22, 2023 •

edited

Loading

Anush008 commented Mar 22, 2023 •

edited

Loading