fix(ui): 修正 mini 页滚动——补 flex 链条 min-height:0,滚动交给内容框

上一版只把 body 锁成 overflow:hidden,既没提供可滚动内层,也没让框收缩,
等于把超出视口的内容"藏起来"。用户直接指出:应当让框收缩到一屏刚好撑满。

根因:Dashy 的 DOM 链条是
  .minimal-section-inner ← .item-group-container ← .minimal-home ← div ← div ← body
中间两层无名 wrapper 没有 min-height:0,flex 项无法压缩 → 容器被内容撑高,
既撑出页面(已锁住)又不产生内部滚动。

本版:
- body(:has(.minimal-home)) 锁 100dvh,并把中间两层 wrapper 也设为
  flex:1 + min-height:0 + max-height:100% + overflow:hidden(补齐链条)
- 滚动显式交给 .minimal-home > .item-group-container(flex:1 + min-height:0 +
  overflow-y:auto + padding-bottom 84px 给底部悬浮件/备案号留净空)
- .minimal-section-inner 不再自成滚动区(overflow:visible),避免双层滚动条
This commit is contained in:
HomeDash Bot
2026-09-12 16:18:00 +08:00
parent 536c7e09ec
commit 26924ca719

View File

@ -713,39 +713,56 @@ html[data-theme] .minimal-headings-wrap .tab-scroll-btn {
border-radius: 12px !important;
}
/* ── mini 页:视口高度自适应 + 框内滚动 ──
实测问题:.minimal-section-inner 是 max-height:none/overflow:visible,
内容一多就把整页撑高,滚动落在页面上;而不同分组内容多少不同,
于是"有的页面能滚、有的不能",观感割裂。
做法:body 锁死视口高度不滚,页面主体改为纵向 flex,
内容框 flex:1 + min-height:0 + overflow-y:auto —— 滚动统一发生在框内。
仅作用于含 .minimal-home 的页面(用 :has 限定),不影响首页/工作区。 */
/* ── mini 页:一屏刚好撑满 + 框内滚动(修正版)──
上一版只锁了 body 的 overflow,却没有可滚动的内层,也没让框收缩:
结果内容被"藏起来"。根因是 flex 链条上有两层无名 wrapper(div ← div)
没有 min-height:0,容器因此无法压缩、只会被内容撑高。
这一版把链条每一环都补齐,并把滚动显式交给内容框。 */
html[data-theme] body:has(.minimal-home) {
height: 100dvh !important;
max-height: 100dvh !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}
/* flex 链条上的中间 wrapper(Dashy 的 #app / 包装 div)必须允许压缩 */
html[data-theme] body:has(.minimal-home) > div,
html[data-theme] body:has(.minimal-home) > div > div {
flex: 1 1 auto !important;
min-height: 0 !important;
max-height: 100% !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
html[data-theme] .minimal-home {
flex: 1 1 auto !important;
min-height: 0 !important;
max-height: 100% !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
/* 内容外框与内框都给到"可压缩 + 可滚动",并给底部悬浮件/备案号留出净空 */
html[data-theme] .minimal-home > .item-group-container,
html[data-theme] .minimal-home .minimal-section-inner {
/* 内容外框:吃掉剩余高度,自己滚 */
html[data-theme] .minimal-home > .item-group-container {
flex: 1 1 auto !important;
min-height: 0 !important;
max-height: 100% !important;
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior: contain !important;
-webkit-overflow-scrolling: touch;
padding-bottom: 84px !important;
scrollbar-width: thin;
}
/* 极窄/极矮屏:内容框内滚动尤其重要,额外收紧上下留白 */
/* 内框不再自成滚动区(避免双层滚动条),只负责高度不满时撑开 */
html[data-theme] .minimal-home > .item-group-container > .minimal-section-inner {
min-height: 0 !important;
overflow: visible !important;
padding-bottom: 0 !important;
}
@media (max-height: 560px) {
html[data-theme] .minimal-home .minimal-section-inner { padding-bottom: 64px !important; }
html[data-theme] .minimal-home > .item-group-container { padding-bottom: 64px !important; }
}
html[data-theme] .minimal-section-inner {