Cody/increase weekly pick button responsiveness #611
Conversation
…lyPickButton-responsiveness Merge develop into feature branch
|
Gridiron Survivor Application
Project name: Gridiron Survivor Application
Only deployments on the production branch are activated automatically. If you'd like to activate this deployment, navigate to your deployments. Learn more about Appwrite Function deployments.
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| htmlFor={team} | ||
| data-testid="team-label" | ||
| disabled={isDisabled} | ||
| className="flex-col xs:flex-row" |
There was a problem hiding this comment.
It's better in tailwind to work from small to large. Therefore it should be: className="flex-row sm:flex-col"
However, I'm confused by the need for the addtional xs breakpoint. Why not just make it flex-col by default, and flex-rowat a large enough breakpoint?
There was a problem hiding this comment.
I am working from small to large. For screen sizes less than the xs breakpoint, the label will have the class flex-col to allow the team image and the team name to stack vertically.
The reason I created an extra breakpoint was that I found the issue to only happen on screen sizes less than 400px. When I tried using the sm breakpoint provided by tailwind, it looked strange that they were stacked vertically as the Button grew in size on screens closer to the breakpoint.
There was a problem hiding this comment.
Okay, so if you change it to className="flex-row sm:flex-col" does that still work? I try not to target specifically smaller breakpoints. Instead, start with the smallest and change it for the larger ones. If that makes sense.
There was a problem hiding this comment.
I think this would have the opposite effect that I was looking for. In this case the label would have the class flex-row placing the team name and image next to each other on screen sizes less than the sm breakpoint. When the screen sizes exceed the sm breakpoint the class flex-col would be applied and the team name and image would be placed on top of each other.
There was a problem hiding this comment.
Yes, you're right, sorry.
All I'm trying to get across is you should almost always make the default for the smallest breakpoint.
So className="flex-col sm:flex-row" or whichever larger breakpoint you find appropriate for the row.
There was a problem hiding this comment.
From 0 to 640px sm breakpoint, is the minimum size. Even if this breaks at 400, it will adhere the same styles starting at 640px and lower. Anything from 0 to 640px should be flex-col. Then, you use sm:flex-row. Ending with classaName="flex-col sm:flex-row". Mobile first, and adjust larger screens accordingly.
Therefore, we do not need the custom 400 breakpoint.
|
@kepsteen For these responsive tickets, can y'all create short videos showing the changes in action? Thanks! |
Closes #601
flex-colto stack team image and name vertically