fix(candwnd): allow candidate text to wrap at 600px max-width

Use min(600px, max-content) and block-level text so long CJK
candidates wrap reliably in horizontal and vertical layouts.
This commit is contained in:
fanlusky committed 2026-07-27 16:13:43 +08:00
1 parent 2ff8f72c13
commit 21691cbcc1
6 files changed
+81 -26

No files matched your search

@@ -17,7 +17,8 @@
}
.containerParent {
width: max-content;
width: fit-content;
max-width: 600px;
}
.container {
@@ -29,9 +30,13 @@
border-radius: 6px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
min-width: 7em;
/* Avoid wrapping in a still-narrow WebView before the host is resized. */
width: max-content;
white-space: nowrap;
/* Cap long candidates (e.g. nsdd). Host resizes before paint to avoid flash. */
width: min(600px, max-content);
max-width: 600px;
box-sizing: border-box;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
user-select: none;
border: 1.5px solid #9b9b9b2e;
}
@@ -66,6 +71,9 @@
position: relative;
display: inline-block;
vertical-align: top;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.first-row-wrapper {
@@ -94,8 +102,11 @@
padding-left: 5px;
padding-right: 5px;
color: #e9e8e8;
display: flex;
align-items: baseline;
display: block;
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
.cand .text {
@@ -17,7 +17,8 @@
}
.containerParent {
width: max-content;
width: fit-content;
max-width: 600px;
}
.container {
@@ -29,9 +30,13 @@
border-radius: 6px;
box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.12);
min-width: 7em;
/* Avoid wrapping in a still-narrow WebView before the host is resized. */
width: max-content;
white-space: nowrap;
/* Cap long candidates (e.g. nsdd). Host resizes before paint to avoid flash. */
width: min(600px, max-content);
max-width: 600px;
box-sizing: border-box;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
user-select: none;
border: 1.5px solid rgba(0, 0, 0, 0.12);
}
@@ -66,6 +71,9 @@
position: relative;
display: inline-block;
vertical-align: top;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.first-row-wrapper {
@@ -94,8 +102,11 @@
padding-left: 5px;
padding-right: 5px;
color: #1a1a1a;
display: flex;
align-items: baseline;
display: block;
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
.cand .text {
@@ -18,6 +18,7 @@
.containerParent {
width: fit-content;
max-width: 600px;
}
.container {
@@ -29,7 +30,11 @@
border-radius: 6px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
min-width: 7em;
width: fit-content;
width: min(600px, fit-content);
max-width: 600px;
box-sizing: border-box;
overflow-wrap: anywhere;
word-break: break-word;
user-select: none;
border: 1.5px solid #9b9b9b2e;
}
@@ -84,8 +89,11 @@
.text {
padding-left: 8px;
color: #e9e8e8;
display: flex;
align-items: baseline;
display: block;
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
.cand .text {
@@ -18,6 +18,7 @@
.containerParent {
width: fit-content;
max-width: 600px;
}
.container {
@@ -29,7 +30,11 @@
border-radius: 6px;
box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.12);
min-width: 7em;
width: fit-content;
width: min(600px, fit-content);
max-width: 600px;
box-sizing: border-box;
overflow-wrap: anywhere;
word-break: break-word;
user-select: none;
border: 1.5px solid rgba(0, 0, 0, 0.12);
}
@@ -84,8 +89,11 @@
.text {
padding-left: 8px;
color: #1a1a1a;
display: flex;
align-items: baseline;
display: block;
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
.cand .text {
@@ -7,9 +7,13 @@
border-radius: 6px;
box-shadow: var(--cand-shadow);
min-width: 7em;
/* Match candwnd: keep a single horizontal row even in a narrow preview viewport. */
width: max-content;
white-space: nowrap;
/* Match candwnd: grow with content, wrap past 600 DIP. */
width: min(600px, max-content);
max-width: 600px;
box-sizing: border-box;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
user-select: none;
border: 1.5px solid var(--cand-border);
}
@@ -43,6 +47,9 @@
position: relative;
display: inline-block;
vertical-align: top;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.first-row-wrapper {
@@ -71,8 +78,11 @@
padding-left: 5px;
padding-right: 5px;
color: var(--cand-text);
display: flex;
align-items: baseline;
display: block;
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
.cand .text {
@@ -7,7 +7,11 @@
border-radius: 6px;
box-shadow: var(--cand-shadow);
min-width: 7em;
width: fit-content;
width: min(600px, fit-content);
max-width: 600px;
box-sizing: border-box;
overflow-wrap: anywhere;
word-break: break-word;
user-select: none;
border: 1.5px solid var(--cand-border);
}
@@ -63,8 +67,11 @@
.text {
padding-left: 8px;
color: var(--cand-text);
display: flex;
align-items: baseline;
display: block;
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
.cand .text {