From 1d1f62e38e0b40e783732647e1fddd780a884db7 Mon Sep 17 00:00:00 2001
From: Kurt Hutten <k.hutten@protonmail.ch>
Date: Wed, 11 Aug 2021 19:27:08 +1000
Subject: [PATCH 1/2] Fix safari flexbox/gap issue with grid

related to #435
---
 app/web/src/components/CadPackage/CadPackage.tsx          | 2 +-
 app/web/src/components/Customizer/Customizer.tsx          | 2 +-
 .../EditableProjecTitle/EditableProjecTitle.tsx           | 2 +-
 app/web/src/components/EditorMenu/EditorMenu.tsx          | 2 +-
 app/web/src/components/EmojiReaction/EmojiReaction.tsx    | 4 ++--
 app/web/src/components/IdeHeader/IdeHeader.tsx            | 4 ++--
 app/web/src/components/ProjectProfile/ProjectProfile.tsx  | 8 ++++----
 app/web/src/components/SocialCardCell/SocialCardCell.tsx  | 4 ++--
 8 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/app/web/src/components/CadPackage/CadPackage.tsx b/app/web/src/components/CadPackage/CadPackage.tsx
index 19c3a7c..4354690 100644
--- a/app/web/src/components/CadPackage/CadPackage.tsx
+++ b/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
       }
diff --git a/app/web/src/components/Customizer/Customizer.tsx b/app/web/src/components/Customizer/Customizer.tsx
index d418538..ced655e 100644
--- a/app/web/src/components/Customizer/Customizer.tsx
+++ b/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"
diff --git a/app/web/src/components/EditableProjecTitle/EditableProjecTitle.tsx b/app/web/src/components/EditableProjecTitle/EditableProjecTitle.tsx
index 1f6e42d..8d36642 100644
--- a/app/web/src/components/EditableProjecTitle/EditableProjecTitle.tsx
+++ b/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 } } })
diff --git a/app/web/src/components/EditorMenu/EditorMenu.tsx b/app/web/src/components/EditorMenu/EditorMenu.tsx
index e382a5c..f406c38 100644
--- a/app/web/src/components/EditorMenu/EditorMenu.tsx
+++ b/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}
diff --git a/app/web/src/components/EmojiReaction/EmojiReaction.tsx b/app/web/src/components/EmojiReaction/EmojiReaction.tsx
index 14a1625..98ef1a3 100644
--- a/app/web/src/components/EmojiReaction/EmojiReaction.tsx
+++ b/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}
           >
diff --git a/app/web/src/components/IdeHeader/IdeHeader.tsx b/app/web/src/components/IdeHeader/IdeHeader.tsx
index b196b04..bd61ea6 100644
--- a/app/web/src/components/IdeHeader/IdeHeader.tsx
+++ b/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}
diff --git a/app/web/src/components/ProjectProfile/ProjectProfile.tsx b/app/web/src/components/ProjectProfile/ProjectProfile.tsx
index 05cf20d..4a4899f 100644
--- a/app/web/src/components/ProjectProfile/ProjectProfile.tsx
+++ b/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>
diff --git a/app/web/src/components/SocialCardCell/SocialCardCell.tsx b/app/web/src/components/SocialCardCell/SocialCardCell.tsx
index ded726f..151bef7 100644
--- a/app/web/src/components/SocialCardCell/SocialCardCell.tsx
+++ b/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>

From 000bf4c027add9675c1082c3a8f3cbe309a18f34 Mon Sep 17 00:00:00 2001
From: Kurt Hutten <k.hutten@protonmail.ch>
Date: Wed, 11 Aug 2021 20:14:03 +1000
Subject: [PATCH 2/2] fix hight issue on details page

---
 .../ProjectProfile/ProjectProfile.tsx         | 256 +++++++++---------
 1 file changed, 129 insertions(+), 127 deletions(-)

