commit 1234567890abcdef1234567890abcdef12345678

Author: atonixdev

backend/config/settings.py

@@ -8,14 +8,19 @@
 
 from decouple import Csv
 
-# Force a single root-level .env for the whole repo.
-# This avoids needing separate backend/.env and keeps Docker Compose + local dev consistent.
+# Prefer a repo-level .env when the full workspace is mounted, but also support
+# a backend-local .env for Docker/local setups where only /backend is available.
 try:
     from decouple import Config, RepositoryEnv
 
-    _ROOT_ENV = (Path(__file__).resolve().parent.parent.parent / '.env').resolve()
-    if _ROOT_ENV.exists():
-        config = Config(RepositoryEnv(str(_ROOT_ENV)))
+    _SETTINGS_PATH = Path(__file__).resolve()
+    _ENV_CANDIDATES = [
+        (_SETTINGS_PATH.parents[2] / '.env').resolve(),
+        (_SETTINGS_PATH.parents[1] / '.env').resolve(),
+    ]
+    _ENV_FILE = next((path for path in _ENV_CANDIDATES if path.exists()), None)
+    if _ENV_FILE:
+        config = Config(RepositoryEnv(str(_ENV_FILE)))
     else:  # fallback to default decouple behavior (env vars only)
         from decouple import config  # type: ignore
 except Exception:  # pragma: no cover
@@ -439,7 +444,8 @@
 INBOUND_WEBHOOK_SECRET = config('INBOUND_WEBHOOK_SECRET', default='')
 
 # Public URL used in email CTAs (no trailing slash)
