Fraser commited on
Commit
b29f3f6
·
1 Parent(s): d081d7a

improve piclets view

Browse files
src/lib/components/Pages/Pictuary.svelte CHANGED
@@ -226,14 +226,9 @@
226
  <!-- Discovered Section -->
227
  {#if discoveredPiclets.length > 0}
228
  <section class="discovered-section">
229
- <div class="section-header">
230
- <h2>Discovered ({discoveredPiclets.length})</h2>
231
- {#if discoveredPiclets.length > 10}
232
- <button class="view-all-btn">View All</button>
233
- {/if}
234
- </div>
235
- <div class="horizontal-scroll">
236
- {#each discoveredPiclets.slice(0, 10) as piclet}
237
  <PicletCard
238
  piclet={piclet}
239
  size={100}
@@ -397,6 +392,12 @@
397
  border-radius: 2px;
398
  }
399
 
 
 
 
 
 
 
400
  @keyframes spin {
401
  to { transform: rotate(360deg); }
402
  }
 
226
  <!-- Discovered Section -->
227
  {#if discoveredPiclets.length > 0}
228
  <section class="discovered-section">
229
+ <h2>Discovered ({discoveredPiclets.length})</h2>
230
+ <div class="discovered-grid">
231
+ {#each discoveredPiclets as piclet}
 
 
 
 
 
232
  <PicletCard
233
  piclet={piclet}
234
  size={100}
 
392
  border-radius: 2px;
393
  }
394
 
395
+ .discovered-grid {
396
+ display: grid;
397
+ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
398
+ gap: 12px;
399
+ }
400
+
401
  @keyframes spin {
402
  to { transform: rotate(360deg); }
403
  }