Fix safari flexbox/gap issue with grid #449
Conversation
related to #435
| <div | ||
| className="h-full w-10" | ||
| className="h-full w-10 mr-4" |
There was a problem hiding this comment.
The one place grid grid-flow-col-dense didn't work, I'm sure if i dug into it It probably would have been a simple fix to get it to work, but just used margin instead.
| @@ -35,12 +35,12 @@ const KeyValue = ({ | |||
| if (!children || hide) return null | |||
| return ( | |||
| <div> | |||
| <div className="text-ch-blue-600 font-fira-code flex text-sm"> | |||
| <div className="text-ch-blue-600 font-fira-code flex text-sm whitespace-nowrap"> | |||
There was a problem hiding this comment.
"created on" was wraping to a new line even though it had lots of space, not sure if related or another safari quirk.
There was a problem hiding this comment.
turn off whitespace to see this diff correctly
There was a problem hiding this comment.
Yeah I saw that happening in your initial screenshot, I bet it had to do with the width of these elements compressing as flex children or something. We can keep an eye on it when getting the mobile view to look good, nowrap can cause layout weirdness on narrow devices.
| @@ -136,7 +136,7 @@ const ProjectProfile = ({ | |||
| </div> | |||
|
|
|||
| {/* Side panel */} | |||
| <div className="bg-ch-gray-760 font-fira-sans px-20 pt-12 flex flex-col gap-6 overflow-y-auto"> | |||
| <div className="bg-ch-gray-760 font-fira-sans px-20 pt-12 grid grid-flow-row-dense gap-6 overflow-y-auto"> | |||
There was a problem hiding this comment.
slighty different to the rest in that it's flow-row not flow-col, this fixed the gap at the bottom of the page too.
Irev-Dev
force-pushed
the
kurt/safari-flex-gap-435
branch
from
0ad7f5e
to
000bf4c
Compare
There was a problem hiding this comment.
Nice nice, thanks for your help on this. For anyone's future reference, here's a CSS Tricks guide on how grid-auto-flow: column dense works.
| @@ -35,12 +35,12 @@ const KeyValue = ({ | |||
| if (!children || hide) return null | |||
| return ( | |||
| <div> | |||
| <div className="text-ch-blue-600 font-fira-code flex text-sm"> | |||
| <div className="text-ch-blue-600 font-fira-code flex text-sm whitespace-nowrap"> | |||
There was a problem hiding this comment.
Yeah I saw that happening in your initial screenshot, I bet it had to do with the width of these elements compressing as flex children or something. We can keep an eye on it when getting the mobile view to look good, nowrap can cause layout weirdness on narrow devices.
Partial fix for #435