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 @@
TuneRipper
Convert YouTube videos to MP3 instantly
-
- @* Session info display *@
- @if (!string.IsNullOrWhiteSpace(currentSessionId))
- {
-
- Session: @currentSessionId.Substring(0, 8)...
-
- }
@@ -187,6 +179,14 @@
+
+ @* Session info display - moved to bottom *@
+ @if (!string.IsNullOrWhiteSpace(currentSessionId))
+ {
+
+ Session: @currentSessionId.Substring(0, 8)...
+
+ }
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 {