fix(web-ui): make miniapp cards fill grid tracks - #1912
Merged
Conversation
MiniAppCard had a fixed 360px width while GalleryGrid tracks stretch with minmax(360px, 1fr), so any slight window resize left large blank areas beside each card, and containers narrower than 360px overflowed. - MiniAppCard: width 100% so the grid track controls sizing - GalleryGrid: minmax(min(var(--gallery-grid-min), 100%), 1fr) so cards shrink instead of overflowing below the minimum card width
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
问题
小应用页的应用卡片写死了
width: 360px，而GalleryGrid的列轨道使用repeat(auto-fill, minmax(360px, 1fr))会随窗口拉伸。两者冲突导致窗口尺寸稍有变化时，卡片不跟随轨道变宽，页面出现大片空白；容器窄于 360px 时卡片还会横向溢出。修复
MiniAppCard.scss：卡片改为width: 100%; min-width: 0，宽度交给网格轨道控制，任意窗口宽度下填满所在列；删除 720px 断点下冗余的宽度覆盖。GalleryLayout.scss：网格列改为minmax(min(var(--gallery-grid-min), 100%), 1fr)，容器窄于最小卡宽时卡片收缩而非溢出，同时惠及所有使用GalleryGrid的页面。网格使用
auto-fill（保留空轨道），因此“已启动”区只有一个应用时卡片仍只占一列宽，不会被拉成全宽。两个 SCSS 文件已通过 sass 编译验证。