thepraandClaude Opus 5.5
0b237b1951
On a phone the card's action row was about 371px wide against a 228px text column, so the feed scrolled sideways and More and Expand fell off the screen. Below md the author's picture moves from its own column into the card's header, which gives the text, media and polls the whole width (288px at 360), and the actions are five equal cells: Reply, Boost, Favourite, React and More. Bookmark and the thread are entries in More there; the downvotes, the counts icon and Expand show from md. Counts are compacted on phones (1.2k, 12k, 1.2M, GenericExtensions.Compact). React and More open as sheets from the bottom of the screen, the reactions as a grid of four. The author's name and handle stack and are 14px, the place badge is narrower, and "edited" and the booster's name have 44px hit areas; the booster's name opens their profile in the app instead of their site. On touch the extra small buttons' text is 14px, and their hit area is a full 44px (the ::after sits against the padding box, inside the border). Desktop keeps its row. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw
112 lines
2.9 KiB
CSS
112 lines
2.9 KiB
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;
|
|
}
|
|
}
|
|
}
|