diff --git a/cypress/e2e/generic/public-comment.cy.js b/cypress/e2e/generic/public-comment.cy.js
index 22e5e1d..fb2e036 100644
--- a/cypress/e2e/generic/public-comment.cy.js
+++ b/cypress/e2e/generic/public-comment.cy.js
@@ -43,9 +43,13 @@ describe("Guest comment", { testIsolation: false }, () => {
     const loggedInEditText = generateRandomCopy()
     cy.intercept("PUT", ".netlify/functions/comment/*").as("putComment")
     cy.get(".overflow-menu-button").first().click()
-    cy.get(".comment-edit-button").first().click()
-    cy.get("form.comment-form .comment-field").clear().type(loggedInEditText)
-    cy.get("form.comment-form .comment-update-button").click()
+    cy.get(".comment-edit-button").click()
+    cy.get("li.comment.is-open form.comment-form .comment-field")
+      .clear()
+      .type(loggedInEditText)
+    cy.get(
+      "li.comment.is-open form.comment-form .comment-update-button"
+    ).click()
     cy.wait("@putComment").its("response.statusCode").should("eq", 204) // 204
     cy.contains("article.comment-body p", loggedInEditText).should("exist")
   })
@@ -65,13 +69,19 @@ describe("Guest comment", { testIsolation: false }, () => {
       } else req.reply()
     }).as("putComment")
     cy.get(".overflow-menu-button").first().click()
-    cy.get(".comment-edit-button").first().click()
+    cy.get(".comment-edit-button").click()
+    cy.get("li.comment.is-open form.comment-form .comment-field")
+      .clear()
+      .type(errorText)
+    cy.get(
+      "li.comment.is-open form.comment-form .comment-update-button"
+    ).click()
 
-    cy.get("form.comment-form .comment-field").clear().type(errorText)
-    cy.get("form.comment-form .comment-update-button").click()
     cy.wait("@putComment")
 
-    cy.get("form.comment-form .comment-update-button").click()
+    cy.get(
+      "li.comment.is-open form.comment-form .comment-update-button"
+    ).click()
 
     cy.wait("@putComment").then(interception => {
       expect(interception.response.statusCode).to.equal(204)
@@ -102,10 +112,12 @@ describe("Guest comment", { testIsolation: false }, () => {
   })
 
   it("Reply to a comment as a logged-in guest", () => {
-    cy.get("button.comment-reply-button").first().as("replyButton")
-    cy.get("@replyButton").closest("article.comment-body").as("commentBody")
-    cy.get("@replyButton").click()
-    cy.get("form.guest-login-form").should("not.exist")
+    const commentText = generateRandomCopy()
+    cy.get("button.comment-reply-button").first().click()
+    // cy.wait(500)
+    cy.get("textarea.comment-field").should("have.length", 1).type(commentText)
+    cy.get("button.comment-submit-button").click()
+    cy.get("article.comment-body p").contains(commentText).should("exist")
   })
 
   it("Can log out", () => {
diff --git a/cypress/e2e/generic/rtl.cy.js b/cypress/e2e/generic/rtl.cy.js
index 1072f6d..26b52e1 100644
--- a/cypress/e2e/generic/rtl.cy.js
+++ b/cypress/e2e/generic/rtl.cy.js
@@ -114,9 +114,10 @@ describe("Simple Comment right-to-left rendering", () => {
       })
     })
     cy.visit("/")
-    cy.get("li#http-localhost-7070_hvh-21s6-c1m6p")
-      .first()
-      .should("have.class", "is-rtl")
+    cy.get("li#http-localhost-7070_hvh-21s6-c1m6p").should(
+      "have.class",
+      "is-rtl"
+    )
   })
 
   it("properly renders Arabic", () => {
@@ -143,9 +144,9 @@ describe("Simple Comment right-to-left rendering", () => {
       })
     })
     cy.visit("/")
-    cy.get("li#http-localhost-7070_hvh-21s6-c1m6p")
-      .children("article.comment-body")
-      .first()
-      .should("not.have.class", "is-rtl")
+    cy.get("li#http-localhost-7070_hvh-21s6-c1m6p").should(
+      "not.have.class",
+      "is-rtl"
+    )
   })
 })
