jianf/HomeAgent
1
0
Fork 0
mirror of https://gitcode.com/JianFeeeee/HomeAgent.git synced 2026-09-23 18:38:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(webui): 队列/管道列宽下限收到 100px，消掉「4 个 + 1 个」孤行

Browse Source 
118px 时容器 540px（小窗口侧栏展开的宽度）只放得下 4 列，第 5 个框
落到第二行且后面四个位置全空 —— 正是「看着空」的那种观感。
收到 100px 后 540px 也能一行放下 5 个；配套给 .rt-qmeta 加 wrap，
窄框里「登记/抢占」两枚迷你条换行而不是撑破框。

五档实测（1400/1100/900/700/480）：1400/1100/900/700 都是 5 框一行
（200/140/100/120px），480 为 3+2；均无横向溢出，框内元素无越界。
This commit is contained in:
JianFeeeee
2026-09-14 18:45:36 +08:00
parent f89e57a732
commit 0faf9fb4e8
1 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
internal/plugins/webui/dashboard.css
View File

@ -2353,9 +2353,10 @@
同一套视觉语言），深度用大字报出来，下面是可见的格槽。 */
.rt-queues {
display: grid;
/* 118px 而不是 150px：容器 640–740px（窄屏侧栏收起后就是这个宽度）时
5 个框仍能排成一行，不会出现「4 个 + 1 个」的孤行。 */
grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
/* 100px 而不是 150px：两块都要保证「5 个一行」。
否则容器 540px（小窗口侧栏展开时就是这个宽度）会排成「4 个 + 1 个」——
第二行四个空位，看着就是一块坑。宁可框窄一点，也不留孤行。 */
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 10px;
margin-bottom: 8px;
}
@ -2401,7 +2402,8 @@
.rt-qmeta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
gap: 4px 8px;
font-size: 10.5px;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
@ -2708,7 +2710,7 @@
.rt-pipe-row {
display: grid;
/* 与 .rt-queues 同一套列宽规则：两块的框宽、换行点保持一致 */
grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 10px;
margin: 2px 0 8px;
transition: opacity 0.3s var(--ease-out);