From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from gate001.proxmox.com (gate001.proxmox.com [IPv6:2a0f:8001:1:32::40]) by lore.proxmox.com (Postfix) with ESMTPS id 80B861FF0DD for ; Thu, 22 Oct 2026 19:43:44 +0200 (CEST) Received: from gate001.proxmox.com (localhost.localdomain [127.0.0.1]) by gate001.proxmox.com (Proxmox) with ESMTP id D48922160C; Thu, 22 Oct 2026 19:43:43 +0200 (CEST) From: Thomas Lamprecht To: yew-devel@lists.proxmox.com Subject: [PATCH yew-widget-toolkit-assets 1/3] material: give controls a fingertip-sized target on touch screens Date: Thu, 22 Oct 2026 19:41:00 +0200 Message-ID: <20261022174334.2286071-2-t.lamprecht@proxmox.com> X-Mailer: git-send-email 2.47.3 In-Reply-To: <20261022174334.2286071-1-t.lamprecht@proxmox.com> References: <20261022174334.2286071-1-t.lamprecht@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-Bm-Milter-Handled: 55990f41-d878-4baa-be0a-ee34c49e34d2 X-Bm-Transport-Timestamp: 1792691019550 X-SPAM-LEVEL: Spam detection results: 0 AWL 0.514 Adjusted score from AWL reputation of From: address DMARC_MISSING 0.1 Missing DMARC policy KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment (newer systems) RCVD_IN_DNSWL_MED -2.3 Sender listed at https://www.dnswl.org/, medium trust SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Message-ID-Hash: IG4U5URBO6AA6LUC7OKEVM6HIP5HKEDX X-Message-ID-Hash: IG4U5URBO6AA6LUC7OKEVM6HIP5HKEDX X-MailFrom: t.lamprecht@proxmox.com X-Mailman-Rule-Misses: dmarc-mitigation; no-senders; approved; loop; banned-address; emergency; member-moderation; nonmember-moderation; administrivia; implicit-dest; max-recipients; max-size; news-moderation; no-subject; digests; suspicious-header X-Mailman-Version: 3.3.10 Precedence: list List-Id: Yew framework devel list at Proxmox List-Help: List-Owner: List-Post: List-Subscribe: List-Unsubscribe: On phones and tablets, buttons, date-picker days, tabs and menu entries are smaller than a finger hits reliably. Where the browser reports a coarse primary pointer, buttons, date-picker items, tab links and menu entries are at least 44px in both directions, and floating action buttons stay square while growing to that size. The inputs and action icons of a dialog are at least 44px high, the action icons also 44px wide, and its checkboxes are drawn larger. Inputs, action icons and checkboxes outside a dialog keep their size, so dense lists and tables do not spread out. Calendar span bars default to 32px instead of about 22px; an application that sets its own bar height keeps it. 44px is a chosen minimum and is actually slightly below Material's 48px recommendation, which was IMO rather overly huge again and did not feel justified to me. The rules follow the primary pointer the browser reports, so a notebook with a touch screen that is used with a mouse usually keeps the denser sizes. The Material and the mobile theme share these rules, at every density. Signed-off-by: Thomas Lamprecht --- scss/material/_theme_post_material.scss | 68 +++++++++++++++++++++++++ 1 file changed, 68 insertions(+) diff --git a/scss/material/_theme_post_material.scss b/scss/material/_theme_post_material.scss index c88b055..0d99cf9 100644 --- a/scss/material/_theme_post_material.scss +++ b/scss/material/_theme_post_material.scss @@ -86,3 +86,71 @@ ul.pwt-menubar { border-top-left-radius: var(--pwt-shape-corner-large); border-top-right-radius: var(--pwt-shape-corner-large); } + +/// `@media (pointer: coarse)` +/// : enlarge selected controls when the primary pointer is coarse +/// +/// Follows the browser-reported primary pointer, not the last input device used. A hybrid device +/// can report either a fine or a coarse primary pointer, even with a mouse attached. +/// +/// - buttons and date-picker items have a chosen minimum of 44px in both dimensions +/// - floating action buttons grow to the same minimum and stay square +/// - tab links, menu entries, and menubar entries have the same minimum, with centered content +/// - inputs in a dialog are at least 44px high; dialog action icons are also at least 44px wide +/// - checkboxes in a dialog have a larger drawing at 1.5rem, not a 44px target +/// - calendar span bars default to 32px high; applications can override this +/// +/// These floors apply at every density in the Material and mobile themes. Inputs, action icons, +/// and checkboxes outside a dialog keep their size. This is not universal 44px target sizing. +/// +@media (pointer: coarse) { + .pwt-button, + dialog :is(.pwt-input, .pwt-action-icon), + .pwt-date-panel .pwt-date-panel-item { + min-height: 44px; + } + + .pwt-button, + dialog .pwt-action-icon, + .pwt-date-panel .pwt-date-panel-item { + min-width: 44px; + } + + // Keep labels centered when a minimum height exceeds the content height. + .pwt-button { + align-items: center; + } + + // A FAB sets its own height and minimum width, which the button floor above would replace. + .pwt-fab { + height: max(44px, #{$normal-fab-size}); + min-width: max(44px, #{$normal-fab-size}); + + &.pwt-fab-small { + height: max(44px, #{$small-fab-size}); + min-width: max(44px, #{$small-fab-size}); + } + } + + .pwt-date-panel .pwt-date-panel-item { + box-sizing: border-box; + } + + .pwt-nav-link, + ul.pwt-menu .pwt-menu-item, + ul.pwt-menubar .pwt-menubar-item { + min-width: 44px; + min-height: 44px; + box-sizing: border-box; + display: flex; + align-items: center; + } + + dialog .pwt-checkbox { + font-size: 1.5rem; + } + + .pwt-calendar { + --pwt-calendar-span-height: 32px; + } +} -- 2.47.3