decePubClient/Styles/touch.css

/* Touch screens.

   A phone's layout uses the width variants (max-md:, md:) at the call site; how big a thing is to a finger uses the
   pointer: the sizes here sit under @media (pointer: coarse), so a mouse matches none of them and desktop keeps
   daisyUI's sizes. The rules are plain CSS in Tailwind's utilities layer: like neo.css's @utility overrides they beat
   daisyUI's rules, which sit in sublayers of it, and they set daisyUI's own size variables where it has one.

   A target gets a 44px hit area (Apple's guideline, WCAG 2.5.5), which tests/e2e/Mobile measures. Buttons, tabs and
   fields are 44px tall; the extra small buttons and the badges that act stay 36px to the eye and reach 44px through a
   transparent ::after, so the rows that hold them leave 8px between them on touch (pointer-coarse:gap-2), or two hit
   areas would overlap. */
/* A small text link or button (a name, "edited") keeps its size to the eye and gets a 44px hit area, a transparent box
   centred on it, on touch only. Not for one that truncates its text: its overflow clips the box, so such a link takes
   padding instead (pointer-coarse:py-3.5). */
@utility touch-target {
	@media (pointer: coarse) {
		position: relative;

		&::after {
			content: "";
			position: absolute;
			left: 50%;
			top: 50%;
			width: max(100%, 2.75rem);
			height: max(100%, 2.75rem);
			translate: -50% -50%;
		}
	}
}

@layer utilities {
	/* At every width: a checkbox's, radio's or toggle's label wraps (daisyUI's .label never does, and a long one ran past
	   a phone's edge), and the control keeps its size beside it. */
	.label:has(> input[type=checkbox], > input[type=radio], > .toggle) {
		white-space: normal;
		text-align: start;

		& > input {
			flex-shrink: 0;
		}
	}

	@media (pointer: coarse) {
		/* Field text at 16px: iOS zooms into a focused field whose text is smaller, now that zooming is allowed. */
		:where(.input, .select, .textarea) {
			--font-size-min: 1rem;
		}

		.btn:not(.btn-xs, .btn-lg, .btn-xl) {
			--size: 2.75rem;
			min-width: 2.75rem;
		}

		.btn-sm {
			--fontsize: .875rem;
		}

		/* (the ::after is placed against the padding box, 34px inside a 1px border: 5px around it makes 44) */
		.btn-xs,
		:is(button, a).badge {
			--size: 2.25rem;
			min-width: 2.25rem;
			position: relative;

			&::after {
				content: "";
				position: absolute;
				inset: -5px;
			}
		}

		.btn-xs {
			--fontsize: .875rem;
		}

		:is(button, a).badge {
			padding-inline: .75rem;
		}

		.tabs {
			--tab-height: 2.75rem;
		}

		.tab {
			min-width: 2.75rem;
		}

		.input:not(.input-lg, .input-xl),
		.select:not(.select-lg, .select-xl) {
			--size: 2.75rem;
		}

		.checkbox,
		.radio {
			--size: 1.5rem;
		}

		.toggle {
			--size: 1.75rem;
		}

		.range {
			--range-thumb-size: 1.75rem;
		}

		.collapse-title,
		.label:has(> input[type=checkbox], > input[type=radio], > .toggle) {
			min-height: 2.75rem;
		}
	}
}