From b1af481b86b49c6d64c8f48c69c2675e2ab50009 Mon Sep 17 00:00:00 2001
From: Xevion <xevion@xevion.dev>
Date: Wed, 27 Nov 2024 05:17:52 -0600
Subject: [PATCH] Ellipsis, text truncation handling, fixup text spacing with
 flexbox

---
 src/App.css                |  2 +-
 src/App.tsx                |  2 +-
 src/views/SaveSelector.tsx | 24 ++++++++++++------------
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/App.css b/src/App.css
index 7b690fc..1cf7f5e 100644
--- a/src/App.css
+++ b/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 {
diff --git a/src/App.tsx b/src/App.tsx
index b193454..c112fac 100644
--- a/src/App.tsx
+++ b/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>
   );
diff --git a/src/views/SaveSelector.tsx b/src/views/SaveSelector.tsx
index 9bab2c0..371224a 100644
--- a/src/views/SaveSelector.tsx
+++ b/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">
-                      {file.name}
-                    </span>
-                    {"  "}
-                    <span className="text-sm">({file.size})</span>
-                  </p>
+              <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}
+                </div>
+                <div className="text-sm text-zinc-400 pl-1 shrink-0">
+                  {file.size}
                 </div>
               </div>
             </div>