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:
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 {
|
||||
|
||||
Reference in new issue
Block a user