Ellipsis, text truncation handling, fixup text spacing with flexbox

src/App.css

@@ -4,7 +4,7 @@
 
 html,
 body {
-  @apply h-screen w-screen bg-zinc-600;
+  @apply h-screen w-screen bg-zinc-600 text-zinc-200;
 }
 
 @layer base {

src/App.tsx

@@ -3,7 +3,7 @@ import SaveSelector from "./views/SaveSelector";
 
 function App() {
   return (
-    <main class="h-[100vh] w-[100vw] bg-zinc-800 p-4 flex flex-col">
+    <main class="h-[100vh] w-[100vw] bg-zinc-800 px-4 py-2 flex flex-col">
       <SaveSelector />
     </main>
   );

src/views/SaveSelector.tsx

@@ -22,23 +22,23 @@ export default function SaveSelector() {
   return (
     <>
       <DragAndDrop className="mr-1.5 bg-red-500!" onFile={() => {}} />
-      <div className="mt-2.5 overflow-y-auto pr-1.5">
+      <div className="mt-1 text-center select-none text-zinc-300 text-[0.85rem]">
+        Or, select a save file from below
+      </div>
+      <div className="mt-1.5 overflow-y-auto overflow-x-hidden pr-1.5 space-y-2">
         {saveFiles.map((file) => {
           return (
             <div
-              class="flex items-center justify-between p-1 bg-zinc-700 rounded-lg mb-2 hover:bg-zinc-600 group"
+              class="flex items-center justify-between p-1 hover:cursor-pointer bg-zinc-700 rounded hover:bg-zinc-600 group"
               title={file.path}
             >
-              <div class="flex items-center">
-                <FolderIcon class="w-6 h-6 text-zinc-400 ml-0.5 mt-0.5 mr-1.5" />
-                <div>
-                  <p class="text-zinc-400">
-                    <span class="text-sm font-semibold text-zinc-100">
+              <div className="flex justify-between w-full items-center">
+                <FolderIcon class="inline w-6 h-6 shrink-0 text-zinc-400 ml-0.5 mt-0.5 mr-1.5" />
+                <div className="grow text-sm font-medium text-zinc-200 truncate">
                   {file.name}
-                    </span>
-                    {"  "}
-                    <span className="text-sm">({file.size})</span>
-                  </p>
+                </div>
+                <div className="text-sm text-zinc-400 pl-1 shrink-0">
+                  {file.size}
                 </div>
               </div>
             </div>