-FRONTEND_URL = config('FRONTEND_URL', default='https://atonixdev.org').rstrip('/')
+_default_frontend_url = 'http://localhost:3000' if DEBUG else 'https://atonixdev.org'
+FRONTEND_URL = config('FRONTEND_URL', default=_default_frontend_url).rstrip('/')
 
 # Set default caching headers for responses
 DEFAULT_CACHE_HEADERS = {

docker-compose.yml

@@ -52,6 +52,7 @@ services:
     environment:
       - DEBUG=${DEBUG:-True}
       - SECRET_KEY=${SECRET_KEY:-dev-secret-key-change-in-production}
+      - FRONTEND_URL=${FRONTEND_URL:-http://localhost:3000}
       # IMPORTANT: root .env is the single source of configuration; Docker overrides DATABASE_URL for Postgres.
       # Override it inside Docker so the container uses Postgres.
       - DATABASE_URL=postgresql://${DB_USER:-postgres}:${DB_PASSWORD:-postgres}@db:5432/${DB_NAME:-personal_brand_hub}
@@ -64,6 +65,18 @@ services:
       - ALLOWED_HOSTS=${ALLOWED_HOSTS:-localhost,127.0.0.1}
       - CORS_ALLOWED_ORIGINS=${CORS_ALLOWED_ORIGINS:-http://localhost:3000,http://localhost:3001}
       - REDIS_URL=${REDIS_URL:-redis://redis:6379/0}
+      - GITHUB_CLIENT_ID=${GITHUB_CLIENT_ID:-}
+      - GITHUB_CLIENT_SECRET=${GITHUB_CLIENT_SECRET:-}
+      - GITHUB_REDIRECT_URI=${GITHUB_REDIRECT_URI:-}
+      - GITLAB_CLIENT_ID=${GITLAB_CLIENT_ID:-}
+      - GITLAB_CLIENT_SECRET=${GITLAB_CLIENT_SECRET:-}
+      - GITLAB_REDIRECT_URI=${GITLAB_REDIRECT_URI:-}
+      - LINKEDIN_CLIENT_ID=${LINKEDIN_CLIENT_ID:-}
+      - LINKEDIN_CLIENT_SECRET=${LINKEDIN_CLIENT_SECRET:-}
+      - LINKEDIN_REDIRECT_URI=${LINKEDIN_REDIRECT_URI:-}
+      - GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID:-}
+      - GOOGLE_CLIENT_SECRET=${GOOGLE_CLIENT_SECRET:-}
+      - GOOGLE_REDIRECT_URI=${GOOGLE_REDIRECT_URI:-}
     depends_on:
       db:
         condition: service_healthy

frontend/src/components/Layout/EmailConsoleLayout.js

@@ -175,7 +175,7 @@ const EmailConsoleLayout = () => {
         </div>
 
         {/* Page content */}
-        <div style={{ flex: 1, overflowY: 'auto' }}>
+        <div className="console-content console-padded-content" style={{ flex: 1, overflowY: 'auto' }}>
           <Outlet />
         </div>
       </div>

frontend/src/components/Layout/OpsLayout.js

@@ -248,7 +248,7 @@ const OpsLayout = () => {
         </div>
 
         {/* Content area */}
-        <div className="ops-content" style={{ flex: 1, overflowY: 'auto' }}>
+        <div className="ops-content console-content" style={{ flex: 1, overflowY: 'auto' }}>
           <Outlet />
         </div>
       </div>

frontend/src/components/Layout/SettingsLayout.js

@@ -266,7 +266,7 @@ const SettingsLayout = () => {
         </div>
 
         {/* Page content */}
-        <div style={{ flex: 1, overflowY: 'auto', padding: '40px', maxWidth: 900 }}>
+        <div className="console-content" style={{ flex: 1, overflowY: 'auto', padding: 'clamp(16px, 4vw, 40px)', maxWidth: 900 }}>
           <Outlet />
         </div>
       </div>

frontend/src/index.css

@@ -498,11 +498,15 @@ code, pre, kbd, samp {
 /* ── Console layouts (Admin & OPS) — Responsive ──────────── */
 
 /* Tables: always allow horizontal scroll inside console pages */
-.console-content div:has(> table) {
+.console-content div:has(> table),
+.console-padded-content div:has(> table),
+.ops-content div:has(> table) {
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
 }
-.console-content table {
+.console-content table,
+.console-padded-content table,
+.ops-content table {
   min-width: 520px;
 }
 
@@ -512,9 +516,9 @@ code, pre, kbd, samp {
 }
 
 @media (max-width: 767px) {
-  /* Stat grids (4-col & 3-col) → 2-col on phones */
+  /* Stat grids → responsive auto-fit on phones */
   .console-stat-grid {
-    grid-template-columns: repeat(2, 1fr) !important;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 155px), 1fr)) !important;
   }
 
   /* Sidebar/detail split grids → stack on phones */
@@ -537,6 +541,20 @@ code, pre, kbd, samp {
     width: 96vw !important;
     max-width: 96vw !important;
   }
+
+  /* Dashboard/console landing page padding */
+  .console-padded-content > div,
+  .console-content > div {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  /* Any inline flex header rows inside dashboards should wrap */
+  .console-padded-content [style*="justifyContent: 'space-between'"],
+  .console-padded-content [style*="justify-content: space-between"] {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
 }
 
 @media (max-width: 479px) {
@@ -552,6 +570,10 @@ code, pre, kbd, samp {
     max-width: 100% !important;
     box-sizing: border-box !important;
   }
+  /* Prevent any dashboard page from creating horizontal scroll */
+  .console-padded-content {
+    overflow-x: hidden;
+  }
 }
 
 /* ── md:hidden / hidden utility (mirrors Tailwind for non-Tailwind usage) ─ */

frontend/src/pages/BlogDetail.js

@@ -167,7 +167,7 @@ const BlogDetail = () => {
               </div>
             )}
             <form onSubmit={handleCommentSubmit}>
-              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px', marginBottom: '20px' }}>
+              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 280px), 1fr))', gap: '20px', marginBottom: '20px' }}>
                 <div>
                   <label style={labelStyle}>Name *</label>
                   <input

frontend/src/pages/CapabilitiesStatement.js

@@ -129,7 +129,7 @@ const CapabilitiesStatement = () => {
       {/* ── Company Overview ── */}
       <section className="gsw-section-sm" style={{ background: '#F8F9FA', borderBottom: '1px solid #E5E7EB' }}>
         <div className="gsw-container">
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '48px 80px', alignItems: 'start' }}>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 280px), 1fr))', gap: '48px 80px', alignItems: 'start' }}>
             <div>
               <span className="gsw-eyebrow">Company Profile</span>
               <h2 style={{ fontSize: 'clamp(22px, 2.5vw, 30px)', fontWeight: 800, color: '#111827', marginBottom: 16 }}>About AtonixDev</h2>
