Fix browser grid card sizing
- Reduce regular grid icon/thumbnail to 90px fixed - Cap compact grid columns at 100px max width - Compact thumbnails fill card width with aspect-ratio - Reduce grid gap and column min-width Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1858,16 +1858,16 @@
|
||||
/* Browser Grid */
|
||||
.browser-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
min-height: 200px;
|
||||
align-items: start;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
/* Compact Grid */
|
||||
.browser-grid.browser-grid-compact {
|
||||
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(80px, 100px));
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
@@ -2056,8 +2056,8 @@
|
||||
|
||||
/* Thumbnail Display */
|
||||
.browser-thumbnail {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
background: var(--bg-primary);
|
||||
@@ -2115,8 +2115,8 @@
|
||||
|
||||
/* File/Folder Icons */
|
||||
.browser-icon {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -2128,6 +2128,7 @@
|
||||
.browser-item-info {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.browser-item-name {
|
||||
@@ -2175,8 +2176,8 @@
|
||||
/* Thumbnail Wrapper & Play Overlay */
|
||||
.browser-thumb-wrapper {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -2212,8 +2213,8 @@
|
||||
|
||||
/* Compact grid overrides */
|
||||
.browser-grid-compact .browser-thumb-wrapper {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.browser-grid-compact .browser-play-overlay svg {
|
||||
|
||||
Reference in New Issue
Block a user