From 02d4e5a7e454686b7c402f96abca5999268093af Mon Sep 17 00:00:00 2001
From: chelsea <chelsea@redacted.com>
Date: Sun, 12 Oct 2025 04:08:09 -0500
Subject: [PATCH] Fix community settings and admin panel layout issues
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problems Fixed:
1. **Community settings grid layout** - Cards were too spread out horizontally
2. **Missing navigation elements** - No back link or breadcrumbs on community settings
3. **Admin panel grid layouts** - Stats and system info cards too wide on large screens
4. **Responsive layout issues** - Poor layout on different screen sizes

## Root Cause:
The CSS grid layouts were using `auto-fill` and `auto-fit` with minimum sizes that
caused elements to spread too wide on large screens, creating an awkward UI.

## Solutions Implemented:

### Community Settings Page:
- **Improved grid layout** - Better responsive grid with max 3 columns
- **Added back navigation** - "← Back to Settings" link for better UX
- **Responsive breakpoints** - Single column on mobile, max 3 on desktop
- **Better max-width** - Increased container width for better balance

### Admin Panel Base Template:
- **Fixed admin stats grid** - Limited to 4 columns max, responsive breakpoints
- **Fixed system info grid** - Limited to 3 columns max with proper responsive design
- **Added mobile support** - Single column layout on mobile devices
- **Improved spacing** - Better gap management and max-width constraints

### CSS Improvements:
- Mobile-first responsive design
- Proper breakpoints at 768px and 1200px
- Maximum column limits to prevent over-stretching
- Better visual balance on all screen sizes

The admin and community settings interfaces now have proper, responsive layouts\!

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 templates/_admin_base.html          | 28 +++++++++++++++++++++++++++-
 templates/settings_communities.html | 23 +++++++++++++++++++++--
 2 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/templates/_admin_base.html b/templates/_admin_base.html
index ed4918a..4ed0a96 100644
--- a/templates/_admin_base.html
+++ b/templates/_admin_base.html
@@ -245,9 +245,22 @@
         /* ===== STATS & CARDS ===== */
         .admin-stats {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
             gap: 16px;
             margin-bottom: 24px;
+            max-width: 100%;
+        }
+
+        @media (max-width: 768px) {
+            .admin-stats {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        @media (min-width: 1200px) {
+            .admin-stats {
+                grid-template-columns: repeat(4, 1fr);
+            }
         }
 
         .stat-card {
@@ -291,6 +304,19 @@
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
             gap: 16px;
+            max-width: 100%;
+        }
+
+        @media (max-width: 768px) {
+            .system-info {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        @media (min-width: 1200px) {
+            .system-info {
+                grid-template-columns: repeat(3, 1fr);
+            }
         }
 
         /* ===== FORMS ===== */
diff --git a/templates/settings_communities.html b/templates/settings_communities.html
index fa805bf..6a790f7 100644
--- a/templates/settings_communities.html
+++ b/templates/settings_communities.html
@@ -5,7 +5,7 @@
 {% block extra_css %}
 <style>
     .settings-container {
-        max-width: 1000px;
+        max-width: 1200px;
         margin: 0 auto;
         padding: 24px;
     }
@@ -83,8 +83,21 @@
 
     .community-grid {
         display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
         gap: 16px;
+        max-width: 100%;
+    }
+
+    @media (max-width: 768px) {
+        .community-grid {
+            grid-template-columns: 1fr;
+        }
+    }
+
+    @media (min-width: 1400px) {
+        .community-grid {
+            grid-template-columns: repeat(3, 1fr);
+        }
     }
 
     .community-item {
@@ -237,6 +250,12 @@
 {% block content %}
 {% include '_nav.html' %}
 <div class="settings-container">
+    <nav style="margin-bottom: 24px;">
+        <a href="{{ url_for('settings') }}" style="color: var(--primary-color); text-decoration: none; font-weight: 500;">
+            ← Back to Settings
+        </a>
+    </nav>
+    
     <div class="settings-header">
         <h1>Community Settings</h1>
         <p>Select which communities, subreddits, and sources to include in your feed</p>