(expandField = true)}
    class="rounded-md text-sm {expandField
      ? 'min-h-24 h-auto border-[#1C4090]'
      : 'h-12  border-gray-500'} overflow-hidden sm:hover:border-[#1C4090] sm:hover:ring-1 transition sm:ease-out placeholder-gray-300 w-full bg-[#27272A] text-white border border-1 ring-2 sm:ring-0 ring-[#1C4090]"
    {placeholder}
    value={inputValue}
    bind:this={ref}
    on:input={handleInput}
  />

{#if expandField}
    <div class="flex flex-col">
      <div class="flex flex-row items-center justify-end mt-4">

<label
          on:click={handleCancel}
          class="inline-flex justify-end items-center py-2.5 px-4 text-xs font-semibold text-white text-black rounded-md sm:hover:bg-red-700 cursor-pointer mr-3"
        >
          Cancel
        </label>
        {#if isLoaded}
          <label
            on:click={handleComment}
            class="inline-flex justify-end items-center bg-[#fff] sm:hover:bg-gray-300 duration-100 transition {inputValue.length !==
            0
              ? 'opacity-100 cursor-pointer'
              : 'opacity-60'}  py-2.5 px-4 text-xs font-semibold text-center text-black rounded-md focus:ring-purple-300"
          >
            Post
          </label>
        {:else}
          <label
            class="cursor-not-allowed inline-flex justify-end items-center bg-[#fff] bg-opacity-40 py-2.5 px-4 text-xs font-medium text-center text-white rounded-md focus:ring-purple-300"
          >
            Post
          </label>
        {/if}
      </div>

{#if imageInput.length !== 0}
        <div class="relative mr-auto -mt-8">
          <label
            on:click={() => (imageInput = "")}
            class="text-black w-7 h-7 text-center m-auto flex justify-center items-center rounded-full bg-white absolute top-0 -right-2"
            >✕</label
          >
          <img
            class="object-contain max-w-full max-h-[150px] mx-auto"
            alt="Image preview"
            id="image-preview"
          />
        </div>
      {/if}
    </div>
  {/if}
</div>