More layout tweaks

static/css/components/layout.css

@@ -11,18 +11,23 @@ body.with-sidebar {
     display: flex;
 }
 
-.main-content {
+.main-content-area {
     flex: 1;
-    padding: 20px 40px;
+    min-width: 0; /* Prevents flex item from overflowing */
 }
 
-.main-content h1 {
+#main-content {
+    flex: 1;
+    padding: 1rem;
+}
+
+#main-content h1 {
     color: var(--primary-red);
     font-size: 2.5em;
     margin-bottom: 0.5em;
 }
 
-.main-content p {
+#main-content p {
     line-height: 1.6;
     color: var(--text-muted);
     margin-bottom: 1.5em;

static/css/components/topbar.css

@@ -7,7 +7,6 @@
     grid-template-columns: 1fr auto 1fr;
     align-items: center;
     margin-bottom: 1rem;
-    border-radius: 8px;
 }
 
 .top-bar-title {

static/css/style.css

@@ -15,18 +15,6 @@ body {
     color: var(--text-color);
 }
 
-.main-content h1 {
-    color: var(--primary-red);
-    font-size: 2.5em;
-    margin-bottom: 0.5em;
-}
-
-.main-content p {
-    line-height: 1.6;
-    color: var(--text-muted);
-    margin-bottom: 1.5em;
-}
-
 .login-container {
     display: flex;
     justify-content: center;

static/js/app.js

@@ -36,8 +36,8 @@ function formatDate(dateStr) {
 }
 
 function renderFeedEntries(entries) {
-    const feedContent = document.querySelector('#feed-content');
-    feedContent.innerHTML = '';
+    const mainContent = document.querySelector('#main-content');
+    mainContent.innerHTML = '';
 
     entries.forEach(entry => {
         const entryDiv = document.createElement('article');
@@ -135,7 +135,7 @@ function renderFeedEntries(entries) {
         entryDiv.appendChild(title);
         entryDiv.appendChild(meta);
         entryDiv.appendChild(summary);
-        feedContent.appendChild(entryDiv);
+        mainContent.appendChild(entryDiv);
     });
 }
 

templates/index.html.tera

@@ -46,7 +46,7 @@
         </nav>
     </aside>
     
-    <main class="main-content">
+    <div class="main-content-area">
         <header class="top-bar">
             <h1 class="top-bar-title">RSS Reader</h1>
             <div class="user-menu">
@@ -58,8 +58,8 @@
                 </div>
             </div>
         </header>
-        <div id="feed-content"></div>
-    </main>
+        <main id="main-content"></main>
+    </div>
 
     <script src="/static/js/app.js"></script>
 </body>