Fix: Instance monitoring dashboard styling and Improved docker compose configuration

application/src/pages/ContainerMonitoring.tsx

@@ -74,9 +74,9 @@ const ContainerMonitoring = () => {
   if (error) {
     console.error('Container monitoring error:', error);
     return (
-      <div className={`min-h-screen flex ${theme === 'dark' ? 'bg-[#0a0a0a] text-white' : 'bg-gray-50 text-gray-900'}`}>
+      <div className="flex h-screen overflow-hidden bg-background text-foreground">
         <Sidebar collapsed={sidebarCollapsed} />
-        <div className="flex-1 flex flex-col min-w-0">
+        <div className="flex flex-col flex-1">
           <Header 
             currentUser={currentUser} 
             onLogout={handleLogout} 
@@ -108,9 +108,9 @@ const ContainerMonitoring = () => {
   }
 
   return (
-    <div className={`min-h-screen flex ${theme === 'dark' ? 'bg-[#0a0a0a] text-white' : 'bg-gray-50 text-gray-900'}`}>
+    <div className="flex h-screen overflow-hidden bg-background text-foreground">
       <Sidebar collapsed={sidebarCollapsed} />
-      <div className="flex-1 flex flex-col min-w-0">
+      <div className="flex flex-col flex-1">
         <Header 
           currentUser={currentUser} 
           onLogout={handleLogout} 

application/src/pages/InstanceMonitoring.tsx

@@ -1,3 +1,4 @@
+
 import { useState, useEffect } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { useTheme } from "@/contexts/ThemeContext";
@@ -11,70 +12,83 @@ import { Server, ServerStats } from "@/types/server.types";
 import { useSidebar } from "@/contexts/SidebarContext";
 import { authService } from "@/services/authService";
 import { useNavigate } from "react-router-dom";
+
 const InstanceMonitoring = () => {
-  const {
-    theme
-  } = useTheme();
-  const {
-    t
-  } = useLanguage();
-  const {
-    sidebarCollapsed,
-    toggleSidebar
-  } = useSidebar();
+  const { theme } = useTheme();
+  const { t } = useLanguage();
+  const { sidebarCollapsed, toggleSidebar } = useSidebar();
   const navigate = useNavigate();
+
   const [stats, setStats] = useState<ServerStats>({
     total: 0,
     online: 0,
     offline: 0,
     warning: 0
   });
+
   const [currentUser, setCurrentUser] = useState(authService.getCurrentUser());
-  const {
-    data: servers = [],
-    isLoading,
-    error,
-    refetch
-  } = useQuery({
+
+  const { data: servers = [], isLoading, error, refetch } = useQuery({
     queryKey: ['servers'],
     queryFn: serverService.getServers,
     refetchInterval: 30000 // Refetch every 30 seconds
   });
+
   useEffect(() => {
     if (servers.length > 0) {
       serverService.getServerStats(servers).then(setStats);
     }
   }, [servers]);
+
   const handleRefresh = () => {
     refetch();
   };
+
   const handleLogout = () => {
     authService.logout();
     navigate('/login');
   };
+
   if (error) {
-    return <div className={`min-h-screen flex ${theme === 'dark' ? 'bg-[#0a0a0a] text-white' : 'bg-gray-50 text-gray-900'}`}>
+    return (
+      <div className="flex h-screen overflow-hidden bg-background text-foreground">
         <Sidebar collapsed={sidebarCollapsed} />
-        <div className="flex-1 flex flex-col min-w-0">
-          <Header currentUser={currentUser} onLogout={handleLogout} sidebarCollapsed={sidebarCollapsed} toggleSidebar={toggleSidebar} />
+        <div className="flex flex-col flex-1">
+          <Header 
+            currentUser={currentUser} 
+            onLogout={handleLogout} 
+            sidebarCollapsed={sidebarCollapsed} 
+            toggleSidebar={toggleSidebar} 
+          />
           <main className="flex-1 flex flex-col items-center justify-center p-4 sm:p-6">
             <div className="text-center max-w-md w-full">
               <h2 className="text-xl sm:text-2xl font-bold mb-4">Error loading servers</h2>
               <p className="text-muted-foreground mb-4 text-sm sm:text-base">
                 Unable to fetch server data. Please check your connection and try again.
               </p>
-              <button onClick={handleRefresh} className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 text-sm sm:text-base">
+              <button 
+                onClick={handleRefresh} 
+                className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 text-sm sm:text-base"
+              >
                 Retry
               </button>
             </div>
           </main>
         </div>
-      </div>;
+      </div>
+    );
   }
-  return <div className={`min-h-screen flex ${theme === 'dark' ? 'bg-[#0a0a0a] text-white' : 'bg-gray-50 text-gray-900'}`}>
+
+  return (
+    <div className="flex h-screen overflow-hidden bg-background text-foreground">
       <Sidebar collapsed={sidebarCollapsed} />
-      <div className="flex-1 flex flex-col min-w-0">
-        <Header currentUser={currentUser} onLogout={handleLogout} sidebarCollapsed={sidebarCollapsed} toggleSidebar={toggleSidebar} />
+      <div className="flex flex-col flex-1">
+        <Header 
+          currentUser={currentUser} 
+          onLogout={handleLogout} 
+          sidebarCollapsed={sidebarCollapsed} 
+          toggleSidebar={toggleSidebar} 
+        />
         <main className="flex-1 overflow-auto">
           <div className="mx-[20px] my-[20px]">
             {/* Header Section */}
@@ -103,6 +117,8 @@ const InstanceMonitoring = () => {
           </div>
         </main>
       </div>
-    </div>;
+    </div>
+  );
 };
+
 export default InstanceMonitoring;

application/src/pages/ServerDetail.tsx

@@ -47,9 +47,9 @@ const ServerDetail = () => {
   if (serverError) {
     console.error('Server detail error:', serverError);
     return (
-      <div className={`min-h-screen flex ${theme === 'dark' ? 'bg-[#0a0a0a] text-white' : 'bg-gray-50 text-gray-900'}`}>
+      <div className="flex h-screen overflow-hidden bg-background text-foreground">
         <Sidebar collapsed={sidebarCollapsed} />
-        <div className="flex-1 flex flex-col min-w-0">
+        <div className="flex flex-col flex-1">
           <Header 
             currentUser={currentUser} 
             onLogout={handleLogout} 
@@ -77,9 +77,9 @@ const ServerDetail = () => {
 
   if (serverLoading) {
     return (
-      <div className={`min-h-screen flex ${theme === 'dark' ? 'bg-[#0a0a0a] text-white' : 'bg-gray-50 text-gray-900'}`}>
+      <div className="flex h-screen overflow-hidden bg-background text-foreground">
         <Sidebar collapsed={sidebarCollapsed} />
-        <div className="flex-1 flex flex-col min-w-0">
+        <div className="flex flex-col flex-1">
           <Header 
             currentUser={currentUser} 
             onLogout={handleLogout} 
@@ -98,9 +98,9 @@ const ServerDetail = () => {
   }
 
   return (
-    <div className={`min-h-screen flex ${theme === 'dark' ? 'bg-[#0a0a0a] text-white' : 'bg-gray-50 text-gray-900'}`}>
+    <div className="flex h-screen overflow-hidden bg-background text-foreground">
       <Sidebar collapsed={sidebarCollapsed} />
-      <div className="flex-1 flex flex-col min-w-0">
+      <div className="flex flex-col flex-1">
         <Header 
           currentUser={currentUser} 
           onLogout={handleLogout} 

docker-compose.yml

@@ -5,9 +5,11 @@ services:
     container_name: checkcle
     restart: unless-stopped
     ports:
-      - "8090:8090"  # Web Application
+      - "8090:8090" # Map ports for external access, if local only "127.0.0.1:8090:8090"
     volumes:
-      - /opt/pb_data:/mnt/pb_data  # Host directory mapped to container path
+      - /opt/pb_data:/mnt/pb_data  # Mount persistent data
+
+    # Optional: set user limits
     ulimits:
       nofile:
         soft: 4096