Fraser commited on
Commit
f12c994
·
1 Parent(s): 94b421f
src/lib/components/Piclets/PicletDetail.svelte CHANGED
@@ -46,7 +46,8 @@
46
  }
47
  </script>
48
 
49
- <div class="detail-page">
 
50
  <div class="navigation-bar">
51
  <button class="back-btn" onclick={onClose}>
52
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -223,16 +224,32 @@
223
  {/if}
224
  </div>
225
  </div>
 
226
  </div>
227
 
228
  <style>
229
- .detail-page {
230
  position: fixed;
231
- inset: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
232
  background: #f2f2f7;
233
- z-index: 2000;
234
  display: flex;
235
  flex-direction: column;
 
 
236
  }
237
 
238
  /* Navigation Bar */
 
46
  }
47
  </script>
48
 
49
+ <div class="detail-backdrop">
50
+ <div class="detail-page">
51
  <div class="navigation-bar">
52
  <button class="back-btn" onclick={onClose}>
53
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
224
  {/if}
225
  </div>
226
  </div>
227
+ </div>
228
  </div>
229
 
230
  <style>
231
+ .detail-backdrop {
232
  position: fixed;
233
+ top: 0;
234
+ left: 0;
235
+ right: 0;
236
+ bottom: 0;
237
+ z-index: 9998;
238
+ background: rgba(0, 0, 0, 0.5);
239
+ }
240
+
241
+ .detail-page {
242
+ position: absolute;
243
+ top: 0;
244
+ left: 0;
245
+ right: 0;
246
+ bottom: 0;
247
  background: #f2f2f7;
248
+ z-index: 9999;
249
  display: flex;
250
  flex-direction: column;
251
+ transform: translateZ(0);
252
+ -webkit-transform: translateZ(0);
253
  }
254
 
255
  /* Navigation Bar */