zyc/video-shuoshan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

revert(admin): 撤掉 sticky 翻页 — 用户反馈 sticky 让内容在按钮后透视,不对
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 7m10s
Details

Browse Source 
sticky bottom: 0 的语义是"natural 位置在视口底之下时贴底,否则正常坐落"。
当 .content 滚动容器下方还有内容时,翻页按钮浮在视口底部,
表格行从它身后滚过 — 视觉上"翻页按钮下面又有表格内容"非常违和。

恢复成普通 .pagination + padding-bottom 兜底,
依赖批次 I 的根因三件套(100dvh + min-height: 0)解决 Safari 翻页被工具栏遮挡:
- 100dvh 保证 .layout 高度 = 用户实际可见区(不被 Safari 工具栏吃掉)
- min-height: 0 保证 .content 内部能正常 overflow-y: auto 滚动
- padding-bottom: 8px 给按钮一点缓冲

用户期望就是"滚动条能滚到最底,翻页按钮可见可点",而不是"翻页按钮固定不动"。

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
seaislee1209 2026-05-12 21:42:36 +08:00
parent f77d30a4e6
commit c54fdda0e8
4 changed files with 4 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/pages/AuditLogsPage.module.css
View File

@ -43,15 +43,7 @@
.skeletonCell { height: 16px; background: var(--color-border-card); border-radius: 4px; animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.pagination {
display: flex; justify-content: space-between; align-items: center;
/* sticky 贴底:翻页按钮始终可见 */
position: sticky; bottom: 0;
margin-top: 16px;
padding: 8px 0 8px;
background: var(--color-bg-page);
z-index: 10;
}
.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-bottom: 8px; }
.pageInfo { color: var(--color-text-secondary); font-size: 13px; }
.pageButtons { display: flex; gap: 4px; }
.pageButtons button {

10
web/src/pages/LoginRecordsPage.module.css
View File

@ -35,15 +35,7 @@
.skeletonCell { height: 16px; background: var(--color-border-card); border-radius: 4px; animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.pagination {
display: flex; justify-content: space-between; align-items: center;
/* sticky 贴底:翻页按钮始终可见 */
position: sticky; bottom: 0;
margin-top: 16px;
padding: 8px 0 8px;
background: var(--color-bg-page);
z-index: 10;
}
.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-bottom: 8px; }
.pageInfo { color: var(--color-text-secondary); font-size: 13px; }
.pageButtons { display: flex; gap: 4px; }
.pageButtons button {

10
web/src/pages/RecordsPage.module.css
View File

@ -57,15 +57,7 @@
.skeletonCell { height: 16px; background: var(--color-border-card); border-radius: 4px; animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.pagination {
display: flex; justify-content: space-between; align-items: center;
/* sticky 贴底:翻页按钮始终可见,不用滚到最底才能点 */
position: sticky; bottom: 0;
margin-top: 16px;
padding: 8px 0 8px;
background: var(--color-bg-page);
z-index: 10;
}
.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-bottom: 8px; }
.pageInfo { color: var(--color-text-secondary); font-size: 13px; }
.pageButtons { display: flex; gap: 4px; }
.pageButtons button {

10
web/src/pages/UsersPage.module.css
View File

@ -51,15 +51,7 @@
.skeletonCell { height: 16px; background: var(--color-border-card); border-radius: 4px; animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.pagination {
display: flex; justify-content: space-between; align-items: center;
/* sticky 贴底:翻页按钮始终可见 */
position: sticky; bottom: 0;
margin-top: 16px;
padding: 8px 0 8px;
background: var(--color-bg-page);
z-index: 10;
}
.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-bottom: 8px; }
.pageInfo { color: var(--color-text-secondary); font-size: 13px; }
.pageButtons { display: flex; gap: 4px; }
.pageButtons button {