diff --git a/src/components/CommentDisplay.svelte b/src/components/CommentDisplay.svelte
index 870870c..2c91aba 100644
--- a/src/components/CommentDisplay.svelte
+++ b/src/components/CommentDisplay.svelte
@@ -16,10 +16,10 @@
   import {
     ClosedCaptionAlt as ReplyIcon,
     Edit as EditIcon,
-    OverflowMenuHorizontal,
-    ChevronLeft,
+    OverflowMenuHorizontal as OverflowMenuIcon,
+    ChevronLeft as ChevronLeftIcon,
   } from "carbon-icons-svelte"
-  import { linear } from "svelte/easing"
+  import { open } from "../lib/svelte-transitions"
 
   export let comment: (Comment & { isNew?: true }) | undefined = undefined
   export let showReply: string
@@ -92,30 +92,6 @@
 
     if (showReply !== comment.id) isOverflowToggled = false
   }
-
-  const toggleExpand = (
-    _overflowMenu: HTMLElement,
-    params?: {
-      delay: number
-      duration: number
-      easing: (t: number) => number
-      direction: "in" | "out" | "both"
-    }
-  ) => {
-    const { delay = 0, duration = 250, easing = linear } = params
-
-    const css = (t: number, u: number) => {
-      const maxWidth = (1 - u) * 100
-      return `max-width: ${maxWidth}%`
-    }
-
-    return {
-      delay,
-      duration,
-      easing,
-      css,
-    }
-  }
 </script>
 
 <li
