From 1390e35efefbcca5c322cac6b2edfc948fa91219 Mon Sep 17 00:00:00 2001
From: Johannes <git@digbox.de>
Date: Fri, 12 Sep 2025 17:21:22 +0200
Subject: [PATCH] feat: implement tabs overflow with more functionality and UI
 improvements

- Add tabs overflow handling with EllipsisOutlined more button
- Simplify tabs styling by removing dynamic CSS injection
- Add consistent background and color styling for tab navigation
- Improve zoom controls with circular buttons and proper icons
- Style more button and disabled states for better visibility
- Clean up unused CSS rules and improve maintainability
- Fix tab bar extra content layout using div instead of span
---
 frontend/src/global.css             | 15 ++++++++++-----
 frontend/src/pages/ProjectDetail.js | 28 ++++++++++------------------
 2 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/frontend/src/global.css b/frontend/src/global.css
index 1b64c8c..a868fd1 100644
--- a/frontend/src/global.css
+++ b/frontend/src/global.css
@@ -9,6 +9,16 @@
     z-index: 100;
     padding: 9px 32px;
     margin-bottom: 0px;
+    background: #001f1e;
+    color: #fff;
+}
+
+.ant-tabs > .ant-tabs-nav button.ant-btn-variant-outlined:disabled {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.ant-tabs > .ant-tabs-nav button.ant-tabs-nav-more {
+    color: #fff;
 }
 
 .ant-layout-header.overview-header {
@@ -31,9 +41,4 @@
     .ant-tabs-content {
         padding: 0px 16px; /* Reduced padding on mobile */
     }
-}
-
-/* Global anticon color override */
-.anticon {
-    color: rgb(0, 31, 30) !important;
 }
\ No newline at end of file
diff --git a/frontend/src/pages/ProjectDetail.js b/frontend/src/pages/ProjectDetail.js
index 48cc980..7dfbd76 100644
--- a/frontend/src/pages/ProjectDetail.js
+++ b/frontend/src/pages/ProjectDetail.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { Tabs, Button, Spin, Skeleton, Result, Grid } from 'antd';
-import { ArrowLeftOutlined, LoadingOutlined, LockOutlined } from '@ant-design/icons';
+import { ArrowLeftOutlined, LoadingOutlined, LockOutlined, MinusOutlined, PlusOutlined, EllipsisOutlined } from '@ant-design/icons';
 import UserMenu from '../components/UserMenu';
 import FilePreview, { formatFileSize, formatDuration } from '../components/FilePreview';
 import debugLogger from '../utils/debugLogger';
@@ -245,27 +245,19 @@ function ProjectDetail({ user, darkMode, onLogout, onToggleDarkMode, overridePar
 
   return (
     <div>
-      <style>{`
-        .ads-details-tabs .ant-tabs-nav {
-          background: ${darkMode ? '#1f1f1f' : '#001f1e'};
-          color: ${darkMode ? '#fff' : '#fff'};
-          transition: background 0.2s;
-        }
-      `}</style>
-      {/* Zoom-Buttons jetzt in tabBarExtraContent.right */}
       <Spin spinning={loading} indicator={<LoadingOutlined spin />} size="large" tip="Lade Projektdaten..." fullscreen />
       {!loading && (
         tabs.length > 0 ? (
-          <Tabs
-            className="ads-details-tabs"
+          <Tabs 
             items={tabs}
+            more={{ icon: <EllipsisOutlined />, trigger: 'click' }}
             activeKey={activeKey}
             onChange={handleTabChange}
             tabBarExtraContent={{
               left: (
-                <span style={{ display: 'flex', alignItems: 'center' }}>
+                <div style={{ display: 'flex', alignItems: 'center' }}>
                   <Button
-                    icon={<ArrowLeftOutlined />}
+                    icon={<ArrowLeftOutlined style={{ color: '#001f1e' }} />}
                     onClick={() => navigate('/')}
                     style={{ marginRight: projectLogo ? 12 : 0 }}
                   />
@@ -276,17 +268,17 @@ function ProjectDetail({ user, darkMode, onLogout, onToggleDarkMode, overridePar
                       style={{ height: 38, marginRight: 32, objectFit: 'contain' }}
                     />
                   )}
-                </span>
+                </div>
               ),
               right: (
-                <span style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                   <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                    <Button size="small" onClick={() => handleZoom('out')} disabled={zoom <= ZOOM_LEVELS[0]}>-</Button>
+                    <Button size="small" shape="circle" icon={<MinusOutlined style={{ color: '#001f1e' }} />} onClick={() => handleZoom('out')} disabled={zoom <= ZOOM_LEVELS[0]}></Button>
                     <span style={{ minWidth: 48, textAlign: 'center' }}>{Math.round(zoom * 100)}%</span>
-                    <Button size="small" onClick={() => handleZoom('in')} disabled={zoom >= ZOOM_LEVELS[ZOOM_LEVELS.length - 1]}>+</Button>
+                    <Button size="small" shape="circle" icon={<PlusOutlined style={{ color: '#001f1e' }} />} onClick={() => handleZoom('in')} disabled={zoom >= ZOOM_LEVELS[ZOOM_LEVELS.length - 1]}></Button>
                   </div>
                   <UserMenu user={user} onLogout={onLogout} darkMode={darkMode} onToggleDarkMode={onToggleDarkMode} />
-                </span>
+                </div>
               )
             }}
           />