feat: UI improvements and responsive design enhancements

- Fix dark mode overscroll areas with proper background colors
- Add mobile responsiveness for project logos in header
- Improve viewport handling with interactive-widget support
- Update app title to proper case 'AdsPreview'
- Add mobile-friendly padding adjustments for tabs and headers
- Update .gitignore to exclude .code-workspace files
- Enhance CSS with anticon color overrides and mobile breakpoints

frontend/src/App.js

@@ -19,6 +19,41 @@ function App() {
     return stored === 'true';
   });
 
+  // Set initial background colors immediately on component mount
+  useEffect(() => {
+    const htmlElement = document.documentElement;
+    const bodyElement = document.body;
+    
+    // Set initial colors based on current darkMode state
+    const bgColor = darkMode ? '#181818' : '#f5f5f5';
+    htmlElement.style.backgroundColor = bgColor;
+    bodyElement.style.backgroundColor = bgColor;
+    
+    if (darkMode) {
+      htmlElement.classList.add('dark-mode');
+    } else {
+      htmlElement.classList.remove('dark-mode');
+    }
+  }, []); // Run only once on mount
+
+  // Update HTML class and background color when darkMode changes
+  useEffect(() => {
+    const htmlElement = document.documentElement;
+    const bodyElement = document.body;
+    
+    if (darkMode) {
+      htmlElement.classList.add('dark-mode');
+      // Set dark mode background colors to prevent white overscroll areas
+      htmlElement.style.backgroundColor = '#181818';
+      bodyElement.style.backgroundColor = '#181818';
+    } else {
+      htmlElement.classList.remove('dark-mode');
+      // Set light mode background colors
+      htmlElement.style.backgroundColor = '#ebebeb';
+      bodyElement.style.backgroundColor = '#f5f5f5';
+    }
+  }, [darkMode]);
+
 
   useEffect(() => {
     const token = localStorage.getItem('jwt');
@@ -99,8 +134,7 @@ function App() {
     >
       <AntApp>
         <Router>
-          <Layout style={{ minHeight: '100vh' }}>
-            {/* Kein globaler Header mehr, Header wird ggf. in einzelnen Seiten eingebunden */}
+          <Layout style={{ minHeight: '100dvh' }}>
             <Layout.Content style={{ padding: 0 }}>
               <Routes>
                 {user.role === 'admin' ? (