From 89001fbc53400bf6076029b36fdb67578fa66cee Mon Sep 17 00:00:00 2001
From: kempersc <sckemper@mailfence.com>
Date: Sun, 4 Jan 2026 17:29:34 +0100
Subject: [PATCH] compact header controls on OntologyViewer and QueryBuilder
 pages

---
 frontend/src/pages/OntologyViewerPage.css | 18 ++++++++++++------
 frontend/src/pages/QueryBuilderPage.css   | 20 +++++++++++++-------
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/frontend/src/pages/OntologyViewerPage.css b/frontend/src/pages/OntologyViewerPage.css
index cd694cce1f..2a2fb51a4f 100644
--- a/frontend/src/pages/OntologyViewerPage.css
+++ b/frontend/src/pages/OntologyViewerPage.css
@@ -178,10 +178,15 @@
 }
 
 .ontology-viewer-page__title {
-  font-size: 1.5rem;
+  font-size: 1.25rem;
   font-weight: 600;
   color: var(--text-primary, #212121);
   margin: 0;
+  flex-shrink: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .ontology-viewer-page__tabs {
@@ -193,7 +198,8 @@
 .ontology-viewer-page__actions {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 0.5rem;
+  flex-shrink: 0;
 }
 
 /* Export dropdown */
@@ -202,12 +208,12 @@
 }
 
 .ontology-viewer-page__export-btn {
-  padding: 0.5rem 1rem;
+  padding: 0.375rem 0.75rem;
   background: var(--success-light, #e8f5e9);
   border: 1px solid var(--success-dark, #2e7d32);
   border-radius: 4px;
   cursor: pointer;
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   font-weight: 500;
   color: var(--success-dark, #2e7d32);
   transition: all 0.2s;
@@ -270,12 +276,12 @@
 }
 
 .ontology-viewer-page__tab {
-  padding: 0.5rem 1rem;
+  padding: 0.375rem 0.75rem;
   background: white;
   border: 1px solid var(--border-color, #e0e0e0);
   border-radius: 4px;
   cursor: pointer;
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   font-weight: 500;
   color: var(--text-secondary, #757575);
   transition: all 0.2s;
diff --git a/frontend/src/pages/QueryBuilderPage.css b/frontend/src/pages/QueryBuilderPage.css
index 8c9aef90ec..be55b30fa2 100644
--- a/frontend/src/pages/QueryBuilderPage.css
+++ b/frontend/src/pages/QueryBuilderPage.css
@@ -376,17 +376,23 @@
 }
 
 .query-builder-page__title {
-  font-size: 1.75rem;
+  font-size: 1.25rem;
   font-weight: 600;
   color: var(--text-primary, #212121);
   margin: 0;
+  flex-shrink: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /* Header controls - tabs and run button */
 .query-builder-page__header-controls {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 0.5rem;
+  flex-shrink: 0;
 }
 
 .query-builder-page__tabs {
@@ -398,14 +404,14 @@
 .query-builder-page__run-btn-header {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1.25rem;
+  gap: 0.375rem;
+  padding: 0.375rem 0.75rem;
   background: linear-gradient(135deg, #2e7d32 0%, #388e3c 50%, #43a047 100%);
   color: white;
   border: none;
   border-radius: 4px;
   cursor: pointer;
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   font-weight: 600;
   box-shadow: 0 2px 8px rgba(46, 125, 50, 0.3);
   transition: all 0.2s ease;
@@ -431,12 +437,12 @@
 }
 
 .query-builder-page__tab {
-  padding: 0.5rem 1rem;
+  padding: 0.375rem 0.75rem;
   background: white;
   border: 1px solid var(--border-color, #e0e0e0);
   border-radius: 4px;
   cursor: pointer;
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   font-weight: 500;
   color: var(--text-secondary, #757575);
   transition: all 0.2s;