@@ -178,7 +154,7 @@
       {#if isEditing}
         <CommentEdit
           placeholder="Your edit"
-          autofocus={isRoot ? true : false}
+          autofocus
           commentId={comment.id}
           commentText={comment.text}
           onCancel={onCancelEditClick}
@@ -192,7 +168,7 @@
       {#if showReply === comment.id && !isEditing}
         <CommentInput
           placeholder="Your reply"
-          autofocus={isRoot ? true : false}
+          autofocus
           commentId={comment.id}
           {currentUser}
           onCancel={onCloseCommentInput}
@@ -211,7 +187,7 @@
             <ReplyIcon size={20} /> Reply
           </button>
           {#if isOverflowToggled}
-            <div class="overflow-menu" in:toggleExpand out:toggleExpand>
+            <div class="overflow-menu" transition:open>
               {#if canEdit(comment)}
                 <button
                   on:click={() => onEditClick(comment)}
@@ -233,7 +209,7 @@
               {/if}
 
               <button on:click={() => (isOverflowToggled = false)}
-                ><ChevronLeft size={20} /></button
+                ><ChevronLeftIcon size={20} /></button
               >
             </div>
           {:else if canEdit(comment) || canDelete(comment)}
@@ -241,7 +217,7 @@
               on:click={() => (isOverflowToggled = true)}
               class="overflow-menu-button"
               title="Click '...' to see more options for this comment"
-              ><OverflowMenuHorizontal size={20} /></button
+              ><OverflowMenuIcon size={20} /></button
             >
           {/if}
         </div>
diff --git a/src/components/CommentInput.svelte b/src/components/CommentInput.svelte
index 11f793a..4aa2f2f 100644
--- a/src/components/CommentInput.svelte
+++ b/src/components/CommentInput.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   import Login from "./Login.svelte"
   import SkeletonCommentInput from "./low-level/SkeletonCommentInput.svelte"
+  import { AddComment as AddCommentIcon } from "carbon-icons-svelte"
+  import { CloseOutline as CancelIcon } from "carbon-icons-svelte"
   import type {
     Comment,
     CommentId,
@@ -15,13 +17,16 @@
   import { postComment } from "../apiClient"
   import { useMachine } from "@xstate/svelte"
   import { LoginTab } from "../lib/simple-comment-types"
+  import { open } from "../lib/svelte-transitions"
   export let currentUser: User | undefined
   export let commentId: CommentId
   export let onCancel = null
   export let autofocus = false
   export let placeholder = "Your comment"
+  export let isRoot = false
 
   let commentText = ""
+  let hasEnteredComment = false
   let buttonCopy = "Add comment"
   let loginStateValue
   let textareaRef
@@ -165,6 +170,22 @@
     textAreaHeight = `${blockSize}px`
   })
 
+  const getMaxHeight = () => {
+    if (currentUser) return "10rem"
+    switch (loginTabSelect) {
+      case LoginTab.guest:
+        return "33rem"
+      case LoginTab.signup:
+        return "55rem"
+      case LoginTab.login:
+        return "33rem"
+
+      default:
+        console.error(`Unknown loginTabSelect: ${loginTabSelect}`)
+        return "10rem"
+    }
+  }
+
   onMount(() => {
     resizeObserver.observe(textareaRef)
   })
@@ -193,6 +214,7 @@
   ).includes($state.value)
 
   $: buttonCopy = getButtonCopy(loginTabSelect, commentText, loginStateValue)
+  $: hasEnteredComment = !!commentText?.length
 </script>
 
 <SkeletonCommentInput
@@ -200,7 +222,13 @@
   height={textAreaHeight}
   isHidden={!isProcessing}
 />
-<form class="comment-form" class:is-hidden={isProcessing} on:submit={onSubmit}>
+<form
+  class="comment-form"
+  class:is-hidden={isProcessing}
+  on:submit={onSubmit}
+  in:open={{ axis: "y", duration: 250, max: getMaxHeight() }}
+  out:open={{ axis: "y", delay: 250, duration: 125, max: getMaxHeight() }}
+>
   <!-- svelte-ignore a11y-autofocus -->
   <textarea
     class="comment-field"
@@ -211,15 +239,17 @@
     {placeholder}
     dir="auto"
   />
-  <Login {currentUser} />
-  {#if !currentUser || (commentText && commentText.length)}
-    <div class="button-row">
+  <Login {currentUser} isVisible={hasEnteredComment} />
+  {#if !currentUser || hasEnteredComment}
+    <div class="button-row comment-footer">
+      <button class="comment-submit-button" type="submit"
+        ><AddCommentIcon size={20} />{buttonCopy}</button
+      >
       {#if onCancel !== null}
         <button class="comment-cancel-button" type="button" on:click={onCancel}
-          >Cancel</button
+          ><CancelIcon size={20} />Cancel</button
         >
       {/if}
-      <button class="comment-submit-button" type="submit">{buttonCopy}</button>
     </div>
   {/if}
 </form>
diff --git a/src/components/DiscussionDisplay.svelte b/src/components/DiscussionDisplay.svelte
index 076c5c8..77ef3e3 100644
--- a/src/components/DiscussionDisplay.svelte
+++ b/src/components/DiscussionDisplay.svelte
@@ -186,6 +186,7 @@
   {#if showReply === discussionId}
     <CommentInput
       commentId={discussionId}
+      isRoot={true}
       {currentUser}
       on:posted={onCommentPosted}
     />
diff --git a/src/components/Login.svelte b/src/components/Login.svelte
index feae4bd..7960ead 100644
--- a/src/components/Login.svelte
+++ b/src/components/Login.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { fly } from "svelte/transition"
+  import { fade, fly } from "svelte/transition"
   import type {
     AdminSafeUser,
     ServerResponse,
@@ -56,6 +56,7 @@
   const USER_ID_HELPER_TEXT = "This is the user id that uniquely identifies you"
 
   export let currentUser: User | undefined
+  export let isVisible = false
 
   let self: User = currentUser
   let isError = false
@@ -682,7 +683,12 @@
   }
 </script>
 
-<section class="simple-comment-login" class:is-loading={!isLoaded}>
+<section
+  class="simple-comment-login"
+  class:is-loading={!isLoaded}
+  class:is-visible={isVisible}
+  transition:fade
+>
   {#if !self}
     <div class="selection-tabs button-row">
       <button
diff --git a/src/components/SelfDisplay.svelte b/src/components/SelfDisplay.svelte
index 481767a..9a4272e 100644
--- a/src/components/SelfDisplay.svelte
+++ b/src/components/SelfDisplay.svelte
@@ -20,9 +20,8 @@
 
   $: {
     isProcessing =
-      loginStateValue === "verifying" ||
-      loginStateValue === "loggingIn" ||
-      loginStateValue === "loggingOut"
+      // loginStateValue === "verifying" ||
+      loginStateValue === "loggingIn" || loginStateValue === "loggingOut"
   }
   const onLogoutClick = (e: Event) => {
     e.preventDefault()
diff --git a/src/lib/svelte-transitions.ts b/src/lib/svelte-transitions.ts
new file mode 100644
index 0000000..8230fea
--- /dev/null
+++ b/src/lib/svelte-transitions.ts
@@ -0,0 +1,40 @@
+import { linear } from "svelte/easing"
+
+export const open = (
+  _element: HTMLElement,
+  params?: {
+    delay?: number
+    duration?: number
+    easing?: (t: number) => number
+    direction?: "in" | "out" | "both"
+    axis?: "x" | "y"
+    max?: string
+  }
+) => {
+  const {
+    delay = 0,
+    duration = 250,
+    easing = linear,
+    axis = "x",
+    max = "100%",
+  } = params ?? {}
+
+  const [_, magnitude, unit] = max.match(/^(\d+\.?\d*)([a-zA-Z%]*)$/) ?? [
+    undefined,
+    "100",
+    "%",
+  ]
+
+  const css = (t: number, u: number) => {
+    const percent = (1 - u) * parseFloat(magnitude)
+    const dimension = axis === "x" ? "width" : "height"
+    return `max-${dimension}: ${percent}${unit}`
+  }
+
+  return {
+    delay,
+    duration,
+    easing,
+    css,
+  }
+}
diff --git a/src/scss/simple-comment-style.scss b/src/scss/simple-comment-style.scss
index cad0c0b..007384a 100644
--- a/src/scss/simple-comment-style.scss
+++ b/src/scss/simple-comment-style.scss
@@ -301,7 +301,10 @@ $highlight-text-color: color.scale(
     margin-bottom: 5rem;
 
     form.comment-form {
+      overflow: hidden;
+      will-change: max-height;
       margin-bottom: 3rem;
+
       .comment-update-button {
         width: 12.5rem;
       }
@@ -537,7 +540,7 @@ $highlight-text-color: color.scale(
           }
         }
         &.is-rtl {
-          .comment-body {
+          > .comment-body {
             text-align: right;
           }
         }
diff --git a/src/tests/frontend/frontend-utilities.test.ts b/src/tests/frontend/frontend-utilities.test.ts
index 78a34c6..f6854bf 100644
--- a/src/tests/frontend/frontend-utilities.test.ts
+++ b/src/tests/frontend/frontend-utilities.test.ts
@@ -1,8 +1,12 @@
 /**
  * @jest-environment jsdom
  */
-import { longFormatDate, threadComments } from "../../frontend-utilities"
 import { Comment, Discussion } from "../../lib/simple-comment-types"
+import {
+  longFormatDate,
+  shortFormatDate,
+  threadComments,
+} from "../../frontend-utilities"
 import { mockCommentTree, mockTopic } from "../mockData"
 import { performance } from "perf_hooks"
 import { debounceFunc } from "../../frontend-utilities"
@@ -148,45 +152,156 @@ describe("debounce", () => {
     setTimeout(endTest, 500)
   })
 })
+describe("shortFormatDate", () => {
+  const thisYearLocalesArr = [
+    ["af-ZA", "15 Jul."],
+    ["ar-SA", "٢٧ ذو الحجة"],
+    ["de-DE", "15. Juli"],
+    ["el-GR", "15 Ιουλ"],
+    ["en-AU", "15 July"],
+    ["en-GB", "15 Jul"],
+    ["en-IN", "15 Jul"],
+    ["en-US", "Jul 15"],
+    ["es-ES", "15 jul"],
+    ["es-MX", "15 jul"],
+    ["fi-FI", "15. heinäk."],
+    ["fr-CA", "15 juill."],
+    ["fr-FR", "15 juil."],
+    ["he-IL", "15 ביולי"],
+    ["hi-IN", "15 जुल॰"],
+    ["id-ID", "15 Jul"],
+    ["it-IT", "15 lug"],
+    ["ja-JP", "7月15日"],
+    ["ko-KR", "7월 15일"],
+    ["nl-NL", "15 jul."],
+    ["pl-PL", "15 lip"],
+    ["pt-BR", "15 de jul."],
+    ["pt-PT", "15/07"],
+    ["ru-RU", "15 июл."],
+    ["sv-SE", "15 juli"],
+    ["th-TH", "15 ก.ค."],
+    ["tr-TR", "15 Tem"],
+    ["vi-VN", "15 thg 7"],
+    ["zh-CN", "7月15日"],
+    ["zh-TW", "7月15日"],
+  ]
+
+  const year2022LocalesArr = [
+    ["af-ZA", "15 Jul. 2022"],
+    ["ar-SA", "١٦ ذو الحجة ١٤٤٣ هـ"],
+    ["de-DE", "15. Juli 2022"],
+    ["el-GR", "15 Ιουλ 2022"],
+    ["en-AU", "15 July 2022"],
+    ["en-GB", "15 Jul 2022"],
+    ["en-IN", "15 Jul 2022"],
+    ["en-US", "Jul 15, 2022"],
+    ["es-ES", "15 jul 2022"],
+    ["es-MX", "15 jul 2022"],
+    ["fi-FI", "15. heinäk. 2022"],
+    ["fr-CA", "15 juill. 2022"],
+    ["fr-FR", "15 juil. 2022"],
+    ["he-IL", "15 ביולי 2022"],
+    ["hi-IN", "15 जुल॰ 2022"],
+    ["id-ID", "15 Jul 2022"],
+    ["it-IT", "15 lug 2022"],
+    ["ja-JP", "2022年7月15日"],
+    ["ko-KR", "2022년 7월 15일"],
+    ["nl-NL", "15 jul. 2022"],
+    ["pl-PL", "15 lip 2022"],
+    ["pt-BR", "15 de jul. de 2022"],
+    ["pt-PT", "15/07/2022"],
+    ["ru-RU", "15 июл. 2022 г."],
+    ["sv-SE", "15 juli 2022"],
+    ["th-TH", "15 ก.ค. 2565"],
+    ["tr-TR", "15 Tem 2022"],
+    ["vi-VN", "15 thg 7, 2022"],
+    ["zh-CN", "2022年7月15日"],
+    ["zh-TW", "2022年7月15日"],
+  ]
+
+  it.each(thisYearLocalesArr)(
+    "should format this year %s date to %s",
+    (locale, expectedFormat) => {
+      const thisYear = new Date().getFullYear()
+      const date = new Date(thisYear, 6, 15, 13, 31) // July 15, 2023 13:31
+      const result = shortFormatDate(date, locale)
+      expect(result).toBe(expectedFormat)
+    }
+  )
+
+  it.each(year2022LocalesArr)(
+    "should format year 2022 %s date to %s",
+    (locale, expectedFormat) => {
+      const date = new Date(2022, 6, 15, 13, 31) // July 15, 2023 13:31
+      const result = shortFormatDate(date, locale)
+      expect(result).toBe(expectedFormat)
+    }
+  )
+
+  it("formats today as time only", () => {
+    const now = new Date()
+    expect(shortFormatDate(now, "en-US")).toMatch(/1?\d:\d{2} [A|P]M/)
+  })
+
+  it("should handle undefined date", () => {
+    const result = shortFormatDate(undefined)
+    expect(result).toBe("unknown")
+  })
+
+  it.each(thisYearLocalesArr)(
+    "should handle string date %s date to %s",
+    (locale, expectedFormat) => {
+      const date = "2023-07-15T13:31:00" // July 15, 2023 13:31 UTC
+      const result = shortFormatDate(date, locale)
+      expect(result).toBe(expectedFormat)
+    }
+  )
+
+  it("should handle invalid date", () => {
+    const date = "invalid date"
+    const result = shortFormatDate(date)
+    expect(result).toBe("Invalid Date")
+  })
+})
 
 describe("longFormatDate", () => {
   const localesArr = [
-    ["af-ZA", "23 Julie 2023 13:31"],
-    ["ar-SA", "٥ محرم ١٤٤٥ هـ في ١:٣١ م"],
-    ["de-DE", "23. Juli 2023 um 13:31"],
-    ["el-GR", "23 Ιουλίου 2023 - 1:31 μ.μ."],
-    ["en-AU", "23 July 2023 at 1:31 pm"],
-    ["en-GB", "23 July 2023 at 13:31"],
-    ["en-IN", "23 July 2023 at 1:31 pm"],
-    ["en-US", "July 23, 2023 at 1:31 PM"],
-    ["es-ES", "23 de julio de 2023, 13:31"],
-    ["es-MX", "23 de julio de 2023, 13:31"],
-    ["fi-FI", "23. heinäkuuta 2023 klo 13.31"],
-    ["fr-CA", "23 juillet 2023 à 13 h 31"],
-    ["fr-FR", "23 juillet 2023 à 13:31"],
-    ["he-IL", "23 ביולי 2023 בשעה 13:31"],
-    ["hi-IN", "23 जुलाई 2023 को 1:31 pm"],
-    ["id-ID", "23 Juli 2023 13.31"],
-    ["it-IT", "23 luglio 2023 13:31"],
-    ["ja-JP", "2023年7月23日 13:31"],
-    ["ko-KR", "2023년 7월 23일 오후 1:31"],
-    ["nl-NL", "23 juli 2023 om 13:31"],
-    ["pl-PL", "23 lipca 2023 13:31"],
-    ["pt-BR", "23 de julho de 2023 13:31"],
-    ["pt-PT", "23 de julho de 2023 às 13:31"],
-    ["ru-RU", "23 июля 2023 г., 13:31"],
-    ["sv-SE", "23 juli 2023 13:31"],
-    ["th-TH", "23 กรกฎาคม 2566 13:31"],
-    ["tr-TR", "23 Temmuz 2023 13:31"],
-    ["vi-VN", "13:31 23 tháng 7, 2023"],
-    ["zh-CN", "2023年7月23日 13:31"],
-    ["zh-TW", "2023年7月23日 下午1:31"],
+    ["af-ZA", "15 Julie 2023 13:31"],
+    ["ar-SA", "٢٧ ذو الحجة ١٤٤٤ هـ في ١:٣١ م"],
+    ["de-DE", "15. Juli 2023 um 13:31"],
+    ["el-GR", "15 Ιουλίου 2023 - 1:31 μ.μ."],
+    ["en-AU", "15 July 2023 at 1:31 pm"],
+    ["en-GB", "15 July 2023 at 13:31"],
+    ["en-IN", "15 July 2023 at 1:31 pm"],
+    ["en-US", "July 15, 2023 at 1:31 PM"],
+    ["es-ES", "15 de julio de 2023, 13:31"],
+    ["es-MX", "15 de julio de 2023, 13:31"],
+    ["fi-FI", "15. heinäkuuta 2023 klo 13.31"],
+    ["fr-CA", "15 juillet 2023 à 13 h 31"],
+    ["fr-FR", "15 juillet 2023 à 13:31"],
+    ["he-IL", "15 ביולי 2023 בשעה 13:31"],
+    ["hi-IN", "15 जुलाई 2023 को 1:31 pm"],
+    ["id-ID", "15 Juli 2023 13.31"],
+    ["it-IT", "15 luglio 2023 13:31"],
+    ["ja-JP", "2023年7月15日 13:31"],
+    ["ko-KR", "2023년 7월 15일 오후 1:31"],
+    ["nl-NL", "15 juli 2023 om 13:31"],
+    ["pl-PL", "15 lipca 2023 13:31"],
+    ["pt-BR", "15 de julho de 2023 13:31"],
+    ["pt-PT", "15 de julho de 2023 às 13:31"],
+    ["ru-RU", "15 июля 2023 г., 13:31"],
+    ["sv-SE", "15 juli 2023 13:31"],
+    ["th-TH", "15 กรกฎาคม 2566 13:31"],
+    ["tr-TR", "15 Temmuz 2023 13:31"],
+    ["vi-VN", "13:31 15 tháng 7, 2023"],
+    ["zh-CN", "2023年7月15日 13:31"],
+    ["zh-TW", "2023年7月15日 下午1:31"],
   ]
 
   it.each(localesArr)(
     "should format %s date to %s",
     (locale, expectedFormat) => {
-      const date = new Date(2023, 6, 23, 13, 31) // July 23, 2023 13:31
+      const date = new Date(2023, 6, 15, 13, 31) // July 15, 2023 13:31
       const result = longFormatDate(date, locale)
       expect(result).toBe(expectedFormat)
     }
@@ -200,7 +315,7 @@ describe("longFormatDate", () => {
   it.each(localesArr)(
     "should handle string date %s date to %s",
     (locale, expectedFormat) => {
-      const date = "2023-07-23T13:31:00" // July 23, 2023 13:31 UTC
+      const date = "2023-07-15T13:31:00" // July 15, 2023 13:31 UTC
       const result = longFormatDate(date, locale)
       expect(result).toBe(expectedFormat)
     }