zammad/app/frontend/apps/mobile/form/theme/global/addFloatingTextareaLabel.ts

// Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/

import type { Classes } from '#shared/form/plugins/utils.ts'
import { clean, extendClasses } from '#shared/form/plugins/utils.ts'

/**
 * Textarea can be scrolled, so if we use "aboslute" positioning for label,
 * it will overlap with textarea content. But we still can't use regular solution,
 * becase the label text should be on the same row with the textarea, so we have a trick,
 * where we use "h-2", so it overlaps with the content, until the textarea is populated.
 */
export const addFloatingTextareaLabel = (classes: Classes = {}) => {
  return extendClasses(classes, {
    outer: clean(`floating-textarea relative px-2`),
    wrapper: 'relative',
    // text-base ensures there is no zoom when you click on the input on iOS
    input: clean(
      `w-full border-none bg-transparent text-base placeholder:text-transparent focus:outline-none`,
    ),
    label: clean(
      `formkit-populated:translate-y-0 formkit-populated:text-xs formkit-populated:opacity-75 flex h-2 origin-left translate-y-4 cursor-text items-end px-2 pt-5 text-base transition-all duration-100 ease-in-out`,
    ),
  })
}