no more animation-delay

src/Modfiles.svelte

@@ -30,9 +30,11 @@
     position: relative;
     background-color: var(--fg, white);
     width: calc(100% + 20px);
+    max-width: calc(100% + 20px);
     left: -20px;
     height: 38px;
     display: flex;
+    flex-flow: row nowrap;
     align-items: center;
     justify-content: space-between;
     padding-left: 10px;
@@ -40,7 +42,8 @@
     color: #000;
   }
   .difficulties {
-    flex: auto 1 1;
+    flex: 1 1 0px;
+    min-width: 0;
     display: flex;
     align-items: center;
     justify-content: flex-start;
@@ -49,6 +52,8 @@
     display: flex;
     align-items: center;
     justify-content: flex-end;
+    flex: 0 0 auto;
+    max-width: 100%;
   }
   .buttonsreal a {
     font-size: 34px;
@@ -75,6 +80,11 @@
     white-space: nowrap;
   }
 
+  .difficultyrating {
+    flex: 0 0 auto;
+    max-width: 100%;
+  }
+
   .difficulty-expert {
 	  color: #8200a1;
   }
@@ -101,6 +111,12 @@
     font-size: medium;
     color: #333;
   }
+  .difficultyname {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    min-width: 0;
+  }
   .difficultyrating {
     font-weight: bold;
   }
@@ -144,7 +160,7 @@
 
 <span>
   {#each $files as file, i}
-    <div class="file" class:dark={file.flipColors} style="background: center / cover no-repeat url({file.imageUrl}); animation-delay: {i/12}s">
+    <div class="file" class:dark={file.flipColors} style="background: center / cover no-repeat url({file.imageUrl})">
       <div class="metadata">
         <div class="title"><b>{file.name}</b> {#if file.subtitle}<small>{file.subtitle}</small>{/if}</div>
         {#if file.pack}<small class="pack">from {file.pack}</small>{/if}