mirror of
https://github.com/Ark0N/Codeman.git
synced 2026-10-20 09:09:35 +02:00
fix(ui): touch-sized notice buttons on any coarse pointer, no mid-word break in a Chinese title
A phone in landscape is wider than 599px, so the 44px targets now follow (pointer: coarse) instead of the width. A balanced title broke the zh-CN text inside 入侵; :lang(zh) keeps CJK runs whole and breaks at the title's spaces and colon. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
1 parent
82c34fba99
commit
613fc86d70
1 file changed
+18
-4
@@ -9835,6 +9835,13 @@ html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="cat
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
/* Chinese has no spaces, so a balanced title would break inside a word (遭入 / 侵).
|
||||
Break only at the spaces and punctuation the title has; overflow-wrap above still
|
||||
rescues a run that cannot fit. */
|
||||
:lang(zh) .security-notice-title {
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
.security-notice-body,
|
||||
.update-notice-text {
|
||||
margin: 0;
|
||||
@@ -9967,10 +9974,10 @@ html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="cat
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Phones: the full width minus the stack's 0.5rem gutters. Every button grows to fill its
|
||||
row (so one that wraps fills its own instead of sitting stray at the left) and is at least
|
||||
--touch-target-min tall; the × gets a touch-sized box too, its negative margin keeping the
|
||||
glyph where it sits on a desktop. */
|
||||
/* Phones: the full width minus the stack's 0.5rem gutters, and every button grows to fill
|
||||
its row (so one that wraps fills its own instead of sitting stray at the left). On a touch
|
||||
pointer, below, buttons are at least --touch-target-min tall and the × gets a touch-sized
|
||||
box, its negative margin keeping the glyph where it sits on a desktop. */
|
||||
@media (max-width: 599px) {
|
||||
.security-notice {
|
||||
width: calc(100vw - 1rem);
|
||||
@@ -9978,6 +9985,13 @@ html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="cat
|
||||
|
||||
.security-notice-actions > button {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Touch sizing follows the pointer, not the width: a phone turned to landscape is wider
|
||||
than 599px and still needs fingertip-sized targets. */
|
||||
@media (pointer: coarse) {
|
||||
.security-notice-actions > button {
|
||||
min-height: var(--touch-target-min);
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user