From 77a327fabf73090f884eb088dad977573dd46714 Mon Sep 17 00:00:00 2001
From: Michal Vrba <michal.vrba@gmai.com>
Date: Sun, 14 Dec 2025 12:48:39 +0100
Subject: [PATCH] Move session info to bottom and restyle for subtlety

Session info display was relocated from the logo area to the bottom of the main content in Home.razor. Updated CSS to make the session info less prominent by removing background and border, reducing font size and padding, and lowering opacity. Improved layout and responsiveness for a more subtle appearance.
---
 TuneRipper/Pages/Home.razor     | 16 ++++++++--------
 TuneRipper/Pages/Home.razor.css | 34 ++++++++++++++++++++++-----------
 2 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/TuneRipper/Pages/Home.razor b/TuneRipper/Pages/Home.razor
index 4271a57..dfbdd75 100644
--- a/TuneRipper/Pages/Home.razor
+++ b/TuneRipper/Pages/Home.razor
@@ -28,14 +28,6 @@
             <img src="images/logo.png" alt="TuneRipper Logo" class="logo" />
             <h1 class="app-title">TuneRipper</h1>
             <p class="app-subtitle">Convert YouTube videos to MP3 instantly</p>
-            
-            @* Session info display *@
-            @if (!string.IsNullOrWhiteSpace(currentSessionId))
-            {
-                <div class="session-info">
-                    <small>Session: @currentSessionId.Substring(0, 8)...</small>
-                </div>
-            }
         </div>
         
         <div class="download-form">
@@ -187,6 +179,14 @@
         </div>
         
         <DonateButton />
+        
+        @* Session info display - moved to bottom *@
+        @if (!string.IsNullOrWhiteSpace(currentSessionId))
+        {
+            <div class="session-info">
+                <small>Session: @currentSessionId.Substring(0, 8)...</small>
+            </div>
+        }
     </div>
 </div>
 
diff --git a/TuneRipper/Pages/Home.razor.css b/TuneRipper/Pages/Home.razor.css
index 7e27ca1..fec3798 100644
--- a/TuneRipper/Pages/Home.razor.css
+++ b/TuneRipper/Pages/Home.razor.css
@@ -73,24 +73,30 @@
     line-height: 1.4;
 }
 
-/* Session info styling */
+/* Session info styling - now at bottom */
 .session-info {
-    background: #f7fafc;
-    border: 1px solid #e2e8f0;
-    border-radius: 8px;
-    padding: 8px 16px;
+    background: transparent;
+    border: none;
+    border-radius: 4px;
+    padding: 4px 8px;
     margin-top: 15px;
     display: inline-block;
-    color: #4a5568;
-    font-size: 0.85rem;
+    color: rgba(107, 114, 128, 0.6);
+    font-size: 0.7rem;
     font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-    opacity: 0.8;
+    opacity: 0.6;
     transition: opacity 0.2s ease;
     word-break: break-all;
+    text-align: center;
+    width: 100%;
 }
 
 .session-info:hover {
-    opacity: 1;
+    opacity: 0.8;
+}
+
+.session-info small {
+    font-size: 0.65rem;
 }
 
 .download-form {
@@ -694,11 +700,17 @@
     }
     
     .session-info {
-        font-size: 0.75rem;
-        padding: 6px 12px;
+        font-size: 0.6rem;
+        padding: 3px 6px;
         max-width: 100%;
         overflow: hidden;
         text-overflow: ellipsis;
+        margin-top: 10px;
+        opacity: 0.5;
+    }
+    
+    .session-info small {
+        font-size: 0.55rem;
     }
     
     .download-all-btn {