From b7e7f8de3d2200ef34510cda3601a50f62af798d Mon Sep 17 00:00:00 2001
From: HsiangNianian <i@jyunko.cn>
Date: Tue, 13 Jan 2026 15:28:19 +0800
Subject: feat: enhance window dimensions and layout in the application

---
 ui/src/App.svelte | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

(limited to 'ui/src/App.svelte')

diff --git a/ui/src/App.svelte b/ui/src/App.svelte
index a648f98..292c719 100644
--- a/ui/src/App.svelte
+++ b/ui/src/App.svelte
@@ -20,28 +20,32 @@
 
 <div class="flex h-screen bg-zinc-900 text-white font-sans overflow-hidden select-none">
   <!-- Sidebar -->
-  <aside class="w-16 lg:w-64 bg-zinc-950 flex flex-col items-center lg:items-start transition-all duration-300 border-r border-zinc-800">
-    <div class="p-6 w-full flex justify-center lg:justify-start">
-        <div class="font-bold text-xl tracking-wider text-indigo-400">DROP<span class="text-white">OUT</span></div>
+  <aside class="w-20 lg:w-64 bg-zinc-950 flex flex-col items-center lg:items-start transition-all duration-300 border-r border-zinc-800 shrink-0">
+    <div class="h-20 w-full flex items-center justify-center lg:justify-start lg:px-6 border-b border-zinc-800/50">
+        <!-- Icon Logo (Visible on small) -->
+        <div class="lg:hidden text-2xl font-black bg-clip-text text-transparent bg-gradient-to-tr from-indigo-400 to-purple-400">D</div>
+        <!-- Full Logo (Visible on large) -->
+        <div class="hidden lg:block font-bold text-xl tracking-wider text-indigo-400">DROP<span class="text-white">OUT</span></div>
     </div>
     
-    <nav class="flex-1 w-full flex flex-col gap-2 p-2">
-      <button class="flex items-center gap-4 w-full text-left px-4 py-3 rounded-lg hover:bg-zinc-800 bg-zinc-800/50 text-zinc-100 transition-colors">
-        <span class="text-xl">🏠</span>
-        <span class="hidden lg:block font-medium">Home</span>
+    <nav class="flex-1 w-full flex flex-col gap-2 p-3">
+      <button class="group flex items-center lg:gap-4 justify-center lg:justify-start w-full px-0 lg:px-4 py-3 rounded-lg hover:bg-zinc-800 bg-zinc-800/50 text-zinc-100 transition-all relative">
+        <span class="text-xl relative z-10">🏠</span>
+        <span class="hidden lg:block font-medium relative z-10 transition-opacity">Home</span>
+        <!-- Tooltip for small screen (optional, simple css approach) -->
       </button>
-      <button class="flex items-center gap-4 w-full text-left px-4 py-3 rounded-lg hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100 transition-colors">
+      <button class="group flex items-center lg:gap-4 justify-center lg:justify-start w-full px-0 lg:px-4 py-3 rounded-lg hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100 transition-all">
         <span class="text-xl">📦</span>
         <span class="hidden lg:block font-medium">Versions</span>
       </button>
-      <button class="flex items-center gap-4 w-full text-left px-4 py-3 rounded-lg hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100 transition-colors">
+      <button class="group flex items-center lg:gap-4 justify-center lg:justify-start w-full px-0 lg:px-4 py-3 rounded-lg hover:bg-zinc-800 text-zinc-400 hover:text-zinc-100 transition-all">
         <span class="text-xl">⚙️</span>
         <span class="hidden lg:block font-medium">Settings</span>
       </button>
     </nav>
     
-    <div class="p-4 w-full border-t border-zinc-800">
-      <div class="text-xs text-center lg:text-left text-zinc-600 font-mono">v0.1.3</div>
+    <div class="p-4 w-full border-t border-zinc-800 flex justify-center lg:justify-start">
+      <div class="text-xs text-zinc-600 font-mono">v0.1.3</div>
     </div>
   </aside>
 
-- 
cgit v1.2.3-70-g09d2