taozuqin/ST-Bionic-Memory-Ecology
1
0
Fork 0
mirror of https://github.com/Youzini-afk/ST-Bionic-Memory-Ecology.git synced 2026-05-15 14:20:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(notice): fix compact layout title truncated to 'ST...'

Browse Source 
Root cause: compact layout used width:fit-content on parent with
overflow:hidden + min-width:0 on __content flex child. In flex, min-width:0
allows the child to shrink to 0, and fit-content + overflow:hidden causes
the content to collapse completely, showing only 'ST...' for the title.

Fix: Replace width:fit-content with max-width on the compact parent so
the container can size naturally. Give __content flex:1 1 0% so it takes
all available space after icon/close button, letting the title fill that
space and ellipsis only when it genuinely overflows.
This commit is contained in:
Youzini-afk
2026-04-29 17:28:45 +08:00
parent abe983ffca
commit e4354e2d6d
1 changed files with 2 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
ui/notice.js
View File

@@ -69,28 +69,25 @@ function ensureStyle(doc) {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
width: fit-content; max-width: min(400px, calc(100vw - 28px));
max-width: 100%;
align-self: flex-end; align-self: flex-end;
padding: 10px; padding: 10px;
} }
.st-bme-notice__content { .st-bme-notice__content {
min-width: 0; min-width: 0;
flex: 1 1 0%;
transition: max-width 280ms cubic-bezier(0.22, 1, 0.36, 1), transition: max-width 280ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 220ms ease; opacity 220ms ease;
} }
.st-bme-notice[data-layout="normal"] .st-bme-notice__content { .st-bme-notice[data-layout="normal"] .st-bme-notice__content {
max-width: 360px;
overflow: hidden; overflow: hidden;
} }
.st-bme-notice[data-layout="compact"] .st-bme-notice__content { .st-bme-notice[data-layout="compact"] .st-bme-notice__content {
display: flex; display: flex;
align-items: center; align-items: center;
min-width: 0;
max-width: 320px;
overflow: hidden; overflow: hidden;
} }