Fix safari flexbox/gap issue with grid

related to #435

app/web/src/components/CadPackage/CadPackage.tsx

@@ -12,7 +12,7 @@ const CadPackage = ({ cadPackage, className = '' }: CadPackageProps) => {
   return (
     <div
       className={
-        `flex items-center gap-2 cursor-default text-gray-100 ${
+        `grid grid-flow-col-dense items-center gap-2 cursor-default text-gray-100 ${
           isOpenScad && 'bg-yellow-800'
         } ${isCadQuery && 'bg-ch-blue-300'} bg-opacity-30 ` + className
       }

app/web/src/components/Customizer/Customizer.tsx

@@ -43,7 +43,7 @@ const Customizer = () => {
       }`}
     >
       <div className="flex justify-between px-6 py-2 items-center">
-        <div className="flex gap-6 items-center">
+        <div className="grid grid-flow-col-dense gap-6 items-center">
           <button className="px-2" onClick={() => setOpen(!open)}>
             <Svg
               name="chevron-down"

app/web/src/components/EditableProjecTitle/EditableProjecTitle.tsx

@@ -86,7 +86,7 @@ const EditableProjectTitle = ({
           </span>
           <div className="flex items-center h-full">
             <button
-              className="ml-4 flex p-px px-2 gap-2 bg-ch-purple-400 bg-opacity-30 hover:bg-opacity-80 rounded-sm border border-ch-purple-400"
+              className="ml-4 grid grid-flow-col-dense p-px px-2 gap-2 bg-ch-purple-400 bg-opacity-30 hover:bg-opacity-80 rounded-sm border border-ch-purple-400"
               id="rename-button"
               onClick={() =>
                 updateProject({ variables: { id, input: { title: newTitle } } })

app/web/src/components/EditorMenu/EditorMenu.tsx

@@ -29,7 +29,7 @@ const EditorMenu = () => {
         <div className=" text-ch-gray-760 bg-ch-gray-300 cursor-grab px-2 h-full flex items-center">
           <Svg name="drag-grid" className="w-4 p-px" />
         </div>
-        <div className="flex gap-6 px-5">
+        <div className="grid grid-flow-col-dense gap-6 px-5">
           <FileDropdown
             handleRender={onRender}
             handleStlDownload={handleStlDownload}

app/web/src/components/EmojiReaction/EmojiReaction.tsx

@@ -59,9 +59,9 @@ const EmojiReaction = ({
       <div
         className={getActiveClasses('relative overflow-hidden pt-1', className)}
       >
-        <div className="z-10 flex items-center gap-4 h-10">
+        <div className="z-10 flex items-center h-10">
           <div
-            className="h-full w-10"
+            className="h-full w-10 mr-4"
             aria-describedby={popoverId}
             onClick={togglePopover}
           >

app/web/src/components/IdeHeader/IdeHeader.tsx

@@ -67,7 +67,7 @@ const IdeHeader = ({
     <div className="h-16 w-full bg-ch-gray-900 flex justify-between items-center text-lg">
       {_projectId ? (
         <div className="h-full text-gray-300 flex items-center">
-          <span className="bg-ch-gray-700 h-full flex items-center gap-2 px-4">
+          <span className="bg-ch-gray-700 h-full grid grid-flow-col-dense items-center gap-2 px-4">
             <Gravatar
               image={project?.user?.image || projectOwnerImage}
               className="w-10"
@@ -91,7 +91,7 @@ const IdeHeader = ({
       ) : (
         <div />
       )}
-      <div className="text-gray-200 flex gap-4 mr-4 items-center">
+      <div className="text-gray-200 grid grid-flow-col-dense gap-4 mr-4 items-center">
         {canEdit && !projectTitle && (
           <CaptureButton
             canEdit={canEdit}

app/web/src/components/ProjectProfile/ProjectProfile.tsx

@@ -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">
         {keyName}
         {canEdit &&
           (isEditable ? (
             <button
-              className="ml-4 flex p-px px-2 gap-2 bg-ch-purple-400 bg-opacity-30 hover:bg-opacity-80 rounded-sm border border-ch-purple-400"
+              className="ml-4 grid grid-flow-col-dense p-px px-2 gap-2 bg-ch-purple-400 bg-opacity-30 hover:bg-opacity-80 rounded-sm border border-ch-purple-400"
               id="rename-button"
               onClick={onEdit}
             >
@@ -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">
               <h3 className="text-5xl capitalize text-ch-gray-300">
                 {project?.title.replace(/-/g, ' ')}
               </h3>
@@ -181,7 +181,7 @@ const ProjectProfile = ({
                   />
                 </div>
               </KeyValue>
-              <div className="flex gap-6">
+              <div className="grid grid-flow-col-dense gap-6">
                 <KeyValue keyName="Created on">
                   {new Date(project?.createdAt).toDateString()}
                 </KeyValue>

app/web/src/components/SocialCardCell/SocialCardCell.tsx

@@ -100,7 +100,7 @@ export const Success = ({
         className="h-24 grid bg-ch-gray-900 relative"
         style={{ gridTemplateColumns: '7fr 5fr' }}
       >
-        <div className="flex items-center justify-center gap-16">
+        <div className="grid grid-flow-col-dense items-center justify-center gap-16">
           {[
             {
               svg: 'reactions',
@@ -113,7 +113,7 @@ export const Success = ({
               count: 0,
             },
           ].map(({ svg, title, count }, index) => (
-            <div className="flex gap-4" key={index}>
+            <div className="grid grid-flow-col-dense gap-4" key={index}>
               <Svg className="w-10" name={svg} />
               <div className="flex flex-col">
                 <div className="text-3xl">{count}</div>