From d1b1c055bb9ed49530e9a96fd34b3ada5899bbb5 Mon Sep 17 00:00:00 2001
From: A Farzat <a@farzat.xyz>
Date: Wed, 8 Oct 2025 18:58:50 +0300
Subject: Update front-end to display titles and accomodate playlists

---
 front-end/src/App.css | 58 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)

(limited to 'front-end/src/App.css')

diff --git a/front-end/src/App.css b/front-end/src/App.css
index 19cddd2..714d6fb 100644
--- a/front-end/src/App.css
+++ b/front-end/src/App.css
@@ -88,10 +88,68 @@ body {
   font-size: 0.9rem;
 }
 
+.subscription-main {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin: 0 0 0.3rem 0;
+}
+
 .channel-info strong {
   color: #74b9ff;
 }
 
+.subscription-type {
+  color: #74b9ff;
+  font-size: 0.8em;
+  background: rgba(116, 185, 255, 0.2);
+  padding: 0.2rem 0.5rem;
+  border-radius: 10px;
+}
+
+.last-dates {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin: 0;
+  font-size: 0.9em;
+}
+
+.last-updated {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.last-fetched {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.subscription-id {
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 0.8em;
+  font-weight: normal;
+}
+
+/* Responsive updates */
+@media (max-width: 768px) {
+  .subscription-main {
+    justify-content: center;
+    text-align: center;
+    gap: 0.3rem;
+  }
+
+  .last-dates {
+    justify-content: center;
+    text-align: center;
+    gap: 0.5rem;
+  }
+
+  .channel-info {
+    font-size: 0.8rem;
+  }
+}
+
 .subscription-section {
   max-width: 600px;
   margin: 1.5rem auto 0;
-- 
cgit v1.2.3-70-g09d2