commit 1234567890abcdef1234567890abcdef12345678

Author: atonixdev

frontend/src/index.css

@@ -577,4 +577,56 @@ code, pre, kbd, samp {
 }
 
 /* ── md:hidden / hidden utility (mirrors Tailwind for non-Tailwind usage) ─ */
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   FORM MOBILE RESPONSIVENESS  — shared across public & console pages
+   ══════════════════════════════════════════════════════════════════════════ */
+
+/* Responsive 2-column: form panel + info/status sidebar */
+.form-grid-sidebar {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 24px;
+  align-items: start;
+}
+
+@media (min-width: 768px) {
+  /* Contact page: wide form + narrow info panel */
+  .form-grid-contact  { grid-template-columns: 1fr 340px; gap: 64px; }
+  /* Dashboard Support: form + resources sidebar */
+  .form-grid-support  { grid-template-columns: 1fr 320px; align-items: flex-start; }
+  /* SMTP config: config panel + status/test sidebar */
+  .form-grid-smtp     { grid-template-columns: 2fr 1fr; gap: 24px; }
+  /* User analytics: user list + detail panel */
+  .form-grid-user-analytics { grid-template-columns: 1fr 2fr; gap: 24px; }
+}
+
+/* Responsive sidebar nav + content grid (e.g. Discussions page) */
+.page-content-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 24px;
+}
+
+@media (min-width: 768px) {
+  .page-content-grid-discussions { grid-template-columns: 220px 1fr; gap: 32px; }
+}
+
+/* Scrollable key listing tables (SSH / GPG keys) */
+.keys-table-scroll {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.keys-table-scroll > div {
+  min-width: 640px;
+}
+
+/* Ensure search/filter inputs in form toolbars never overflow on mobile */
+@media (max-width: 767px) {
+  .form-search-input {
+    width: 100% !important;
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+  }
+}
 /* Note: Tailwind handles .hidden and .md:flex already via @tailwind utilities */

frontend/src/pages/Contact.js

@@ -160,10 +160,10 @@ const Contact = () => {
       {/* Main Content */}
       <section className="gsw-section">
         <div className="gsw-container">
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 340px', gap: '64px', alignItems: 'start' }}>
+          <div className="form-grid-sidebar form-grid-contact">
 
             {/* Form Panel */}
-            <div style={{ background: '#F8F9FA', border: '1px solid #E5E7EB', padding: '48px' }}>
+            <div style={{ background: '#F8F9FA', border: '1px solid #E5E7EB', padding: 'clamp(20px, 5vw, 48px)' }}>
               <h2 style={{ fontSize: '22px', fontWeight: 700, color: '#111827', marginBottom: '32px', letterSpacing: '-0.01em' }}>
                 Send Message
               </h2>

frontend/src/pages/admin-console/Users.js

@@ -86,10 +86,11 @@ export default function Users() {
             value={search}
             onChange={(e) => setSearch(e.target.value)}
             placeholder="Search users…"
+            className="form-search-input"
             style={{
               background: '#FFFFFF', border: BD,
               color: '#1F2937', fontSize: 12, padding: '6px 12px',
-              outline: 'none', fontFamily: 'inherit', width: 220,
+              outline: 'none', fontFamily: 'inherit', width: '100%', maxWidth: 220, boxSizing: 'border-box',
             }}
           />
         </div>

frontend/src/pages/billing-console/UserAnalytics.js

@@ -83,7 +83,7 @@ const UserAnalytics = () => {
         <p style={{ fontSize: 13, color: '#6B7280', margin: 0 }}>Usage and billing activity per individual user.</p>
       </div>
 
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 24 }}>
+      <div className="form-grid-sidebar form-grid-user-analytics">
         {/* Left: User list */}
         <div>
           <div style={{ ...CARD, marginBottom: 16 }}>

frontend/src/pages/community/Discussions.js

@@ -58,7 +58,8 @@ const Discussions = () => {
               style={{
                 padding: '10px 16px', border: '1px solid #D1D5DB',
                 fontSize: 13, fontFamily: 'inherit', outline: 'none',
-                width: 300, color: '#111827', background: '#FFFFFF',
+                width: '100%', maxWidth: 300, boxSizing: 'border-box',
+                color: '#111827', background: '#FFFFFF',
               }}
             />
             <button
@@ -76,9 +77,9 @@ const Discussions = () => {
 
       {/* Main layout */}
       <div
+        className="page-content-grid page-content-grid-discussions"
         style={{
           maxWidth: 1440, margin: '0 auto', padding: '40px 24px',
-          display: 'grid', gridTemplateColumns: '220px 1fr', gap: 32,
         }}
       >
         {/* Sidebar */}

frontend/src/pages/dashboard/Support.js

@@ -59,7 +59,7 @@ const Support = () => {
         </p>
       </div>
 
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 24, alignItems: 'flex-start' }}>
+      <div className="form-grid-sidebar form-grid-support" style={{ gap: 24 }}>
 
         {/* Ticket form */}
         <div style={{ background: '#FFFFFF', border: '1px solid #E5E7EB', padding: '32px' }}>

frontend/src/pages/email-console/SMTP.js

@@ -61,7 +61,7 @@ export default function EmailSMTP() {
         <p style={{ fontSize: 13, color: '#4B5563', margin: '6px 0 0' }}>Outbound mail server credentials and delivery configuration.</p>
       </div>
 
-      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 24 }}>
+      <div className="form-grid-sidebar form-grid-smtp">
 
         {/* Config form */}
         <div style={{ background: '#FFFFFF', border: BD, padding: 'clamp(14px, 3.5vw, 28px) clamp(14px, 3.5vw, 32px)' }}>

frontend/src/pages/settings/GPGKeys.js

@@ -283,6 +283,7 @@ const GPGKeys = () => {
         </div>
 
         {/* Table header */}
+        <div className="keys-table-scroll">
         <div
           style={{
             display: 'grid', gridTemplateColumns: COL_WIDTHS,
@@ -405,6 +406,7 @@ const GPGKeys = () => {
             </div>
           ))
         )}
+        </div>{/* end keys-table-scroll */}
       </div>
     </div>
   );

frontend/src/pages/settings/SSHKeys.js

@@ -314,6 +314,7 @@ const SSHKeys = () => {
         </div>
 
         {/* Table header */}
+        <div className="keys-table-scroll">
         <div
           style={{
             display: 'grid', gridTemplateColumns: COL_WIDTHS,
@@ -424,6 +425,7 @@ const SSHKeys = () => {
             </div>
           ))
         )}
+        </div>{/* end keys-table-scroll */}
       </div>
     </div>
   );