@@ -208,7 +208,7 @@ const CapabilitiesStatement = () => {
           </h2>
           <div style={{ display: 'flex', flexDirection: 'column', gap: 1, background: '#E5E7EB', border: '1px solid #E5E7EB' }}>
             {pastPerformance.map((p) => (
-              <div key={p.title} style={{ background: '#FFFFFF', padding: '28px 32px', display: 'grid', gridTemplateColumns: '1fr auto', gap: '16px 32px', alignItems: 'start' }}>
+              <div key={p.title} style={{ background: '#FFFFFF', padding: 'clamp(14px, 3.5vw, 28px) clamp(14px, 3.5vw, 32px)', display: 'grid', gridTemplateColumns: '1fr auto', gap: '16px 32px', alignItems: 'start' }}>
                 <div>
                   <h3 style={{ fontSize: 15, fontWeight: 800, color: '#111827', marginBottom: 8, lineHeight: 1.3 }}>{p.title}</h3>
                   <p style={{ fontSize: 13, color: '#4B5563', lineHeight: 1.75, margin: 0 }}>{p.desc}</p>
@@ -228,7 +228,7 @@ const CapabilitiesStatement = () => {
       {/* ── Certifications & NAICS ── */}
       <section className="gsw-section" style={{ background: '#FFFFFF' }}>
         <div className="gsw-container">
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '48px 80px' }}>
+          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 280px), 1fr))', gap: '48px 80px' }}>
             <div>
               <span className="gsw-eyebrow">Certifications & Standards</span>
               <h2 style={{ fontSize: 'clamp(20px, 2vw, 28px)', fontWeight: 800, color: '#111827', marginBottom: 28 }}>Certifications & Compliance</h2>

frontend/src/pages/Careers.js

@@ -113,7 +113,7 @@ const Careers = () => {
           </div>
           <div style={{ display: 'flex', flexDirection: 'column', gap: 1, background: '#E5E7EB', border: '1px solid #E5E7EB' }}>
             {filtered.map((role) => (
-              <div key={role.title} style={{ background: '#FFFFFF', padding: '28px 32px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}
+              <div key={role.title} style={{ background: '#FFFFFF', padding: 'clamp(14px, 3.5vw, 28px) clamp(14px, 3.5vw, 32px)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}
                 onMouseEnter={(e) => { e.currentTarget.style.background = '#FAFAFA'; }}
                 onMouseLeave={(e) => { e.currentTarget.style.background = '#FFFFFF'; }}>
                 <div style={{ flex: 1, minWidth: 280 }}>
@@ -147,7 +147,7 @@ const Careers = () => {
           </div>
           <div style={{ display: 'flex', flexDirection: 'column', gap: 1, background: '#E5E7EB', border: '1px solid #E5E7EB', maxWidth: 800 }}>
             {process.map((p) => (
-              <div key={p.step} style={{ background: '#FFFFFF', padding: '28px 32px', display: 'flex', gap: 24, alignItems: 'flex-start' }}>
+              <div key={p.step} style={{ background: '#FFFFFF', padding: 'clamp(14px, 3.5vw, 28px) clamp(14px, 3.5vw, 32px)', display: 'flex', gap: 24, alignItems: 'flex-start' }}>
                 <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 36, height: 36, background: '#A81D37', fontSize: 11, fontWeight: 800, color: '#FFFFFF', fontFamily: 'var(--font-mono)', flexShrink: 0 }}>{p.step}</span>
                 <div>
                   <h3 style={{ fontSize: 15, fontWeight: 800, color: '#111827', marginBottom: 8, lineHeight: 1.3 }}>{p.title}</h3>

frontend/src/pages/CaseStudies.js

@@ -177,7 +177,7 @@ const CaseStudies = () => {
           </div>
 
           {/* ── Outcome ── */}
-          <div style={{ background: '#FFFFFF', border: '1px solid #E5E7EB', padding: '28px 32px' }}>
+          <div style={{ background: '#FFFFFF', border: '1px solid #E5E7EB', padding: 'clamp(14px, 3.5vw, 28px) clamp(14px, 3.5vw, 32px)' }}>
             <h3 style={{ fontSize: 14, fontWeight: 800, color: '#111827', marginBottom: 12, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Ongoing Impact</h3>
             <p style={{ fontSize: 14, color: '#1F2937', lineHeight: 1.8, margin: 0 }}>{study.outcome}</p>
           </div>