From 49c3cf7290007eb3bae5fdfa664cebbde5af5ad8 Mon Sep 17 00:00:00 2001
From: ValueOn AG <p.motsch@poweron.swiss>
Date: Sun, 7 Jun 2026 08:04:03 +0200
Subject: [PATCH] fix(mobile): compact FormGenerator header on connector page

Reduce page padding, hide subtitle and filters on mobile, keep pagination horizontal. Prevents controls from consuming all viewport height on small screens.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../FormGeneratorControls.module.css          | 48 ++++++++++++-------
 src/pages/admin/Admin.module.css              | 40 ++++++++++++++++
 2 files changed, 71 insertions(+), 17 deletions(-)

diff --git a/src/components/FormGenerator/FormGeneratorControls/FormGeneratorControls.module.css b/src/components/FormGenerator/FormGeneratorControls/FormGeneratorControls.module.css
index 9fc82a8..df743c8 100644
--- a/src/components/FormGenerator/FormGeneratorControls/FormGeneratorControls.module.css
+++ b/src/components/FormGenerator/FormGeneratorControls/FormGeneratorControls.module.css
@@ -313,13 +313,19 @@
     align-items: center;
     gap: 6px;
     padding: 6px 8px;
+    max-height: 80px;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
+  .searchContainer {
+    flex: 0 1 auto;
+    min-width: 120px;
+    max-width: 200px;
   }
 
   .filtersContainer {
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 6px;
+    display: none;
   }
 
   .filterGroup {
@@ -344,6 +350,10 @@
   .filterGroup .floatingLabelInput {
     width: 100%;
   }
+
+  .csvExportButton {
+    display: none;
+  }
 }
 
 /* Pagination Controls */
@@ -499,32 +509,36 @@
 /* Responsive Design for Pagination */
 @media (max-width: 768px) {
   .paginationControls {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 10px;
-    margin-left: 0;
-    width: 100%;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    margin-left: auto;
   }
 
   .pageSizeSelector {
-    order: -1;
-    justify-content: center;
+    display: none;
   }
 
   .paginationInfo {
-    text-align: center;
-    font-size: 13px;
+    font-size: 11px;
   }
 
   .pageNumbers {
-    max-width: 100%;
+    max-width: 60vw;
     justify-content: center;
   }
 
   .pageNumber {
-    min-width: 24px;
-    height: 24px;
-    font-size: 11px;
+    min-width: 22px;
+    height: 22px;
+    font-size: 10px;
+  }
+
+  .paginationButton {
+    width: 26px;
+    height: 26px;
+    font-size: 13px;
   }
 }
 
diff --git a/src/pages/admin/Admin.module.css b/src/pages/admin/Admin.module.css
index e0dedfa..47de12e 100644
--- a/src/pages/admin/Admin.module.css
+++ b/src/pages/admin/Admin.module.css
@@ -750,6 +750,46 @@
   }
 }
 
+@media (max-width: 768px) {
+  .adminPage {
+    padding: 0.75rem;
+  }
+
+  .pageHeader {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .pageTitle {
+    font-size: 1.1rem;
+  }
+
+  .pageSubtitle {
+    display: none;
+  }
+
+  .headerActions {
+    gap: 0.4rem;
+    margin-left: auto;
+  }
+
+  .primaryButton,
+  .secondaryButton,
+  .dangerButton {
+    font-size: 0.75rem;
+    padding: 0.4rem 0.6rem;
+    min-height: 32px;
+    gap: 0.3rem;
+  }
+
+  .tableContainer {
+    min-height: 0;
+  }
+}
+
 /* ============================================== */
 /* Role Permissions Page Styles                   */
 /* ============================================== */