cosmostat working

files/web/html/src/styles.css

@@ -2,7 +2,7 @@
    1. Global settings & color palette
    ------------------------------------------------- */
 :root {
-    /* Dark theme – body & card backgrounds */
+    /* Dark theme - body & card backgrounds */
     --bg-body:     #2c3e50;   /* main page background */
     --bg-card:     #34495e;   /* card / panel background */
     --bg-sidebar:  #3d566e;   /* sidebar background (slightly lighter) */
@@ -30,14 +30,23 @@ a { color: var(--clr-accent); text-decoration: none; }
 a:hover { text-decoration: underline; }
 
 /* -------------------------------------------------
-   2. Layout – wrapper, sidebar, main
+   2. Layout - wrapper, sidebar, main
    ------------------------------------------------- */
 .wrapper { display: flex; min-height: 100vh; }
 
 .sidebar {
-    width: 200px;
-    background: var(--bg-sidebar);
+    position: fixed;          /* keep sidebar visible during scroll */
+    top: 0;                   /* stick to the top of the viewport */
+    left: 0;                  /* align to the left edge */
+    height: 100vh;            /* full viewport height */
+    /* ---- size & spacing ------------------------------------------- */
+    width: 200px;             /* same as before */
     padding: 1rem;
+    overflow-y: auto;         /* allow sidebar content to scroll if needed */
+    /* ---- look ------------------------------------------------------- */
+    background: var(--bg-sidebar);
+    /* optional: keep it above other content */
+    z-index: 1000;
 }
 .sidebar h3 { margin: 0 0 .4rem 0; font-size: 1.1rem; }
 .sidebar ul { list-style: none; padding: 0; margin: 0; }
@@ -46,8 +55,13 @@ a:hover { text-decoration: underline; }
 .sidebar a { color: var(--clr-accent); }
 .sidebar a.active { font-weight: bold; }
 
-.main { flex: 1; padding: 1rem; }
-
+.main{
+    flex: 1;
+    padding: 1rem;
+    padding-left: 200px;   /* space for the fixed sidebar */
+    /* optional: avoid accidental horizontal overflow */
+    overflow-x: hidden;
+}
 /* -------------------------------------------------
    3. Card component
    ------------------------------------------------- */
@@ -105,7 +119,7 @@ li { margin-bottom: 10px; color: var(--clr-text); }
 .component h3 { margin: 0 0 5px; }
 
 /* -------------------------------------------------
-   7. Help toggle / modal
+   7. Panel toggles / modal
    ------------------------------------------------- */
 .help-link {
     cursor: pointer;
@@ -116,8 +130,117 @@ li { margin-bottom: 10px; color: var(--clr-text); }
 .help-link:hover { text-decoration: underline; }
 #helpText { display: none; }
 
+.componentDetail-link {
+    cursor: pointer;
+    user-select: none;
+    color: var(--clr-accent);
+    text-align: left;
+}
+.componentDetail-link:hover { text-decoration: underline; }
+#componentDetailText { display: none; }
+
+
 /* -------------------------------------------------
    8. Misc helpers
    ------------------------------------------------- */
 /* Hide numeric markers in metric columns (if any) */
-#host_metrics_column td { list-style: none; padding-left: 0; margin-left: 0; }
+#host_metrics_column td { list-style: none; padding-left: 0; margin-left: 0; }
+
+.host-status {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    margin-left: 6px;
+    margin-right: 8px;
+    vertical-align: middle;
+    background: #808080;          /* default – unknown / no timestamp */
+    transition: background-color 1s linear;   /* smooth fade */
+}
+
+
+/* -------------------------------------------------
+   9. Mobile adjustments
+   ------------------------------------------------- */
+@media (max-width: 768px) {
+  /* 1. Make the whole page a column */
+  .wrapper {
+    flex-direction: column;
+  }
+
+  /* 2. Hide the sidebar initially */
+  .sidebar {
+    position: relative;          /* take it out of the flow */
+    width: 100%;
+    max-height: 0;               /* collapsed */
+    overflow: hidden;
+    transition: max-height 0.3s ease-out;
+    background: var(--bg-sidebar);
+    padding: 0;                  /* remove padding */
+  }
+
+  .sidebar.show {
+    max-height: 500px;           /* enough for all items */
+    padding: 1rem;
+  }
+
+  /* 3. Move the toggle button into the header */
+  .mobile-toggle {
+    display: block;
+    font-size: 1.5rem;
+    background: transparent;
+    border: none;
+    color: var(--clr-accent);
+    padding: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  /* 4. Main content no left padding */
+  .main {
+    padding-left: 0;
+    padding-right: 1rem;
+  }
+
+  /* 5. Table scroll on small screens */
+  .card table {
+    width: 100%;
+    table-layout: fixed;
+  }
+
+  .card table thead,
+  .card table tbody,
+  .card table tr,
+  .card table td,
+  .card table th {
+    display: block;
+  }
+
+  .card table tbody {
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+
+  .card table td,
+  .card table th {
+    display: inline-block;
+    vertical-align: top;
+    width: 30%;
+  }
+
+  /* 6. Adjust the host status dot positioning */
+  .host-status {
+    margin-left: 2px;
+    margin-right: 12px;
+  }
+}
+
+/* Optional: style the drawer indicator */
+.sidebar.show::before {
+  content: "✕ Close";
+  display: block;
+  padding: 0.5rem 1rem;
+  background: var(--bg-sidebar);
+  color: var(--clr-accent);
+  font-weight: bold;
+}
+