Fix safari flexbox/gap issue with grid #449
Reference in New Issue
Block a user
Delete Branch "kurt/safari-flex-gap-435"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Partial fix for #435
@@ -64,3 +64,3 @@className="h-full w-10"className="h-full w-10 mr-4"aria-describedby={popoverId}onClick={togglePopover}The one place
grid grid-flow-col-densedidn'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.@@ -37,3 +37,3 @@<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">{keyName}"created on" was wraping to a new line even though it had lots of space, not sure if related or another safari quirk.
@@ -133,3 +132,4 @@<div className="grid grid-cols-1 md:auto-cols-preview-layout grid-flow-row-dense absolute inset-0 h-full">{/* Viewer */}<div className="md:col-start-2 w-full min-h-md"><ProfileViewer />slighty different to the rest in that it's
flow-rownotflow-col, this fixed the gap at the bottom of the page too.@@ -37,3 +37,3 @@<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">{keyName}turn off whitespace to see this diff correctly
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 denseworks.@@ -37,3 +37,3 @@<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">{keyName}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,
nowrapcan cause layout weirdness on narrow devices.