fix: filter section is overflowing for small screen in dashboard sect… #1690
Conversation
Tusharjain123
requested review from
derberg,
mcturco,
akshatnema,
magicmatatjahu and
asyncapi-bot-eve
as code owners
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-1690--asyncapi-website.netlify.app/ |
| }} | ||
| > | ||
| <div className="bg-white w-96 shadow-xl rounded"> | ||
| <div className="bg-white shadow-xl rounded" style={{width: "19rem"}}> |
There was a problem hiding this comment.
We don't use style tag to add CSS inside tags. Kindly use tailwind classes to add the width.
| }} | ||
| > | ||
| <div className="bg-white w-96 shadow-xl rounded"> | ||
| <div className="bg-white shadow-xl rounded w-[19rem]"> |
There was a problem hiding this comment.
use max-width property to make it responsive, don't hardcode the width of the component in both mobile and desktop views.
| style={{ | ||
| position: strategy, | ||
| top: y ?? '', | ||
| left: x ?? '', | ||
| left: x>0? x??'':"14px", |
There was a problem hiding this comment.
Please try to convert this style tag properties into tailwind classes, since they are easy conditional statements and can be converted into tailwind properties.
|
@Tusharjain123 do you plan to continue with this one? |
Yes, I am doing it. Everything is working well if it is to be used with style tag, but converting the style property into tailwind classes is giving a problem. Specifically, the left and the right property value is not applying when using it with tailwind classes. I am just finding out the solution for it. |
|
LGTM |
|
@Tusharjain123 Kindly resolve the conflicts inside this PR. |
@akshatnema please take a look, I have resolved the conflicts |
|
@Tusharjain123 Add screenshots for the changes you made in UI in description of this PR. |
|
/rtm |
…ion #1564
Description
This PR resolved the error of overflowing for a small screen.
Related issue(s)
Resolve #1564