update

frontend/src/components/Layout.tsx

@@ -6,8 +6,8 @@ export function Layout() {
   return (
     <div className="min-h-screen bg-gray-50">
       <Navbar />
-      <main className="pt-4 pb-24 px-4 sm:px-6 lg:px-8">
-        <div className="max-w-7xl mx-auto">
+      <main className="pt-4 pb-24">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <Outlet />
         </div>
       </main>

frontend/src/components/Navbar.tsx

@@ -114,8 +114,8 @@ export function Navbar() {
             </div>
           </div>
           <div className="flex items-center space-x-4">
-            <span className="text-sm text-gray-600 hidden sm:block">
-              {user?.username}
+            <span className="text-sm font-medium text-gray-600 hidden sm:block">
+              {user?.fullName || user?.username}
             </span>
             <button
               onClick={logout}

frontend/src/components/TimerWidget.tsx

@@ -80,8 +80,8 @@ export function TimerWidget() {
 
   if (isLoading) {
     return (
-      <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4 shadow-lg">
-        <div className="max-w-7xl mx-auto flex items-center justify-center">
+      <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 py-4 shadow-lg">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-center">
           <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary-600"></div>
         </div>
       </div>
@@ -89,8 +89,8 @@ export function TimerWidget() {
   }
 
   return (
-    <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4 shadow-lg z-50">
-      <div className="max-w-7xl mx-auto flex flex-wrap sm:flex-nowrap items-center gap-2 sm:justify-between">
+    <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 py-4 shadow-lg z-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-wrap sm:flex-nowrap items-center gap-2 sm:justify-between">
         {ongoingTimer ? (
           <>
             {/* Row 1 (mobile): timer + stop side by side. On sm+ dissolves into the parent flex row via contents. */}
@@ -183,7 +183,7 @@ export function TimerWidget() {
       </div>
 
       {error && (
-        <div className="max-w-7xl mx-auto mt-2">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-2">
           <p className="text-sm text-red-600">{error}</p>
         </div>
       )}

frontend/src/pages/StatisticsPage.tsx

@@ -19,14 +19,20 @@ export function StatisticsPage() {
   const { clients } = useClients();
   const { projects } = useProjects();
 
+  const filteredProjects = filters.clientId
+    ? (projects ?? []).filter((p) => p.clientId === filters.clientId)
+    : projects;
+
   const handleFilterChange = (
     key: keyof StatisticsFilters,
     value: string | undefined,
   ) => {
-    setFilters((prev) => ({
-      ...prev,
-      [key]: value || undefined,
-    }));
+    setFilters((prev) => {
+      const next = { ...prev, [key]: value || undefined };
+      // When client changes, clear any project selection that may belong to a different client
+      if (key === 'clientId') next.projectId = undefined;
+      return next;
+    });
   };
 
   const clearFilters = () => {
@@ -132,7 +138,7 @@ export function StatisticsPage() {
               className="input"
             >
               <option value="">All Projects</option>
-              {projects?.map((project) => (
+              {filteredProjects?.map((project) => (
                 <option key={project.id} value={project.id}>
                   {project.name}
                 </option>

frontend/src/types/index.ts

@@ -1,6 +1,7 @@
 export interface User {
   id: string;
   username: string;
+  fullName: string | null;
   email: string;
 }