shorten names

src/routes/ModelDetails.svelte

@@ -103,7 +103,7 @@
             {#each scenes as scene}
                 <button class="grid-item" on:click={() => onSceneClick(scene)}>
                     <img src={scene.thumbnail} alt={scene.name} class="thumbnail" />
-                    <div class="title">{scene.name}</div>
+                    <div class="title">{scene.name.length > 16 ? `${scene.name.slice(0, 16)}...` : scene.name}</div>
                 </button>
             {/each}
         </div>

src/routes/Viewer.svelte

@@ -77,7 +77,11 @@
     <button class="title-button" on:click={loadScene}>
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         <!-- svelte-ignore a11y-no-static-element-interactions -->
-        <h2><span class="muted" on:click={onBack}>{modelName}/</span>{scene.name}</h2>
+        <h2>
+            <span class="muted" on:click={onBack}>{modelName}/</span>{scene.name.length > 16
+                ? `${scene.name.slice(0, 16)}...`
+                : scene.name}
+        </h2>
     </button>
     <div class="desktop-spacer" />
 </div>