diff --git a/app/web/src/components/ProjectProfile/ProjectProfile.tsx b/app/web/src/components/ProjectProfile/ProjectProfile.tsx
index 4a4899f..9f378eb 100644
--- a/app/web/src/components/ProjectProfile/ProjectProfile.tsx
+++ b/app/web/src/components/ProjectProfile/ProjectProfile.tsx
@@ -128,146 +128,148 @@ const ProjectProfile = ({
             projectId={project?.id}
           />
         </div>
-        <div className="relative flex-grow">
-          <div className="grid grid-cols-1 md:auto-cols-preview-layout grid-flow-row-dense absolute inset-0">
+        <div className="relative flex-grow h-full">
+          <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 />
             </div>
 
             {/* Side panel */}
-            <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>
-              <div className="flex items-center text-gray-100">
-                <span className="pr-4">Built with</span>
-                <CadPackage
-                  cadPackage={project?.cadPackage}
-                  className="px-3 py-2 rounded"
-                />
-              </div>
-              <KeyValue
-                keyName="Description"
-                hide={!project?.description && !canEdit}
-                canEdit={canEdit}
-                onEdit={() => {
-                  if (!isEditable) {
-                    setIsEditable(true)
-                  } else {
-                    onEditSaveClick()
-                    setIsEditable(false)
-                  }
-                }}
-                isEditable={isEditable}
-              >
-                <div
-                  id="description-wrap"
-                  name="description"
-                  className={
-                    'markdown-overrides rounded shadow-md bg-white pl-6 pb-2 mt-2' +
-                    (isEditable ? ' min-h-md' : '')
-                  }
-                  onClick={(e) =>
-                    e?.target?.id === 'description-wrap' &&
-                    editorRef?.current?.focusAtEnd()
-                  }
-                >
-                  <Editor
-                    ref={editorRef}
-                    defaultValue={project?.description || ''}
-                    readOnly={!isEditable}
-                    onChange={onDescriptionChange}
+            <div className="bg-ch-gray-760 font-fira-sans px-20 pt-12 overflow-y-auto">
+              <div className="grid grid-flow-row-dense gap-6">
+                <h3 className="text-5xl capitalize text-ch-gray-300">
+                  {project?.title.replace(/-/g, ' ')}
+                </h3>
+                <div className="flex items-center text-gray-100">
+                  <span className="pr-4">Built with</span>
+                  <CadPackage
+                    cadPackage={project?.cadPackage}
+                    className="px-3 py-2 rounded"
                   />
                 </div>
-              </KeyValue>
-              <div className="grid grid-flow-col-dense gap-6">
-                <KeyValue keyName="Created on">
-                  {new Date(project?.createdAt).toDateString()}
+                <KeyValue
+                  keyName="Description"
+                  hide={!project?.description && !canEdit}
+                  canEdit={canEdit}
+                  onEdit={() => {
+                    if (!isEditable) {
+                      setIsEditable(true)
+                    } else {
+                      onEditSaveClick()
+                      setIsEditable(false)
+                    }
+                  }}
+                  isEditable={isEditable}
+                >
+                  <div
+                    id="description-wrap"
+                    name="description"
+                    className={
+                      'markdown-overrides rounded shadow-md bg-white pl-6 pb-2 mt-2' +
+                      (isEditable ? ' min-h-md' : '')
+                    }
+                    onClick={(e) =>
+                      e?.target?.id === 'description-wrap' &&
+                      editorRef?.current?.focusAtEnd()
+                    }
+                  >
+                    <Editor
+                      ref={editorRef}
+                      defaultValue={project?.description || ''}
+                      readOnly={!isEditable}
+                      onChange={onDescriptionChange}
+                    />
+                  </div>
                 </KeyValue>
-                <KeyValue keyName="Updated on">
-                  {new Date(project?.updatedAt).toDateString()}
+                <div className="grid grid-flow-col-dense gap-6">
+                  <KeyValue keyName="Created on">
+                    {new Date(project?.createdAt).toDateString()}
+                  </KeyValue>
+                  <KeyValue keyName="Updated on">
+                    {new Date(project?.updatedAt).toDateString()}
+                  </KeyValue>
+                </div>
+                <KeyValue keyName="Reactions">
+                  <EmojiReaction
+                    emotes={emotes}
+                    userEmotes={userEmotes}
+                    onEmote={onReaction}
+                    onShowProjectReactions={() => setIsReactionsModalOpen(true)}
+                  />
                 </KeyValue>
-              </div>
-              <KeyValue keyName="Reactions">
-                <EmojiReaction
-                  emotes={emotes}
-                  userEmotes={userEmotes}
-                  onEmote={onReaction}
-                  onShowProjectReactions={() => setIsReactionsModalOpen(true)}
-                />
-              </KeyValue>
-              <KeyValue keyName="Comments" hide={!currentUser}>
-                {!isEditable && (
-                  <>
-                    {currentUser && (
-                      <>
-                        <div className="pt-1">
-                          <textarea
-                            className="w-full h-32 rounded shadow-inner outline-none resize-none p-3 bg-ch-gray-600 placeholder-ch-gray-500 font-fira-sans"
-                            placeholder="Have a question about this model, or a helpful tip about how to improve it? Remember, be nice!"
-                            value={comment}
-                            onChange={({ target }) => setComment(target.value)}
-                          />
-                        </div>
-                        <Button
-                          className={getActiveClasses(
-                            'ml-auto hover:bg-opacity-100 bg-ch-pink-800 bg-opacity-30 mt-4 mb-6 text-ch-gray-300',
-                            { 'bg-indigo-200': currentUser }
-                          )}
-                          shouldAnimateHover
-                          disabled={!currentUser}
-                          iconName={''}
-                          onClick={onCommentClear}
-                        >
-                          Comment
-                        </Button>
-                      </>
-                    )}
-                    <ul>
-                      {project?.Comment.map(({ text, user, id, createdAt }) => (
-                        <li key={id} className="mb-5">
-                          <div className="flex justify-between">
-                            <Link
-                              className="flex items-center"
-                              to={routes.user({ userName: user?.userName })}
-                            >
-                              <Gravatar
-                                image={user?.image}
-                                className="w-10 h-10 mr-4"
-                              />
-                              {user?.userName}
-                            </Link>
-                            <div className="font-fira-code text-ch-blue-600 flex items-center">
-                              {new Date(createdAt).toDateString()}
+                <KeyValue keyName="Comments" hide={!currentUser}>
+                  {!isEditable && (
+                    <>
+                      {currentUser && (
+                        <>
+                          <div className="pt-1">
+                            <textarea
+                              className="w-full h-32 rounded shadow-inner outline-none resize-none p-3 bg-ch-gray-600 placeholder-ch-gray-500 font-fira-sans"
+                              placeholder="Have a question about this model, or a helpful tip about how to improve it? Remember, be nice!"
+                              value={comment}
+                              onChange={({ target }) => setComment(target.value)}
+                            />
+                          </div>
+                          <Button
+                            className={getActiveClasses(
+                              'ml-auto hover:bg-opacity-100 bg-ch-pink-800 bg-opacity-30 mt-4 mb-6 text-ch-gray-300',
+                              { 'bg-indigo-200': currentUser }
+                            )}
+                            shouldAnimateHover
+                            disabled={!currentUser}
+                            iconName={''}
+                            onClick={onCommentClear}
+                          >
+                            Comment
+                          </Button>
+                        </>
+                      )}
+                      <ul>
+                        {project?.Comment.map(({ text, user, id, createdAt }) => (
+                          <li key={id} className="mb-5">
+                            <div className="flex justify-between">
+                              <Link
+                                className="flex items-center"
+                                to={routes.user({ userName: user?.userName })}
+                              >
+                                <Gravatar
+                                  image={user?.image}
+                                  className="w-10 h-10 mr-4"
+                                />
+                                {user?.userName}
+                              </Link>
+                              <div className="font-fira-code text-ch-blue-600 flex items-center">
+                                {new Date(createdAt).toDateString()}
+                              </div>
                             </div>
-                          </div>
-                          <div className="ml-5 border-l-2 pl-5 my-3 border-ch-gray-300 text-ch-gray-300">
-                            {text}
-                          </div>
-                        </li>
-                      ))}
-                    </ul>
+                            <div className="ml-5 border-l-2 pl-5 my-3 border-ch-gray-300 text-ch-gray-300">
+                              {text}
+                            </div>
+                          </li>
+                        ))}
+                      </ul>
+                    </>
+                  )}
+                </KeyValue>
+                {canEdit && (
+                  <>
+                    <h4 className="mt-10 text-red-600">Danger Zone</h4>
+                    <Button
+                      className={getActiveClasses(
+                        'mr-auto bg-red-500 mb-6 text-ch-gray-300',
+                        { 'bg-indigo-200': currentUser }
+                      )}
+                      shouldAnimateHover
+                      disabled={!currentUser}
+                      iconName={'trash'}
+                      onClick={() => setIsConfirmDialogOpen(true)}
+                    >
+                      Delete Project
+                    </Button>
                   </>
                 )}
-              </KeyValue>
-              {canEdit && (
-                <>
-                  <h4 className="mt-10 text-red-600">Danger Zone</h4>
-                  <Button
-                    className={getActiveClasses(
-                      'mr-auto bg-red-500 mb-6 text-ch-gray-300',
-                      { 'bg-indigo-200': currentUser }
-                    )}
-                    shouldAnimateHover
-                    disabled={!currentUser}
-                    iconName={'trash'}
-                    onClick={() => setIsConfirmDialogOpen(true)}
-                  >
-                    Delete Project
-                  </Button>
-                </>
-              )}
+              </div>
             </div>
           </div>
         </div>