updated tab titles.

checklist.md

@@ -121,4 +121,6 @@ UI tweaks applied:
 - Server cards on the Dashboard have been updated to enforce exact identical size per breakpoint (fixed heights), images are cropped uniformly (object-fit: cover) so icons are the same visible area across cards, and long server names are clamped to two lines to prevent layout differences.
 - Mobile spacing, paddings, and typography adjusted for better legibility on small screens.
  - Mobile fix: Title clamping and CardContent overflow were tightened so cards no longer expand on mobile; images use a background-image approach and white background to keep visible areas identical.
- - Dashboard action buttons moved: Invite/Leave action now appears below the server title with a left label 'Invite:' or 'Leave:' and the action button to the right.
+ - Dashboard action buttons moved: Invite/Leave action now appears below the server title with a left label 'Invite:' or 'Leave:' and the action button to the right.
+
+- [x] Browser tab now shows `ECS - <Page Name>` (e.g., 'ECS - Dashboard', 'ECS - Server Settings') for each page.

frontend/src/App.js

@@ -1,5 +1,5 @@
-import React from 'react';
+import React, { useEffect } from 'react';
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Routes, useLocation } from 'react-router-dom';
 import { ThemeProvider } from './contexts/ThemeContext';
 import { UserProvider } from './contexts/UserContext';
 import { CssBaseline } from '@mui/material';
@@ -16,6 +16,7 @@ function App() {
       <ThemeProvider>
         <CssBaseline />
         <Router>
+          <TitleSetter />
           <NavBar />
           <Routes>
             <Route path="/" element={<Login />} />
@@ -30,4 +31,25 @@ function App() {
   );
 }
 
-export default App;
+export default App;
+
+// small helper component to set the browser tab title based on current route
+function TitleSetter() {
+  const location = useLocation();
+
+  useEffect(() => {
+    // derive a friendly page name from the path
+    const path = location.pathname || '/';
+    let page = 'App';
+    if (path === '/' || path === '/login') page = 'Login';
+    else if (path.startsWith('/dashboard')) page = 'Dashboard';
+    else if (path.startsWith('/server/') && path.endsWith('/help')) page = 'Server Help';
+    else if (path.startsWith('/server/')) page = 'Server Settings';
+    else if (path.startsWith('/discord')) page = 'Discord';
+    else page = path.replace('/', '').split('/').map(p => p.charAt(0).toUpperCase() + p.slice(1)).join(' - ');
+
+    document.title = `ECS - ${page}`;
+  }, [location]);
+
+  return null;
+}