From 4492d069bb3ffccbf3463f81e0189c83d1045419 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Thu, 26 Aug 2021 23:03:31 +0200
Subject: [PATCH] improve demo styling

---
 demos/preview/Demo.vue |  6 +++---
 demos/vite.config.ts   | 13 ++++++++++++-
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/demos/preview/Demo.vue b/demos/preview/Demo.vue
index 3b2c987e..0aa42477 100644
--- a/demos/preview/Demo.vue
+++ b/demos/preview/Demo.vue
@@ -38,7 +38,7 @@
         <div class="flex overflow-x-auto">
           <div class="flex flex-auto px-4 border-b-2 border-gray-800">
             <button
-              class="inline-flex relative mr-4 py-2 pb-[calc(0.3rem + 2px)] mb-[-2px] border-b-2 border-transparent font-mono text-sm"
+              class="inline-flex relative mr-4 py-2 pb-[calc(0.3rem + 2px)] mb-[-2px] border-b-2 border-transparent font-mono text-sm whitespace-nowrap"
               :class="[!showDebug && currentFile.content === file.content
                 ? 'text-white border-white font-bold'
                 : 'text-gray-400'
@@ -74,10 +74,10 @@
         </div>
 
         <div class="flex justify-between px-4 py-2 text-md text-gray-400 border-t border-gray-800">
-          <a :href="currentIframeUrl">
+          <a class="flex-shrink min-w-0 overflow-ellipsis overflow-hidden whitespace-nowrap" :href="currentIframeUrl">
             {{ name }}/{{ currentTab }}
           </a>
-          <a :href="githubUrl" target="_blank">
+          <a class="whitespace-nowrap pl-4" :href="githubUrl" target="_blank">
             Edit on GitHub →
           </a>
         </div>
diff --git a/demos/vite.config.ts b/demos/vite.config.ts
index bbfcc7d2..b27085eb 100644
--- a/demos/vite.config.ts
+++ b/demos/vite.config.ts
@@ -124,7 +124,18 @@ export default defineConfig({
               }
             })
 
-          return `export default ${JSON.stringify(files)}`
+          const sortedFiles = files.sort(item => {
+            if (
+              item.name.split('/').length === 0
+              && basename(item.name).startsWith('index.')
+            ) {
+              return -1
+            }
+
+            return 1
+          })
+
+          return `export default ${JSON.stringify(sortedFiles)}`
         }
       },
     },