fix(web/doc): document's editor-top-bar layout on small screens (#111)

* fix(web/doc): document editor top bar layout on small screns * chore(release): bump versions - [email protected]
lharti · Nov 13, 2024 · 94afba3 · 94afba3
1 parent 8e32a45
commit 94afba3
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 82 deletions.
diff --git a/apps/jsonthing-web/CHANGELOG.md b/apps/jsonthing-web/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.5.4](https://github.com/lharti/jsonthing/compare/[email protected]@0.5.4) (2024-11-13)
+
+
+### Bug Fixes
+
+* **web/doc:** document editor top bar layout on small screns ([3aab0c5](https://github.com/lharti/jsonthing/commit/3aab0c583e77781747d0799c76b450d135ba982c))
+
+
+
+
+
 ## [0.5.3](https://github.com/lharti/jsonthing/compare/[email protected]@0.5.3) (2024-11-13)
 
 

diff --git a/apps/jsonthing-web/package.json b/apps/jsonthing-web/package.json
@@ -1,6 +1,6 @@
 {
     "name": "jsonthing-web",
-    "version": "0.5.3",
+    "version": "0.5.4",
     "private": true,
     "scripts": {
         "dev": "next dev --turbo",

diff --git a/apps/jsonthing-web/src/components/DocEditor/DocEditor.spec.tsx b/apps/jsonthing-web/src/components/DocEditor/DocEditor.spec.tsx
@@ -54,10 +54,10 @@ describe('<DocEditor />', () => {
         expect(container).toMatchInlineSnapshot(`
             <div>
               <div
-                class="flex flex-col"
+                class="flex flex-col space-y-2"
               >
                 <div
-                  class="mb-2 flex items-end justify-between"
+                  class="flex flex-wrap items-end justify-between"
                 >
                   <h1>
                     INITIAL_TITLE
@@ -94,10 +94,10 @@ describe('<DocEditor />', () => {
         expect(container).toMatchInlineSnapshot(`
             <div>
               <div
-                class="flex flex-col"
+                class="flex flex-col space-y-2"
               >
                 <div
-                  class="mb-2 flex items-end justify-between"
+                  class="flex flex-wrap items-end justify-between"
                 >
                   <h1>
                     INITIAL_TITLE
@@ -249,6 +249,8 @@ describe('<DocEditor />', () => {
             value: 'true',
             onChange: expect.any(Function),
             disabled: false,
+
+            className: 'ml-auto',
         })
     })
 

diff --git a/apps/jsonthing-web/src/components/DocEditor/DocEditor.tsx b/apps/jsonthing-web/src/components/DocEditor/DocEditor.tsx
@@ -42,14 +42,15 @@ export const DocEditor: React.FC<DocEditorProps> = ({
     }, [editorContent])
 
     return (
-        <div className={cn(`flex flex-col`, className)}>
-            <div className="mb-2 flex items-end justify-between">
+        <div className={cn(`flex flex-col space-y-2`, className)}>
+            <div className="flex flex-wrap items-end justify-between">
                 <DocTitleEditor initialTitle={initialTitle} docId={docId} />
 
                 <DocEditorActionBar
                     value={editorContent}
                     docId={docId}
                     disabled={!!lintError}
+                    className="ml-auto"
                     onChange={newValue => setEditorContent(newValue)}
                 />
             </div>

diff --git a/apps/jsonthing-web/src/components/DocTitleEditor/DocTitleEditor.spec.tsx b/apps/jsonthing-web/src/components/DocTitleEditor/DocTitleEditor.spec.tsx
@@ -33,13 +33,9 @@ describe('<DocTitleEditor />', () => {
         expect(container).toMatchInlineSnapshot(`
             <div>
               <div
-                class="flex items-center"
+                id="EditableHeading"
               >
-                <div
-                  id="EditableHeading"
-                >
-                  INITIAL_TITLE
-                </div>
+                INITIAL_TITLE
               </div>
             </div>
         `)

diff --git a/apps/jsonthing-web/src/components/DocTitleEditor/DocTitleEditor.tsx b/apps/jsonthing-web/src/components/DocTitleEditor/DocTitleEditor.tsx
@@ -25,11 +25,9 @@ export const DocTitleEditor: React.FC<DocTitleEditorProps> = ({
     }
 
     return (
-        <div className="flex items-center">
-            <EditableHeading
-                initialValue={initialTitle}
-                onChange={newValue => updateTitle(newValue)}
-            />
-        </div>
+        <EditableHeading
+            initialValue={initialTitle}
+            onChange={newValue => updateTitle(newValue)}
+        />
     )
 }
diff --git a/apps/jsonthing-web/src/components/ui/EditableHeading/EditableHeading.tsx b/apps/jsonthing-web/src/components/ui/EditableHeading/EditableHeading.tsx
@@ -53,7 +53,7 @@ export const EditableHeading: React.FC<EditableHeadingProps> = ({
     const isEditMode = uiMode === UIMode.EDIT
 
     return (
-        <>
+        <div className="inline-flex">
             <h1
                 contentEditable
                 suppressContentEditableWarning
@@ -87,6 +87,6 @@ export const EditableHeading: React.FC<EditableHeadingProps> = ({
             >
                 {isEditMode ? <IconCheck /> : <IconPencil />}
             </Button>
-        </>
+        </div>
     )
 }
diff --git a/...onthing-web/src/components/ui/EditableHeading/__snapshots__/EditableHeading.spec.tsx.snap b/...onthing-web/src/components/ui/EditableHeading/__snapshots__/EditableHeading.spec.tsx.snap
@@ -2,83 +2,91 @@
 
 exports[`<EditableHeading /> should render edit ui mode: EditableHeading - Edit mode 1`] = `
 <div>
-  <h1
-    class="
+  <div
+    class="inline-flex"
+  >
+    <h1
+      class="
                   cursor-pointer text-3xl font-bold outline outline-2
                   outline-transparent
 
                   focus:cursor-auto focus:rounded-sm focus:outline-blue-300
                 "
-    contenteditable="true"
-    role="input"
-    spellcheck="false"
-  >
-    TEXT_VALUE
-  </h1>
-  <button
-    aria-label="edit title"
-    class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors dark:focus-visible:ring-gray-300 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50 hover:bg-gray-100 hover:text-gray-900 h-9 ml-2 p-1"
-    role="button"
-  >
-    <svg
-      class="tabler-icon tabler-icon-check "
-      fill="none"
-      height="24"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
-      viewBox="0 0 24 24"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
+      contenteditable="true"
+      role="input"
+      spellcheck="false"
+    >
+      TEXT_VALUE
+    </h1>
+    <button
+      aria-label="edit title"
+      class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors dark:focus-visible:ring-gray-300 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50 hover:bg-gray-100 hover:text-gray-900 h-9 ml-2 p-1"
+      role="button"
     >
-      <path
-        d="M5 12l5 5l10 -10"
-      />
-    </svg>
-  </button>
+      <svg
+        class="tabler-icon tabler-icon-check "
+        fill="none"
+        height="24"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M5 12l5 5l10 -10"
+        />
+      </svg>
+    </button>
+  </div>
 </div>
 `;
 
 exports[`<EditableHeading /> should render with view ui mode by default: EditableHeading - View mode 1`] = `
 <div>
-  <h1
-    class="
+  <div
+    class="inline-flex"
+  >
+    <h1
+      class="
                   cursor-pointer text-3xl font-bold outline outline-2
                   outline-transparent
 
                   focus:cursor-auto focus:rounded-sm focus:outline-blue-300
                 "
-    contenteditable="true"
-    role="heading"
-    spellcheck="false"
-  >
-    TEXT_VALUE
-  </h1>
-  <button
-    aria-label="edit title"
-    class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors dark:focus-visible:ring-gray-300 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50 hover:bg-gray-100 hover:text-gray-900 h-9 ml-2 p-1"
-    role="button"
-  >
-    <svg
-      class="tabler-icon tabler-icon-pencil "
-      fill="none"
-      height="24"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
-      viewBox="0 0 24 24"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
+      contenteditable="true"
+      role="heading"
+      spellcheck="false"
+    >
+      TEXT_VALUE
+    </h1>
+    <button
+      aria-label="edit title"
+      class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors dark:focus-visible:ring-gray-300 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50 hover:bg-gray-100 hover:text-gray-900 h-9 ml-2 p-1"
+      role="button"
     >
-      <path
-        d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"
-      />
-      <path
-        d="M13.5 6.5l4 4"
-      />
-    </svg>
-  </button>
+      <svg
+        class="tabler-icon tabler-icon-pencil "
+        fill="none"
+        height="24"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"
+        />
+        <path
+          d="M13.5 6.5l4 4"
+        />
+      </svg>
+    </button>
+  </div>
 </div>
 `;